Fields become empty when adding using innerHTML

[laPistola]

The JS in question

<script type="text/javascript">
<!--
function addField() {
  var txt = "<input name=\"uFile[]\" type=\"file\" id=\"uFile[]\" size=\"50\" /><br />";
  document.getElementById("uploadFields").innerHTML += txt;
}
//-->
</script>

 

The effecting element

<p id="uploadFields">
          <input name="uFile[]" type="file" id="uFile[]" size="50" /> <a href="javascript:addField();">Add another photo</a><br />
        </p>

 

This is a multiple file upload form but if i select a file and need to add another field for another file you click the link Add another photo, this is adding a new field to the list but its wiping out the contents in the other file fields??

 

Any incite would be great thank you!

[micah1701]

the function needs to "save" the values in the original fields and then, when it re-creates those fields when it updates the content of "uploadFields," it can set the VALUE parameter to that "saved" value.

 

I'd add something like this to your function:

 

<script type="text/javascript">
<!--
function addField() {

//get value of current field
var current_value = document.getElementByID['uFile'].value;

//create current field
var txt = "<input name=\"uFile[]\" type=\"file\" id=\"uFile[]\" size=\"50\" value=\""+ current_value +"\" /><br />";

//append with new blank field extra field  
txt += "<input name=\"uFile[]\" type=\"file\" id=\"uFile[]\" size=\"50\"/><br />";

 document.getElementById("uploadFields").innerHTML = txt;
}
//-->
</script>

 

of course, my example wont work after you'ved added 2 or more fields.  You'll need to loop through ALL of the existing fields since there can be more then one element named "uFile"

 

hope that helps a little

 

[laPistola]

Yes thank you, it confirms i would have to do that, my logic said that as im add a new field it shouldn't really touch the old fields.

 

Nevermind ill crack on as i need it to do a max of 8 fields so looping it is.

 

Cheers