using a <select> <option> to display a certain <input> a certain number of times

ActaNonVerba1 · January 21, 2011

Hi Guys

Im trying to show the correct number of File Upload inputs for a project, but dont know how to automatically ajust this depending on an option selected from a select element by the user.

This is the set up.

<label>Number of Thumbnails</label><select name="numberofthumbnails"> 
          										<option>2</option>
                 								<option>4</option>
                                                <option>6</option>
                                                <option>8</option>
                                                <option>10</option>
                                                <option>12</option>
                                                <option>14</option>
                                                <option>16</option>
                                                <option>18</option>
                                                <option>20</option>
                                                <option>22</option>
                                                <option>24</option>
                                              </select><br><br>
          <input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
          <label>Thumbnail 1 | Size: 200px x 430px | Format: PNG</label><input type="file" name="thumbnail1" size="100000000" accept="image/x-png" class="File"><br>
          <input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
          <label>Thumbnail 2 | Size: 200px x 430px | Format: PNG</label><input type="file" name="thumbnail2" size="100000000" accept="image/x-png" class="File"><br>
          <input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
          <label>Thumbnail 3 | Size: 200px x 430px | Format: PNG</label><input type="file" name="thumbnail3" size="100000000" accept="image/x-png" class="File"><br>
           <input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
          <label>Thumbnail 4 | Size: 200px x 430px | Format: PNG</label><input type="file" name="thumbail4" size="100000000" accept="image/x-png" class="File"><br>

So, essentially if the user selects option 6 i want 6 of

 <input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
          <label>Thumbnail 4 | Size: 200px x 430px | Format: PNG</label><input type="file" name="thumbail4" size="100000000" accept="image/x-png" class="File"><br>

Shown, how would i do this?

PaulRyan · January 23, 2011

I have come up with the following:

<script type="text/javascript">
<!--
  function fixForm(select) {
    var inputCount = parseInt(select);
    var newHTML = '';
    for(i=1; i<=inputCount; i++) {
      newHTML += '<input type="hidden" name="MAX_FILE_SIZE" value="10000000" />\n'+
                 '<label>Thumbnail '+i+' | Size: 200px x 430px | Format: PNG</label>\n'+
                 '<input type="file" name="thumbnail'+i+'" size="100000000" accept="image/x-png" class="File">';
      if(i < inputCount) {
        newHTML += '<br>\n\n';
      } else {
        newHTML += '\n\n';
      }
    }
    document.getElementById('formInputs').innerHTML=newHTML;
  }
//-->
</script>

  <label> Number of Thumbnails </label>
  <select name="numberofthumbnails" onChange="fixForm(this.options[selectedIndex].text);"> 
    <option>2</option>
    <option>4</option>
    <option>6</option>
    <option>8</option>
    <option>10</option>
    <option>12</option>
    <option>14</option>
    <option>16</option>
    <option>18</option>
    <option>20</option>
    <option>22</option>
    <option>24</option>
  </select>

  <br><br>

  <span id="formInputs">
    <input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
    <label>Thumbnail 1 | Size: 200px x 430px | Format: PNG</label>
    <input type="file" name="thumbnail1" size="100000000" accept="image/x-png" class="File"><br>

    <input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
    <label>Thumbnail 2 | Size: 200px x 430px | Format: PNG</label>
    <input type="file" name="thumbnail2" size="100000000" accept="image/x-png" class="File"><br>

    <input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
    <label>Thumbnail 3 | Size: 200px x 430px | Format: PNG</label>
    <input type="file" name="thumbnail3" size="100000000" accept="image/x-png" class="File"><br>

    <input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
    <label>Thumbnail 4 | Size: 200px x 430px | Format: PNG</label>
    <input type="file" name="thumbnail4" size="100000000" accept="image/x-png" class="File">
  </span>

Hopefully that will work you, tell me how it goes

Regards, PaulRyan.

ActaNonVerba1 · January 24, 2011

Thanks man, works perfectly, the only thing i changed was deleting the inputs in the span so that it defaults to having zero inputs on page load without any user interaction, rather than four

If i tell you my understanding of the code can you tell me if im right? So that i learn

I is one.

When I is less than or equal to input count, add to I.

and make an input

If I is less than input count add a space?

PaulRyan · January 25, 2011

Yes you are correct well just about anyhow.

The IF ELSE statement withing the FOR statement is as follows:

When i is less than the inputCount we add a visible Line Break (<br>) and some invisible Line Breaks (\n)

When i is equal to the inputCount we and invisible Link Breaks (\n)

No real purpose of the invisible line breaks except when viewing code in FireBug, it looks neater

Regards, PaulRyan.

Psycho · January 25, 2011

Not to offend, but there is a problem with that code. It wipes out the user input when you change the selection. I would hate to be a user who selects "24", enter all my values, and then decide I only need 22 only to have all my inputs wiped out.

Since the maximum allowed is 24, I would generate ALL of the inputs when the page loads and use CSS to display/hide the options. The other benefit with this approach is that it will still work even if the user has JS disabled - they will just have all the fields available to them. BUt your processing logic should be smart enough not to process empty values. Also, instead of giving all the fields different names such as "thumbnail1", "thumbnail2", etc. you can give them all the same name that will be interpreted as an array by the receiving page "thumbnail[]".

Additionally, you don't need to include the MAX_FILE_SIZE field multiple times. I would also only include the description about the Size and format once since it applies to all images. And the size in the file input fields is for the physical size of the field on the page - not the file size.

Here is the approach I would take

<script type="text/javascript">
<!--
  function displayFields(selectVal)
  {
    var inputCount = parseInt(selectVal);

    var fieldIdx = 1;
    while(document.getElementById('thm_'+fieldIdx))
    {
        document.getElementById('thm_'+fieldIdx).style.display = (fieldIdx<=inputCount) ? 'inline' : 'none' ;
        fieldIdx++;
    }
  }

  window.onload = init;
  function init()
  {
    displayFields(2);
  }
//-->
</script>

  <label> Number of Thumbnails </label>
  <select name="numberofthumbnails" onChange="displayFields(this.options[this.selectedIndex].value);"> 
    <option value="2">2</option>
    <option value="4">4</option>
    <option value="6">6</option>
    <option value="8">8</option>
    <option value="10">10</option>
    <option value="12">12</option>
    <option value="14"">14</option>
    <option value="16">16</option>
    <option value="18">18</option>
    <option value="20">20</option>
    <option value="22">22</option>
    <option value="24">24</option>
  </select>

  <br><br>

  <span id="formInputs">
    <input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
     <b>Allowed thumbnail specs: Size 200px x 430px, Format: PNG</b><br>
     <span id="thm_1"><label>Thumbnail 1</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_2"><label>Thumbnail 2</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_3"><label>Thumbnail 3</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_4"><label>Thumbnail 4</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_5"><label>Thumbnail 5</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_6"><label>Thumbnail 6</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_7"><label>Thumbnail 7</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_8"><label>Thumbnail 8</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_9"><label>Thumbnail 9</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_10"><label>Thumbnail 10</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_11"><label>Thumbnail 11</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_12"><label>Thumbnail 12</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_13"><label>Thumbnail 13</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_14"><label>Thumbnail 14</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_15"><label>Thumbnail 15</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_16"><label>Thumbnail 16</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_17"><label>Thumbnail 17</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_18"><label>Thumbnail 18</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_19"><label>Thumbnail 19</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_20"><label>Thumbnail 20</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_21"><label>Thumbnail 21</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_22"><label>Thumbnail 22</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_23"><label>Thumbnail 23</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
     <span id="thm_24"><label>Thumbnail 24</label>
     <input type="file" name="thumbnail[]" accept="image/x-png" class="File"><br></span>
  </span>

Sign In

using a <select> <option> to display a certain <input> a certain number of times

Recommended Posts

ActaNonVerba1

Link to comment

Share on other sites

PaulRyan

Link to comment

Share on other sites

ActaNonVerba1

Link to comment

Share on other sites

PaulRyan

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information