...

View Full Version : need a more efficient way to add input fields



fael097
03-27-2012, 09:23 PM
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

Nile
03-27-2012, 11:42 PM
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>​

fael097
03-31-2012, 11:59 PM
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?

Mishu
04-01-2012, 01:06 AM
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>

Nile
04-02-2012, 02:45 AM
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>​

Mishu
04-02-2012, 02:49 AM
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.

Nile
04-02-2012, 03:01 AM
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>

Mishu
04-02-2012, 03:26 AM
I don't have IE 9.

That's ok. I was just curious.

The code I posted works in all the major browsers.

Nile
04-02-2012, 03:55 AM
Does the last code I provided not? Nonetheless, they both do the same thing.

fael097
04-02-2012, 04:38 AM
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.

Nile
04-02-2012, 04:40 AM
You'll have to treat $_POST['uploadFile'] (or $_GET['uploadFile']) as an array that contains every value of the input.

Mishu
04-02-2012, 04:50 AM
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

Nile
04-02-2012, 04:56 AM
(My point was that an array will need to be used)

Mishu
04-02-2012, 05:59 AM
(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.

Nile
04-02-2012, 11:20 PM
@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.

VIPStephan
04-03-2012, 12:27 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum