Im trying to make a script to add an input field when a current one is clicked using ajax/appendChild but it is not working. Here is my script..

<script type="text/javascript">
function addfile()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
 var s = xmlhttp.responseText;
var div = createElement('div');
div.innerHTML = s;
document.getElementById("org_div1").appendChild = div;
    }
  }
xmlhttp.open("GET","addfile.php");
xmlhttp.send();
}
</script>

And html..

<div id="org_div1" class="file_wrapper_input">

                        <input type="hidden" value="1" id="theValue" />
<input type="file" class="fileupload" name="file1" size=
"80" onchange="addfile()" /></div>

And addfile.php file..

<script type="text/javascript">
    var i=0;
        var ni = document.getElementById('org_div1');
        var numi = document.getElementById('theValue');
    var i=0;
        var ni = document.getElementById('org_div1');
        var numi = document.getElementById('theValue');
        var num = (document.getElementById('theValue').value -1)+ 2;
        numi.value = num;
        var divIdName = num;
</script>
<input type="file"  class="fileupload" size="80" name="file' + (num) + '" onchange="addfile()" />;

Any input? Thanks.

Im trying to make a script to add an input field when a current one is clicked using ajax/appendChild but it is not working. Here is my script..

<script type="text/javascript">
function addfile()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
 var s = xmlhttp.responseText;
var div = createElement('div');
div.innerHTML = s;
document.getElementById("org_div1").appendChild = div;
    }
  }
xmlhttp.open("GET","addfile.php");
xmlhttp.send();
}
</script>

And html..

<div id="org_div1" class="file_wrapper_input">

                        <input type="hidden" value="1" id="theValue" />
<input type="file" class="fileupload" name="file1" size=
"80" onchange="addfile()" /></div>

And addfile.php file..

<script type="text/javascript">
    var i=0;
        var ni = document.getElementById('org_div1');
        var numi = document.getElementById('theValue');
    var i=0;
        var ni = document.getElementById('org_div1');
        var numi = document.getElementById('theValue');
        var num = (document.getElementById('theValue').value -1)+ 2;
        numi.value = num;
        var divIdName = num;
</script>
<input type="file"  class="fileupload" size="80" name="file' + (num) + '" onchange="addfile()" />;

Any input? Thanks.

• javascript
• ajax
• innerhtml
• appendchild

• This is a duplicate of stackoverflow./questions/6736165/… ... – jbabey Commented Jul 18, 2011 at 17:21
• Where my answer should be good... – ChristopheCVB Commented Jul 18, 2011 at 17:37

1 Answer 1

It should be:

document.getElementById("org_div1").appendChild(div);

and

var div = document.createElement('div');

See:

• https://developer.mozilla/En/AppendChild
• https://developer.mozilla/en/document.createElement

From above reference (syntax):

 var child = element.appendChild(child);

 var element = document.createElement(tagName);