Help with Appending innerHTML and Form Elements

Hey everyone,
I have been trying to figure this out for a while now and thought I would ask to see what the problem is.

I have this snippet of javascript that is supposed to add additional input fields when a user requests them, which it does just fine. However, when the new field is added, if any of the existing fields had a value, the value gets erased.

Here is the code:

if (document.getElementById('morestores') != null && document.getElementById('initialStore') != null) {
				 
var trid = document.getElementById('morestores');
var idiv = document.getElementById('initialStore');
				
//count the divs to get a new id					
var trs = trid.getElementsByTagName("div");
var trcount = trs.length;
var nextid = (trcount + 1);
				 
				 
var Icontents = '<div id="s_'+nextid+'" class="itemAttrsExtra"><input type="text" id="'+nextid+'" name="new[]"/></div>';
				
				
//append it to the div
 trid.innerHTML += Icontents;
				
}//end if exists

Any help/feedback would be great,
Thanks!

Hi,

i am experienced web programmer, i didn’t gave full solution but I did helped on request, I know that fields without name wont be submitted to a server and if you are using httprequest to server than you can submit it by getting its value by id. but ok, also what I have missed is I didn’t use his logic to create input field, but if it’s going to be easier I will submit solution. Thanks for remiding me

if (document.getElementById('morestores') != null && document.getElementById('initialStore') != null) {
                
var trid = document.getElementById('morestores');
var idiv = document.getElementById('initialStore');
               
//count the divs to get a new id                   
var trs = trid.getElementsByTagName("div");
var trcount = trs.length;
var nextid = (trcount + 1);
                
                
/*var Icontents = '<div id="s_'+nextid+'" class="itemAttrsExtra"><input type="text" id="'+nextid+'" name="new[]"/></div>';*/

var _obj = document.createElement('div');
 _obj.setAttribute('id', nextid );
 var _input = document.createElement('input');
_input.setAttribute('id',  'input_'+ nextid);
_input.setAttribute('name', 'new[]');
_obj.appendChild(_input);
 trid.appendChild(_obj);               
               
//append it to the div
// trid.innerHTML += Icontents;
               
}//end if exists

This is final solution.

Have you tried assigning a unique name attribute for each new input element?

Form elements are keyed by their name (not their ID) and when they’re eventually POST’d to the server, only one value per name is going to be sent.

If you create a new input element with teh same name, the browser might be resetting the value on every element with that name.

you can do it this way


var _obj = document.createElement('div');
 _obj.setAttribute('id', yourID);
 var _input = document.createElement('input');
_input.setAttribute('id', yourID);
_input.setAttribute('value', yourValue);
_obj.appendChild(_input);
 trid.appendChild(_obj);

//and this child will be appended to the end of trid.

I did google it, but sometimes when you don’t know what to google, nothing gets returned :slight_smile:

Actually it doesn’t. Injecting innerHTML doesn’t append elements to the form no matter how it looks, you must use document.createElement. There’s the I.E. way and the there’s the everything-else way, which have been explained many times. GIYF.