need a more efficient way to add input fields

So I made myself this code so I could have a file upload input field, and the option to add more fields. but it got really big, and I have a fixed number of fields, can't quickly change the number I want.

here's my javascript:
function new_field(id) {
var f = document.getElementById(id);
if(f.style.display == 'none')
f.style.display = 'block';
}

function hide_mais(id) {
var g = document.getElementById(id);
g.style.display = 'none';
}

and the html:
<form>
<div id="file_a" style="display:block"><input type="file" /><a href="#" id="link_a" onclick="new_field('file_b');hide_mais('link_a')">mais</a></div>
<div id="file_b" style="display:none"><input type="file" /><a href="#" id="link_b" onclick="new_field('file_c');hide_mais('link_b')">mais</a></div>
<div id="file_c" style="display:none"><input type="file" /><a href="#" id="link_c" onclick="new_field('file_d');hide_mais('link_c')">mais</a></div>
<div id="file_d" style="display:none"><input type="file" /><a href="#" id="link_d" onclick="new_field('file_e');hide_mais('link_d')">mais</a></div>
<div id="file_e" style="display:none"><input type="file" /><a href="#" id="link_e" onclick="new_field('file_f');hide_mais('link_e')">mais</a></div>
<div id="file_f" style="display:none"><input type="file" /><a href="#" id="link_f" onclick="new_field('file_g');hide_mais('link_f')">mais</a></div>
<div id="file_g" style="display:none"><input type="file" /><a href="#" id="link_g" onclick="new_field('file_h');hide_mais('link_g')">mais</a></div>
<div id="file_h" style="display:none"><input type="file" /><a href="#" id="link_h" onclick="new_field('file_i');hide_mais('link_h')">mais</a></div>
<div id="file_i" style="display:none"><input type="file" /><a href="#" id="link_i" onclick="new_field('file_j');hide_mais('link_i')">mais</a></div>
<div id="file_j" style="display:none"><input type="file" /><a href="#" id="link_j" onclick="new_field('file_k');hide_mais('link_j')">mais</a></div>
<div id="file_k" style="display:none"><input type="file" /><a href="#" id="link_k" onclick="new_field('file_l');hide_mais('link_k')">mais</a></div>
<div id="file_l" style="display:none"><input type="file" /><a href="#" id="link_l" onclick="new_field('file_m');hide_mais('link_l')">mais</a></div>
<div id="file_m" style="display:none"><input type="file" /><a href="#" id="link_m" onclick="new_field('file_n');hide_mais('link_m')">mais</a></div>
<div id="file_n" style="display:none"><input type="file" /><a href="#" id="link_n" onclick="new_field('file_o');hide_mais('link_n')">mais</a></div>
<div id="file_o" style="display:none"><input type="file" /><a href="#" id="link_o" onclick="new_field('file_p');hide_mais('link_o')">mais</a></div>
<div id="file_p" style="display:none"><input type="file" /><a href="#" id="link_p" onclick="new_field('file_q');hide_mais('link_p')">mais</a></div>
<div id="file_q" style="display:none"><input type="file" /><a href="#" id="link_q" onclick="new_field('file_r');hide_mais('link_q')">mais</a></div>
<div id="file_r" style="display:none"><input type="file" /><a href="#" id="link_r" onclick="new_field('file_s');hide_mais('link_r')">mais</a></div>
<div id="file_s" style="display:none"><input type="file" /><a href="#" id="link_s" onclick="new_field('file_t');hide_mais('link_s')">mais</a></div>
<div id="file_t" style="display:none"><input type="file" /><a href="#" id="link_t" onclick="new_field('file_u');hide_mais('link_t')">mais</a></div>
<div id="file_u" style="display:none"><input type="file" /><a href="#" id="link_u" onclick="new_field('file_v');hide_mais('link_u')">mais</a></div>
<div id="file_v" style="display:none"><input type="file" /><a href="#" id="link_v" onclick="new_field('file_w');hide_mais('link_v')">mais</a></div>
<div id="file_w" style="display:none"><input type="file" /><a href="#" id="link_w" onclick="new_field('file_x');hide_mais('link_w')">mais</a></div>
<div id="file_x" style="display:none"><input type="file" /><a href="#" id="link_x" onclick="new_field('file_y');hide_mais('link_x')">mais</a></div>
<div id="file_y" style="display:none"><input type="file" /><a href="#" id="link_y" onclick="new_field('file_z');hide_mais('link_y')">mais</a></div>
<div id="file_z" style="display:none"></div>
</form>

any suggestions of a more efficient way to do that?
also a button to reset form into initial state, with one field only, without having to refresh the page would be cool.

thanks in advance

Try:

<script type="text/javascript">
var fields = [];
var newFileField = function(before) {
var fileContainer = document.createElement("div");
fileContainer.id = "file_"+(parseInt(fields.length)+2);

var file = document.createElement("input");
file.type = "file";

fileContainer.appendChild(file);
before.parentNode.insertBefore(fileContainer, before);

fields[fields.length] = fileContainer;
};
var removeFields = function(before){
if(!confirm("Are you sure you want to delete all of the fields?")){
return false;
}
for(var i = 0; i < fields.length; i++){
before.parentNode.removeChild(fields[i]);
}
}
</script>

<form>
<div id="file_1">
<input type="file" />
</div>
<div id="settings"><a href="#" onclick="newFileField(this.parentNode);">mais</a> <a href="#" onclick="removeFields(this.parentNode)">redefinir</a></div>
</form>​

that worked great man, thank you!

just one question, the first time I click to clear fields, it works, but if I add more fields and try to clear again, it won't reset. any idea why that happens?

any idea why that happens?

This example works every time.

<form>
<div id="form1">
<input type="file" name="uploadFile[]"/>
</div>
<div id="settings">
<a href="" onclick="addUploadFile(); return false;">Add File</a>
<a href="" onclick="removeUploadFiles(); return false;">Reset</a>
</div>
</form>​

<script type="text/javascript">
function addUploadFile(){
var newDiv = document.createElement('div');
var newInp = document.createElement('input');
newInp.setAttribute('type', 'file');
newInp.setAttribute('name', 'uploadFile[]');
newDiv.appendChild(newInp);
document.getElementById('form1').appendChild(newDiv);
}
function removeUploadFiles(){
var uploadsContainer = document.getElementById('form1');
while(uploadsContainer.getElementsByTagName('div').length > 0){
uploadsContainer.removeChild(uploadsContainer.getElementsByTagName('div')[0]);
}
}
</script>

So will:

<script type="text/javascript">
var fields = [];
var newFileField = function(before) {
var fileContainer = document.createElement("div");
fileContainer.id = "file_"+(parseInt(fields.length)+2);

var file = document.createElement("input");
file.type = "file";

fileContainer.appendChild(file);
before.parentNode.insertBefore(fileContainer, before);

fields[fields.length] = fileContainer;
};
var removeFields = function(before){
if(!confirm("Are you sure you want to delete all of the fields?")){
return false;
}
for(var i in fields){
before.parentNode.removeChild(fields[i]);
delete(fields[i]);
}
}
</script>

<form>
<div id="file_1">
<input type="file" />
</div>
<div id="settings"><a href="#" onclick="newFileField(this.parentNode);">mais</a> <a href="#" onclick="removeFields(this.parentNode)">redefinir</a></div>
</form>​

So will:


What was the error in your first attempt?

When I ran it in IE v9 I got

Error: DOM Exception: NOT_FOUND_ERR (8) when I tried to delete a second set of added fields, the same as the op.

I don't have IE 9. Try this:

<script type="text/javascript">
var fields = [];
var newFileField = function(before) {
var fileContainer = document.createElement("div");
fileContainer.id = "file_"+(parseInt(fields.length)+2);

var file = document.createElement("input");
file.type = "file";

fileContainer.appendChild(file);
before.parentNode.insertBefore(fileContainer, before);

fields[fields.length] = fileContainer;
};
var removeFields = function(before){
if(!confirm("Are you sure you want to delete all of the fields?")){
return false;
}
for(var i in fields){
if(fields[i] != null && fields[i] != ""){ before.parentNode.removeChild(fields[i]); }
delete(fields[(fields[i] = "", i)]);
}
}
</script>

<form>
<div id="file_1">
<input type="file" />
</div>
<div id="settings"><a href="#" onclick="newFileField(this.parentNode);">mais</a> <a href="#" onclick="removeFields(this.parentNode)">redefinir</a></div>
</form>

I don't have IE 9.

That's ok. I was just curious.

The code I posted works in all the major browsers.

Does the last code I provided not? Nonetheless, they both do the same thing.

yup, both of them work, and do the same. I'm just not sure how to handle file upload when I have multiple fields with name="uploadFile[]". I'm sending my data as php variables.

You'll have to treat $_POST['uploadFile'] (or $_GET['uploadFile']) as an array that contains every value of the input.

I have multiple fields with name="uploadFile[]". I'm sending my data as php variables.

newInp.setAttribute('name', 'uploadFile[]');will create an array of file names to be uploaded.

On the php side when you have only a single file to upload then $_FILES["uploadFile"]["tmp_name"] will contain just the single file. But now you are uploading multiple files so the first upload file will be in $_FILES["uploadFile"]["tmp_name"][0], the 2nd file will be in $_FILES["uploadFile"]["tmp_name"][1] etc.

So you need to loop through $_FILES["uploadFile"]["tmp_name"] and process each uploaded individually just as if it were the only uploaded file. Remember that you are dealing with an array of uploaded files so the filename of the 1st file will be in $_FILES["file"]["name"][0] etc

You'll have to treat $_POST['uploadFile'] (or $_GET['uploadFile']) as an array that contains every value of the input. I doubt that will work for uploading files. I think you'll find you will need to use the $_FILES array

(My point was that an array will need to be used)

(My point was that an array will need to be used)
You could have made the point without misleading the op by giving them the wrong array name. Why didn't you give them the correct name at least?

Otherwise they could have wasted a lot of time trying to get the incorrect array name you gave them to work.

@Mishu

Although neither obligated nor inclined to reply to your irrelevant and condescending comment, I was unaware of the mistake at the time, however, I did correct myself and exhibit my explicit point.

OK, enough of the off-topic flamewar. I’ve deleted all posts that are irrelevant to the subject, just in case you wonder. Now stop it and move on.