Form field in Appendchild not posting in Firefox

Hi, I have an appendchild script that adds an <input> element when a current one is clicked. It then gets posted by a PHP script. Everything works perfectly in IE, but in Firefox, nothing gets posted.

<script type="text/javascript">
   
var i=0;
function addElement() {

  var ni = document.getElementById('org_div1');
    
  var numi = document.getElementById('theValue');

  var num = (document.getElementById('theValue').value -1)+ 2;

  numi.value = num;
      
    var newDiv = document.createElement('div');
          
    var divIdName = num;

  newDiv.setAttribute('id',divIdName);
    
newDiv.innerHTML = ' '+num+' <input type="file" name="file' + (num) +' " onclick="addElement()"/> <a href=\\'#\\' onclick=\\'removeElement('+divIdName+')\\'>Remove the div "'+divIdName+'"</a>';
    // add the newly created element and it's content into the DOM
    ni.appendChild(newDiv);
}
    
    function removeElement(divNum) {

  var d = document.getElementById('org_div1');

  var olddiv = document.getElementById(divNum);

  d.removeChild(olddiv);

}
    
</script>

Anyone have any input?

Does the problem still remain when you use DOM manipulation techniques to create the elements?

Hmm… Not quite sure what you mean… can you explain? - thanks

What I mean is to not use innerHTML, but to use DOM manipulation techniques such as createElement, setAttribute, and appendChild to create the same content.

Thats a good question. Im going to look up the syntax and check out. Ill get back to you in a few and let you know how it goes.

It could also be due to invalid HTML in your page.
Here is a bug report where a form wasn’t submitting fields added with innerHTML in Firefox, but the actual problem was that the form was inside of a table, that being an invalid HTML code structure.

If you can provide us with a link to a test page that demonstrates the problem, we can help you to find the actual cause of the problem.

I couldnt figure out how to use dom manipulations for everything i need (file upload, onclick, name i++ etc)

Unfortunately, the full code is on my computer at work and it isnt on any online server. Thanks for the help, ill play around with it some more.

Do you think you can help me with DOM manipulations?

Sure thing. What part do you need help with?

Well basically Ill keep a majority of the script i have now. Just ill replace the innerHTML with create element.

The create element should be a file input element with name=file’ + (num) +’ and onclick=“addElement()”/> <a href=\‘#\’ onclick=\‘removeElement(’+divIdName+‘)\’>Remove the div “‘+divIdName+’”</a>

Does this make sense? Is this possible?

Yes, you’ll want to create two elements, an input element and an anchor element, in a similar way to which the newDiv was created.

To the input element you will set the name attribute and the onclick event.
To the anchor you will set the href attribute and the onclick event, and append some text created with createTextNode

After which, both the input element and the anchor element can be appended to the div.

Do you want to give it a go, and come back to us when you come across a part that you have trouble understanding?

Yeah definitely ill let you know what i come up with. Thanks.

So heres the new script ive come up with but it isnt quite working…

<script type="text/javascript">
   
var i=0;
function addElement() {
 
  var ni = document.getElementById('org_div1');
    
  var numi = document.getElementById('theValue');
 
  var num = (document.getElementById('theValue').value -1)+ 2;
 
  numi.value = num;
      
    var newDiv = document.createElement('div');
          
    var divIdName = num;
 
  newDiv.setAttribute('id',divIdName);
    
var inputfile = document.createElement("input");
  		input.setAttribute("type", "file");
  		input.setAttribute("name", 'file' + (num);
  		input.onclick = addElement();

        var removelink = document.write("<a href=\\'#\\' onclick=\\'removeElement('+divIdName+')\\'>Remove the div "'+divIdName+'"</a>");

	newDiv.appendChild(inputfile, removelink);
	ni.appendChild(newDiv); }

I feel like im so close!

Played around it some more and got the input to work, but the anchotag isnt…


<script type="text/javascript">
   
var i=0;
function addElement() {
 
  var ni = document.getElementById('org_div1');
    
  var numi = document.getElementById('theValue');
 
  var num = (document.getElementById('theValue').value -1)+ 2;
 
  numi.value = num;
      
    var newDiv = document.createElement('div');
          
    var divIdName = num;
 
  newDiv.setAttribute('id',divIdName);
    
var input= document.createElement("input");
  		input.setAttribute("type", "file");
  		input.setAttribute("name", 'file' + (num));
		input.setAttribute("onclick", "addElement()");
     
var anchorTag = document.createElement("a");
		a.setAttribute('onclick', "removeElement('+divIdName+')");
		a.createTextNode("<a onclick=\\'removeElement('+divIdName+')\\'>Remove the div</a>");
	
	newDiv.appendChild(input);
		newDiv.appendChild(anchorTag);

	ni.appendChild(newDiv); }
    
    function removeElement(divNum) {
 
  var d = document.getElementById('org_div1');
 
  var olddiv = document.getElementById(divNum);
 
  d.removeChild(olddiv);
 
}
    
</script>