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>
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.
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.
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>
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?
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); }
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>