Show the correct amount of input field based on qty input field entered

Question

I'm trying to arrange a setup where the amount of Attendee input fields display based on the amount of qty entered.

Example will be the Attendee 1 field will always display as it is a required field to fill in. Then if the user enters "2" in the qty input field only Attendee 1 & Attendee 2 will display and so on...max attendee is 15.

I have set up the html mark up here.

<div id="personal-fields">
<label class="personal-field-title">Attendee 1<span class="validate">*</span></label><input class="personal-field-value" name="attendee1" required="" /><p class="not-validated">* This field is required.</p>
<label class="personal-field-title">Attendee 2</label><input class="personal-field-value" name="attendee2" />
<label class="personal-field-title">Attendee 3</label><input class="personal-field-value" name="attendee3" />
<label class="personal-field-title">Attendee 4</label><input class="personal-field-value" name="attendee4" />
<label class="personal-field-title">Attendee 5</label><input class="personal-field-value" name="attendee5" />
<label class="personal-field-title">Attendee 6</label><input class="personal-field-value" name="attendee6" />
<label class="personal-field-title">Attendee 7</label><input class="personal-field-value" name="attendee7" />
<label class="personal-field-title">Attendee 8</label><input class="personal-field-value" name="attendee8" />
<label class="personal-field-title">Attendee 9</label><input class="personal-field-value" name="attendee9" />
<label class="personal-field-title">Attendee 10</label><input class="personal-field-value" name="attendee10" />
<label class="personal-field-title">Attendee 11</label><input class="personal-field-value" name="attendee11" />
<label class="personal-field-title">Attendee 12</label><input class="personal-field-value" name="attendee12" />
<label class="personal-field-title">Attendee 13</label><input class="personal-field-value" name="attendee13" />
<label class="personal-field-title">Attendee 14</label><input class="personal-field-value" name="attendee14" />
<label class="personal-field-title">Attendee 15</label><input class="personal-field-value" name="attendee15" />
</div>

<div class="attributeselection">
<span class="leftselection thumbnail">Qty<input name="ctl00$MainCentre$container$container$Content_31$StyleDetail1$txtQuantity" id="ctl00_MainCentre_container_container_Content_31_StyleDetail1_txtQuantity" value="1" maxlength="5" class="inputqty form-control" autocomplete="off" onkeypress="return NumericText(event);" pattern="[0-9]*" type="text"> 
</span> 
</div>

https://jsfiddle.net/kjy4hdhz/

Thanks in advance.

Answer 1

Here is a way to do it using JS. I wrapped your label/input in an element so they're easier to target, and added a class that toggles the display property to hide/show them.

 var field = document.getElementById('ctl00_MainCentre_container_container_Content_31_StyleDetail1_txtQuantity'), groups = document.getElementById('personal-fields').getElementsByClassName('group'); field.addEventListener('change',function() { var val = this.value; for (var i = 0; i < groups.length; i++) { if (i < val) { groups[i].classList.remove('hidden'); } else { groups[i].classList.add('hidden'); } } }) 

 #personal-fields { display: inline-block; background-color: #f3f3f3; border: 1px solid #dfdfdf; padding: 20px; width: auto; margin-top: 20px; } #personal-fields label{ font-size: 12px; font-family: sans-serif; width: 150px; display: inline-block; font-weight: bold; } .personal-field-value{ padding: 8px; margin-bottom: 10px; width: 220px; border: 1px solid #dfdfdf; display: block; } .personal-field-value:hover{ border: 1px solid #000; } span.validate{ color: #d10000; vertical-align: top; } p.not-validated{ text-align: right; font-size: 10px; color: #d10000 !important; font-family: sans-serif; margin: 0 0 10px; display: none; } .attributeselection{ display: inline-block; width: 100%; margin: 20px 0; } .attributeselection input{ padding: 5px; border: 1px solid #ccc; } .hidden { display: none; } 

  <div id="personal-fields"> <div class="group"> <label class="personal-field-title">Attendee 1<span class="validate">*</span></label><input class="personal-field-value" name="attendee1" required="" /><p class="not-validated">* This field is required.</p> </div> <div class="group hidden"> <label class="personal-field-title">Attendee 2</label><input class="personal-field-value" name="attendee2" /> </div> <div class="group hidden"> <label class="personal-field-title">Attendee 3</label><input class="personal-field-value" name="attendee3" /> </div> <div class="group hidden"> <label class="personal-field-title">Attendee 4</label><input class="personal-field-value" name="attendee4" /> </div> <div class="group hidden"> <label class="personal-field-title">Attendee 5</label><input class="personal-field-value" name="attendee5" /> </div> <div class="group hidden"> <label class="personal-field-title">Attendee 6</label><input class="personal-field-value" name="attendee5" /> </div> <div class="group hidden"> <label class="personal-field-title">Attendee 7</label><input class="personal-field-value" name="attendee5" /> </div> <div class="group hidden"> <label class="personal-field-title">Attendee 8</label><input class="personal-field-value" name="attendee5" /> </div> <div class="group hidden"> <label class="personal-field-title">Attendee 9</label><input class="personal-field-value" name="attendee5" /> </div> <div class="group hidden"> <label class="personal-field-title">Attendee 10</label><input class="personal-field-value" name="attendee5" /> </div> <div class="group hidden"> <label class="personal-field-title">Attendee 11</label><input class="personal-field-value" name="attendee5" /> </div> <div class="group hidden"> <label class="personal-field-title">Attendee 12</label><input class="personal-field-value" name="attendee5" /> </div> <div class="group hidden"> <label class="personal-field-title">Attendee 13</label><input class="personal-field-value" name="attendee5" /> </div> <div class="group hidden"> <label class="personal-field-title">Attendee 14</label><input class="personal-field-value" name="attendee5" /> </div> <div class="group hidden"> <label class="personal-field-title">Attendee 15</label><input class="personal-field-value" name="attendee5" /> </div> </div> <div class="attributeselection"> <span class="leftselection thumbnail"><input name="ctl00$MainCentre$container$container$Content_31$StyleDetail1$txtQuantity" id="ctl00_MainCentre_container_container_Content_31_StyleDetail1_txtQuantity" value="1" maxlength="5" class="inputqty form-control" autocomplete="off" pattern="[0-9]*" type="text"></span> <span class="rightselection thumbnail"><span id="ctl00_MainCentre_container_container_Content_31_StyleDetail1_lblSelection"></span></span> </div> 

Answer 2

jQuery's .slice() method makes this pretty easy:

 $(".inputqty").change(function() { // when the Quantity input is changed var qty = +this.value // (try to) convert its value to a number if (qty >= 1 && qty <= 15) { // if valid, then... $(".personal-field-title").hide().slice(0,qty).show() // show that many labels $(".personal-field-value").hide().slice(0,qty).show() // and inputs } else { // otherwise alert("Please enter a quantity between 1 and 15.") // show message } }).change() // trigger the handler once to show default number of items 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="personal-fields"> <label class="personal-field-title">Attendee 1<span class="validate">*</span></label><input class="personal-field-value" name="attendee1" required="" /><p class="not-validated">* This field is required.</p> <label class="personal-field-title">Attendee 2</label><input class="personal-field-value" name="attendee2" /> <label class="personal-field-title">Attendee 3</label><input class="personal-field-value" name="attendee3" /> <label class="personal-field-title">Attendee 4</label><input class="personal-field-value" name="attendee4" /> <label class="personal-field-title">Attendee 5</label><input class="personal-field-value" name="attendee5" /> <label class="personal-field-title">Attendee 6</label><input class="personal-field-value" name="attendee6" /> <label class="personal-field-title">Attendee 7</label><input class="personal-field-value" name="attendee7" /> <label class="personal-field-title">Attendee 8</label><input class="personal-field-value" name="attendee8" /> <label class="personal-field-title">Attendee 9</label><input class="personal-field-value" name="attendee9" /> <label class="personal-field-title">Attendee 10</label><input class="personal-field-value" name="attendee10" /> <label class="personal-field-title">Attendee 11</label><input class="personal-field-value" name="attendee11" /> <label class="personal-field-title">Attendee 12</label><input class="personal-field-value" name="attendee12" /> <label class="personal-field-title">Attendee 13</label><input class="personal-field-value" name="attendee13" /> <label class="personal-field-title">Attendee 14</label><input class="personal-field-value" name="attendee14" /> <label class="personal-field-title">Attendee 15</label><input class="personal-field-value" name="attendee15" /> </div> <div class="attributeselection"> <span class="leftselection thumbnail">Qty<input name="ctl00$MainCentre$container$container$Content_31$StyleDetail1$txtQuantity" id="ctl00_MainCentre_container_container_Content_31_StyleDetail1_txtQuantity" value="1" maxlength="5" class="inputqty form-control" autocomplete="off" onkeypress="/*return NumericText(event);*/" pattern="[0-9]*" type="number"> </span> </div>