Add multiple controls to a div element

Question

Add multiple controls to a div element

Working efficiently, I've set up a system to collect data within a div by inserting hidden input boxes before submitting it to the server. Below is the JavaScript code I'm using:

function appendToDiv()
{
 var mydiv=document.getElementById("somediv");
 var mydata=document.getElementsByName("description")[0].value;
 var myurl=document.getElementsByName("url")[0].value;
 var data=mydata+myurl;
 mydiv.innerHTML="<input type='hidden' name='sUrl[]' value='"+data+"'/>"
}

I have an onchange event in place that continuously calls the above function until I have gathered all necessary data to send to the server. However, only one input gets appended to the div. What could be causing this issue?

javascript

Answer 1

Answer №1

Every time you use innerHTML="...", you are replacing the existing content. It is better to create your inputs as DOM objects (document.createElement) and then use appendChild to add them.

I did a quick search and found a page that explains this concept:

You can implement it like this:

var el = document.createElement('input');
el.setAttribute('type', 'hidden');
el.setAttribute('name', sUrl[]); // I'm not sure what sUrl[] is supposed to be?
el.setAttribute('value', data);
mydiv.appendChild(el);

By the way, most frameworks (like jQuery, Ext JS, etc.) make tasks like this much simpler if you use them regularly.

Answer 2

Every time you use innerHTML="...", you are replacing the existing content. It is better to create your inputs as DOM objects (document.createElement) and then use appendChild to add them.

I did a quick search and found a page that explains this concept:

You can implement it like this:

var el = document.createElement('input');
el.setAttribute('type', 'hidden');
el.setAttribute('name', sUrl[]); // I'm not sure what sUrl[] is supposed to be?
el.setAttribute('value', data);
mydiv.appendChild(el);

By the way, most frameworks (like jQuery, Ext JS, etc.) make tasks like this much simpler if you use them regularly.

Add multiple controls to a div element

Answer №1

Similar questions

Uploading to npm unsuccessful as the specified file in the `main` attribute was not successfully published

Executing a Javascript GET request leading to a 301 redirect

Swapping XML tag names in Node.js

Using Javascript to swap out elements sharing the same classname with distinct contents

The seamless integration of React.js with HTML

Marked checkboxes and Node.js

The ordering of jQuery's each() and load() functions

Link to Reply Comment Feature in Wordpress

Unable to upload a file to an email using the mandrillapp JSON API

Having trouble inputting a value into a textbox after enabling it via Javascript

JavaScript fails to execute in Prestashop

A common inquiry: how can one pinpoint a location within an irregular figure?

React: Using useState and useEffect to dynamically gather a real-time collection of 10 items

Changing the default date display in Vue.js

Getting parameter names (or retrieving arguments as an object) within a method decorator in TypeScript: What you need to know

Using Angular filters, it is possible to eliminate DOM elements without relying on jQuery

Tips for preventing scrolling on iOS in Chrome or Safari using CSS, JavaScript, or jQuery

Transferring information from a single document to numerous documents

How can I achieve the function of // @codekit-prepend "" with gulp?

The process of dynamically adding buttons in Summernote with the inclusion of a parameter