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.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Aug 2003
    Location
    scotland, edinburgh
    Posts
    176
    Thanks
    5
    Thanked 1 Time in 1 Post

    how to choose a number of inputs

    I am currently making an article submission system in php and for part of the things that can get submited with this article is some image files releated to this article. At the moment I have a 10 type file inputs in a nice row so that the user can upload a max of ten files,
    Now heres where I need help, i would like it too look a bit more dynamic so I want to give the user an option to choose how many files out of ten they want to upload, so i am thinking maybe a listbox listing numbers one to ten and they choose how many uploads they want and once they click on that number, up pops that number of "<input type="file">" rather than just a row of ten uploads as some may not even be used.
    So can any of you show some examples on how this can be done or show a tutorial on how do something like this.
    Thanks again

  • #2
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This would be just as easy to do in PHP, and would be x-browser friendly.


    -james
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #3
    Regular Coder
    Join Date
    Aug 2003
    Location
    scotland, edinburgh
    Posts
    176
    Thanks
    5
    Thanked 1 Time in 1 Post
    ok ill see what the people over at the php forums say about this, if theres a way of doing it via php
    thanks anyway

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Something like this may help:

    Place the script in the HEAD and in the body where you would like to build the inputs add this script call including the max number of inputs highlighted in blue:
    <script type="text/javascript">addInputs(10)</script>

    And it is advised that you include your current file inputs which you placed in a nice row within <noscript> tags for those whom have javascript disabled.....


    Code:
    <script type="text/javascript">
     <!--//
      function addInputs(theInput){
       var table = document.createElement('table');
       var files = document.getElementById('files');
       var tbody = document.createElement('tbody');
           table.setAttribute('id','files');
    
        if((typeof theInput).match(/number/i)){
           document.write('<label>How many files would you like to upload: </label>');
           document.write('<input type="text" size="1" onkeyup="addInputs(this)">');
           maxNumber = theInput;
           return;
        }
    
        if(theInput.value > maxNumber){
           alert('You may only upload '+maxNumber+' files!');
           if(files)theInput.parentNode.removeChild(files);
           theInput.value = theInput.value.replace(/\S*/g,'');
           theInput.focus();
           return;
        }   
    
        if(theInput.value.length > 0 && !theInput.value.match(/^\d+$/)){
           alert('Please enter only whole numbers into this field!');
           theInput.value = theInput.value.replace(/[^\d]*/g,'');
           theInput.focus();
           return;
        }   
    
        if(theInput.value.length == 0 || theInput.value.match(/^\d+$/)){
          for(var i=1; i<=theInput.value; i++){
              var row   = document.createElement('tr');
              var cell  = document.createElement('td');
              var label = document.createElement('label');
                  label.setAttribute('for','file'+(i));
                  label.appendChild(document.createTextNode('File '+i+': '));
                  cell.appendChild(label);
                  row.appendChild(cell);
                  tbody.appendChild(row);
    
    
              var cell  = document.createElement('td');
              var input = document.createElement('input');
                  input.setAttribute('name','file'+(i));
                  input.setAttribute('type','file');
                  input.setAttribute('size','40');
                  cell.appendChild(input);
                  row.appendChild(cell);
                  tbody.appendChild(row);
          }       table.appendChild(tbody);
    
          if(files){
             theInput.parentNode.removeChild(files);
          }  theInput.parentNode.insertBefore(table,theInput.nextSibling);
        }                   
      }
     //-->
    </script>
    </head>
    
    <body>
     <form method="get" action="http://google.com">
      <script type="text/javascript">addInputs(10)</script>
       <noscript>
        <input type="file" name="file1">
        <input type="file" name="file2">
        <input type="file" name="file3">
        <input type="file" name="file4">
        <input type="file" name="file5">
        <input type="file" name="file6">
        <input type="file" name="file7">
        <input type="file" name="file8">
        <input type="file" name="file9">
        <input type="file" name="file10">
       </noscript>
     </form>
    .....Willy
    Last edited by Willy Duitt; 08-26-2004 at 06:42 AM.

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts

    Alternative solution (easier)

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function hideFileInputs(){
      var f = document.forms['uploadForm'];
      var elem;
      for (var i=1;i<=10;i++){
        elem=f.elements['file'+i];
        elem.disabled=true;
        elem.style.display='none';
      }
    }
    
    function showFileInputs(n, f){
      var elem;
      for (var i=1;i<=10;i++){
        elem=f.elements['file'+i];
        if (i<=n){//show it
          elem.disabled=false;
          elem.style.display='inline';
        }
        else {//hide it
          elem.disabled=false;
          elem.style.display='none';
        }
      }
    }
    </script>
    </head>
    <body onload="hideFileInputs()">
    <form name="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">
    How many attachments do you want? 
    <select name="num" onchange="showFileInputs(this.options[this.selectedIndex].text,this.form)">
    <option selected="selected">0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    </select><br />
    Attachments:<br />
    <input type="file" name="file1" /><br />
    <input type="file" name="file2" /><br />
    <input type="file" name="file3" /><br />
    <input type="file" name="file4" /><br />
    <input type="file" name="file5" /><br />
    <input type="file" name="file6" /><br />
    <input type="file" name="file7" /><br />
    <input type="file" name="file8" /><br />
    <input type="file" name="file9" /><br />
    <input type="file" name="file10" /><br />
    </form>
    </body>
    </html>

  • #6
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Aye, much easier...

    .....Willy

    Edit: Ooops, for some reason I was thinking text input not option menu...
    Last edited by Willy Duitt; 08-26-2004 at 07:18 AM.

  • #7
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <?php
    
    $Num = $_POST['num'];
    
    for ($i=0;$i<$Num;$i++){
    echo '<input name="pic' . $i . '" type="file" size="35" />' . '<br />';
    }
    
    ?>

    -james
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #8
    Regular Coder
    Join Date
    Aug 2003
    Location
    scotland, edinburgh
    Posts
    176
    Thanks
    5
    Thanked 1 Time in 1 Post
    thank you again so much
    glenngv that worked like a dream, exactly how i wanted it
    thanks for everyone who helped out aswel i couldnt have done it without u guys

    just wondering for Willy Duitt i needing to put a style class into the inputs what would i do if i wanted to do that
    Last edited by tsclan; 08-26-2004 at 01:54 PM.

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Code:
    <head>
    <style type="text/css">
    .upload {
       font-size:12px;
       font-family: Verdana;
    }
    </style>
    </head>
    ...
    <input type="file" class="upload" name="file1" />
    Take note that you can't change the style of the Browse button other than the font and size.

  • #10
    Regular Coder
    Join Date
    Aug 2003
    Location
    scotland, edinburgh
    Posts
    176
    Thanks
    5
    Thanked 1 Time in 1 Post
    thanks again,
    but now things have gone one and now when i have to do multiple uploads in php the input needs to becomes this
    <input type='file' name='file[]' /><br />
    and no longer is the name field just "file1" all the way up to ten.
    This has caused an error in GLENNGV's javascript, it looked like that all i neaded to do was change this line
    elem=f.elements['file'+i];
    to this
    elem=f.elements['file[]'];
    on both functions but that doesn seem to work,
    any help on this would be great thanks
    Last edited by tsclan; 08-26-2004 at 06:14 PM.

  • #11
    Regular Coder
    Join Date
    Aug 2003
    Location
    scotland, edinburgh
    Posts
    176
    Thanks
    5
    Thanked 1 Time in 1 Post
    dont worry i managed to get it to work
    I saw this line in Willy Duitt example
    label.appendChild(document.createTextNode('File '+i+': '));
    and i saw that it had +i+ in it so i made my line go
    elem=f.elements['file'+i];
    to this
    elem=f.elements['file['+i+']'];
    and that now worked thanks and sorry for the bother


  •  

    Posting Permissions

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