Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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:
    Code:
    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:
    Code:
    <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

  • #2
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    Try:
    Code:
    <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>​
    Last edited by Nile; 03-27-2012 at 11:46 PM.

  • #3
    New Coder
    Join Date
    Mar 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by fael097 View Post
    any idea why that happens?
    This example works every time.
    Code:
            <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>
    Last edited by Mishu; 04-01-2012 at 01:27 AM.

  • #5
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    So will:
    Code:
    <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>​

  • #6
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by Nile View Post
    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.
    Last edited by Mishu; 04-02-2012 at 02:51 AM.

  • #7
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    I don't have IE 9. Try this:
    Code:
    <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>

  • #8
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by Nile View Post
    I don't have IE 9.
    That's ok. I was just curious.

    The code I posted works in all the major browsers.

  • #9
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    Does the last code I provided not? Nonetheless, they both do the same thing.

  • #10
    New Coder
    Join Date
    Mar 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #11
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    You'll have to treat $_POST['uploadFile'] (or $_GET['uploadFile']) as an array that contains every value of the input.

  • #12
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by fael097 View Post
    I have multiple fields with name="uploadFile[]". I'm sending my data as php variables.
    Code:
    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

    Quote Originally Posted by Nile View Post
    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
    Last edited by Mishu; 04-02-2012 at 04:53 AM.

  • #13
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    (My point was that an array will need to be used)

  • #14
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by Nile View Post
    (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.

  • #15
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    @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.
    Last edited by Nile; 04-03-2012 at 03:43 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •