Hide and show select option based on select option - javascript

Hey guys any help will be appreciated. I'm trying to show a set of select option base on what is selected on another select option. I have a select option called "children" with a set of other select option which should be hidden by default. If "1" children is selected then one of the other select option should show, if "2" children is selected then two of the other option should be displayed. I have been trying to get this to work for a few days now with no luck. Can someone point me in the right directions thanks.
here is my html
<select name="child" class="form-control" id="numchds" onchange="updateRooms();">
<option value="child" selected="selected">Children</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div class="row" id="childage">
<div class="col-xs-3 col-sm-3 col-md-2">
<label for="child">Child 1</label>
<select name="0" class="form-control" id="chd1age">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
</div>
<div class="col-xs-3 col-sm-3 col-md-2">
<label for="child">Child 2</label>
<select name="child" class="form-control" id="chd2age">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
</div>
<div class="col-xs-3 col-sm-3 col-md-2">
<label for="child">Child 3</label>
<select name="child" class="form-control" id="chd3age">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
</div>
<div class="col-xs-3 col-sm-3 col-md-2">
<label for="child">Child 4</label>
<select name="child" class="form-control" id="chd4age">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
</div>
<div class="col-xs-3 col-sm-3 col-md-2">
<label for="child">Child 5</label>
<select name="child" class="form-control" id="chd5age">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
</div>
</div>
here is my javascript
$('#numchds').change(function () {
var val = $(this).val();
if (val === 'child') {
$('#chd1age').hide();
$('#chd2age').hide();
$('#chd3age').hide();
$('#chd4age').hide();
$('#chd5age').hide();
} else if (val === '1') {
$('#chd1age').show();
$('#chd2age').hide();
$('#chd3age').hide();
$('#chd4age').hide();
$('#chd5age').hide();
} else if (val === '2') {
$('#childage').show();
$('#chd1age').show();
$('#chd2age').show();
$('#chd3age').hide();
$('#chd4age').hide();
$('#chd5age').hide();
} else if (val === '3') {
$('#childage').show();
$('#chd1age').show();
$('#chd2age').show();
$('#chd3age').show();
$('#chd4age').hide();
$('#chd5age').hide();
} else if (val === '4') {
$('#childage').show();
$('#chd1age').show();
$('#chd2age').show();
$('#chd3age').show();
$('#chd4age').show();
$('#chd5age').hide();
} else {
$('#childage').show();
$('#chd1age').show();
$('#chd2age').show();
$('#chd3age').show();
$('#chd4age').show();
$('#chd5age').show();
}
});
Link to jsfiddle http://jsfiddle.net/BMcJ9/


Shorter I made it, work it does
$('#numchds').change(function () {
var val = this.value,
sel = $('.form-control').not(':first');
sel.each(function() {
$(this).add($(this).prev()).toggle(sel.index(this) < val)
});
}).trigger('change');
FIDDLE


$('#numchds').change(function () {
var val = $(this).val() || 5;
$('#childage > div').show().eq(val-1).nextAll().hide();
});
FIDDLE

Related

How to make specific options to appear in select menu?

I have two select fields in a program. Both select fields contain options with values 1 to 10. the code is as below:
<select id="noc">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br/>
<!--Some text---->
<select id="po">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
I want to achieve the following effect using JavaScript :
(Only for example) If the user has selected the option 8 in the first select field (id="noc"), the options below 8 (i.e. 9 and 10) should not be visible in the second select field (id="po").

You can do it with using onChange method and with querySelectorAll.
display or visibility attributes doesn't work for cross browsers. So you should recreate options.
var noc=document.getElementById("noc");
var po=document.getElementById("po");
var options=po.querySelectorAll("option");
function nochange(){
po.innerHTML="";
[...options].filter(x=>parseInt(x.value)<=parseInt(noc.value)).forEach(x=>{po.append(x)})
po.value=noc.value;
}
<select id="noc"onChange="nochange()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br/>
<!--Some text---->
<select id="po">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

You can try this, when the selected option first select (noc) changes, loop over the options in the second select (po) and hide its options whose values are greater than the value of the option selected in the first select (noc).
const noc = document.getElementById('noc');
const po = document.getElementById('po');
noc.addEventListener('change', (e) => {
[...po.children].forEach(child => {
if (Number(child.getAttribute('value')) > e.target.value) {
return child.style.display = 'none'
}
})
});
<select id="noc">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br/>
<!--Some text---->
<select id="po">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

const max = 10;
var items = [...Array(max).keys()]
var noc = document.getElementById("noc");
var po = document.getElementById("po");
items.forEach(n => {
var opt = document.createElement("select");
opt.value = n;
noc.appendChild(opt);
po.appendChild(opt);
});
noc.addEventListener("change", e => {
var selected = e.target.value;
po.querySelectorAll("option").forEach((el, index) => {
if (selected < index) {
el.style.display = "visible";
} else {
el.style.display = "none";
}
});
});
.invisible {
display: none;
}
<select id="noc">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br/>
<!--Some text---->
<select id="po">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

Is there any way to disable options of Select 2 which has larger values than the value of option selected in Select 1

I have two select in a form.
They are not siblings. They both has 15 options which has 1-15 values. And what I need to get is that when an option is selected from Select A which has a value of 5. Then the options of Select B which has larger value than 5 should be disabled.
This is my code:
<select name="" id="children">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
<select name="" id="child_going_school">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
So if the person selects 5 children, the school going children should not be greater than 5.

You can try the following code
jQuery( document ).ready(function($){
$('#child_going_school').change(function() {
var val1 = parseInt($('#children').val());
var val2 = parseInt($(this).val());
console.log(val1)
console.log(val2)
if(val1 != ''){
if(val2 > val1){
$(this).val(val1);
}
}
});
});
In this if the second dropdown value is greater than first then set its value as first dropdown value. I hope this helps you

First get value of first drop down and then compare and disable as below.
$(document).on('change', '#children', function(){
var fval = $(this).val();
$("#child_going_school option").each(function() {
var $thisOption = $(this);
if( $thisOption.val() > parseInt(fval)) {
$thisOption.attr("disabled", "disabled");
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="children">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
<select name="" id="child_going_school">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>

You can use filter() to get the option with higher values like:
$("#children").change(function() {
var val = +$(this).val();
$("#child_going_school option").removeAttr('disabled').filter(function(){
return +this.value > val;
}).attr('disabled','disabled')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="children">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
<select name="" id="child_going_school">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
Another option is using hide and show instead of disabling the options.
$("#children").change(function() {
var val = +$(this).val();
$("#child_going_school option").show().filter(function() {
return +this.value > val;
}).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="children">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
<select name="" id="child_going_school">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>

You can iterate through child_going_school options, trigger the change event once loaded and check with the value of children select:
$('#children').on('change', function() {
var value= this.value;
$('#child_going_school option').each(function(_, el) {
$(el).prop('disabled', parseInt(value) < parseInt(el.value));
});
});
$('#children').trigger('change');
$('#children').on('change', function() {
var value = this.value;
$('#child_going_school option').each(function() {
$(this).prop('disabled', parseInt(value) < parseInt(this.value));
});
});
$('#children').trigger('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="children">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
<select name="" id="child_going_school">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>

<script>
$(document).ready(function(){
$('#children').change(function(event){
$('#child_going_school').children().each(function(_, el) {
$(el).prop('disabled', Number($(el).val()) > event.target.value);
});
});
});
</script>

Updating Total cost with Multiple drop down lists

I would like to make the total update depending on the amount of tickets that have been selected
I cant get the price to update with the different selections.For example, if someone were to choose "2" seats and then "3" seats on the other types of tickets i would like the price to all update
var seat_prices = new Array();
seat_prices["None"] = 0;
seat_prices["seats-STA"] = 19.80;
seat_prices["seats-STP"] = 17.50;
seat_prices["seats-STC"] = 15.30;
seat_prices["seats-FCA"] = 30.00;
seat_prices["seats-FCP"] = 27.00;
seat_prices["seats-FCC"] = 24.00;
//Calculation
function calculateTotal(value, seat_prices) {
return value * seat_prices;
}
function getSeatPrice() {
var seatPrice = 0;
var form = document.forms["seatform"];
var seatSTA = form.elements["seats-STA"];
var seatSTP = form.elements["seats-STP"];
var seatSTC = form.elements["seats-STC"];
var seatFCA = form.elements["seats-FCA"];
var seatFCP = form.elements["seats-FCP"];
var seatFCC = form.elements["seats-FCC"];
seatPrice = seat_prices[seatSTA.value, seatSTP.value, seatSTC.value, seatFCA.value, seatFCP.value, seatFCC.value];
return seatPrice;
}
function getTotal() {
var total = seatSTA + seatSTP + seatSTC + seatFCA + seatFCP + seatFCC;
document.getElementById('total').innerHTML = "Total Price for Tickets $" + total;
}
<div class="Standard">
<label for="Standard Adult"><b>Standard Adult</b></label>
<select type="select" name="seats[STA]" id='seats-STA' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="Standard Concession"><b>Standard Concession</b></label>
<select type="select" name="seats[STP]" id='seats-STP' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="Standard Child"><b>Standard Child</b></label>
<select type="select" name="seats[STC]" id='seats-STC' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<!-- First Class Section -->
<div class="FirstClass">
<label for="First Class Adult"><b>First Class Adult</b></label>
<select type="select" name="seats[FCA]" id='seats-FCA' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="First Class Concession"><b>First Class Concession</b></label>
<select type="select" name="seats[FCP]" id='seats-FCP' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="First Class Child"><b>First Class Child</b></label>
<select type="select" name="seats[FCC]" id='seats-FCC' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<!-- Customer Details -->
<div class="CustomerDetails">
<label for="Name"><b>Name</b></label>
<input type="text" name="cust[name]" id='cust-name' required>
<label for="Email"><b>Email</b></label>
<input type="email" name="cust[email]" id='cust-email' required>
<label for="Mobile"><b>Mobile</b></label>
<input type="tel" name="cust[mobile]" id='cust-mobile' required>
<label for="Credit Card"><b>Credit Card</b></label>
<input type="text" name="cust[card]" id='cust-card' required>
<label for="Expiry"><b>Expiry</b></label>
<input type="month" name="cust[expiry]" id='cust-expiry' required>
</div>
<hr>
<label><b>Total Amount</b></label>
<input name="total" id="total" type="text" readonly>
<br><br>
<button type="submit" class="bookbtn" name="order" id='bookbtn' onclick="calculateTotal()">Book Now!</button>
</div>

Something like this?
Note I wrapped the divs in a div id="container" - you even had a trailing </div> so I assume you already had one. Change the id below to whatever you have or add id="container" to yours
PS: It is not a great idea to not allow the user to reset the seats, so I would personally remove the disabled from the first option
// we are better off with an object
var seat_prices = {
"STA": 19.80,
"STP": 17.50,
"STC": 15.30,
"FCA": 30.00,
"FCP": 27.00,
"FCC": 24.00
};
window.addEventListener("load", function() { // when page has loaded
document.getElementById("container").addEventListener("change", function(e) {
// the above listener catches ALL changes in the div
var tgt = e.target; // whatever was changed
if (tgt.tagName === "SELECT") {
var total = 0;
Object.keys(seat_prices).forEach(function(key) { // get the keys from the object
var val = document.getElementById("seats-" + key).value;
total += val === "ticketNumber" ? 0 : val * seat_prices[key]; // get the amount
})
document.getElementById("total").value = total.toFixed(2); // show it with two decimals
}
})
})
<div id="container">
<div class="Standard">
<label for="Standard Adult"><b>Standard Adult</b></label>
<select type="select" name="seats[STA]" id='seats-STA' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="Standard Concession"><b>Standard Concession</b></label>
<select type="select" name="seats[STP]" id='seats-STP' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="Standard Child"><b>Standard Child</b></label>
<select type="select" name="seats[STC]" id='seats-STC' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<!-- First Class Section -->
<div class="FirstClass">
<label for="First Class Adult"><b>First Class Adult</b></label>
<select type="select" name="seats[FCA]" id='seats-FCA' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="First Class Concession"><b>First Class Concession</b></label>
<select type="select" name="seats[FCP]" id='seats-FCP' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="First Class Child"><b>First Class Child</b></label>
<select type="select" name="seats[FCC]" id='seats-FCC' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<!-- Customer Details -->
<div class="CustomerDetails">
<label for="Name"><b>Name</b></label>
<input type="text" name="cust[name]" id='cust-name' required>
<label for="Email"><b>Email</b></label>
<input type="email" name="cust[email]" id='cust-email' required>
<label for="Mobile"><b>Mobile</b></label>
<input type="tel" name="cust[mobile]" id='cust-mobile' required>
<label for="Credit Card"><b>Credit Card</b></label>
<input type="text" name="cust[card]" id='cust-card' required>
<label for="Expiry"><b>Expiry</b></label>
<input type="month" name="cust[expiry]" id='cust-expiry' required>
</div>
<hr>
<label><b>Total Amount</b></label>
<input name="total" id="total" type="text" readonly>
<br><br>
<button type="submit" class="bookbtn" name="order" id='bookbtn' onclick="calculateTotal()">Book Now!</button>
</div>

Change HTML Select Tag when clicked from many identical elements

I'm trying to add some functiolality with jQuery to an HTML page but I'm having some troubles with accessing the DOM.
By now,I'm accessing to the DOM elements by 'id' that's because I think is the easiest way to do it but it has a problem. For a unique elemet it's ok but what if I have 2 or more equal elements? Id's supposed to be unique so I need a way diferent to do it.
I have some code which partially does what I need, but as I mentioned before, it only works with "one element", I need to do the same but with 2 or more "equal elements". So let me show you my code so far.
<div style="background-color: indigo;">Input
<select class="" name="" id="ana_dig">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig" style="display:none;">
<option value="" selected disabled>Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input" style="display:none;" id="ana">
<option value="" selected disabled>Choose</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
$(function() {
$('#ana_dig').change(function() {
$('.input').hide();
$('#' + $(this).val()).show();
});
});
As you can see, I have a 'div' which has 3 'select' and depending on what option is selected in the first 'select' it shows you the second or de third 'select'. Pretty easy but if copy and paste de 'div' the second 'div' does not work as the first. What sould I do if I want to 2, 3 or more 'div' work like the first one? Any suggestions?

Use classes instead.
NOTICE CHANGES NO MORE IDS, CLASS ADDED TO INPUTS YOU CAN HAVE MULTIPLE CLASSES SEPERATED BY SPACE
<div style="background-color: indigo;">Input
<select class="someclass" name="">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input dig" style="display:none;">
<option value="" selected disabled>Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input ana" style="display:none;">
<option value="" selected disabled>Choose</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
And then do this instead: SEE THE CHANGE HERE ALSO
$(function() {
$('.someclass').change(function() {
$('.input').hide();
$('.' + $(this).val()).show(); // dot is looking for class # is looking for id
});
});

I've used data attributes as an additional selector.
First we find the parent element enclosing our group of select elements. We then use jQuery toggle() function to hide and show. We can then hide and show using the data attributes.
NOTE the id's are unique in the duplicated div which is fine. The jQuery below has no dependence on IDs
$("[data-input=type]").on("change", function(){
//Find the parent that encloses our selects
var $parent = $(this).closest(".inputGroup");
var selValue = $(this).val();
//Show and hide using toggle()
//$($parent).find("[data-input=ana]").toggle(selValue === "ana");
//$($parent).find("[data-input=dig]").toggle(selValue === "dig");
//Don't hide the "type" element - hide the other selects
$($parent).find("[data-input]").not(this).hide();
//Show the one with the matching data attribute
$($parent).find("[data-input= " + selValue + "]").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="background-color: indigo;" class="inputGroup">Input
<select class="" name="" id="ana_dig" data-input="type">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig" style="display:none;" data-input="dig">
<option value="" selected disabled>Choose Digital</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input" style="display:none;" id="ana" data-input="ana">
<option value="" selected disabled>Choose Analog</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
<div style="background-color: blue;" class="inputGroup">Input
<select class="" name="" id="ana_dig2" data-input="type">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig2" style="display:none;" data-input="dig">
<option value="" selected disabled>Choose Digital</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input" style="display:none;" id="ana2" data-input="ana">
<option value="" selected disabled>Choose Analog</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
With just a little bit of effort we can extend this into dynamically added content. We just need to add one more containing element around the form.
//Event handler is now attatched to [data-input=type] inside
//formGroup, including any that are dynamically added
$("#formGroup").on("change", "[data-input=type]", function() {
//Find the parent that encloses our selects
var $parent = $(this).closest(".inputGroup");
var selValue = $(this).val();
//Show and hide using toggle()
//$($parent).find("[data-input=ana]").toggle(selValue === "ana");
//$($parent).find("[data-input=dig]").toggle(selValue === "dig");
//Don't hide the "type" element - hide the other selects
$($parent).find("[data-input]").not(this).hide();
//Show the one with the matching data attribute
$($parent).find("[data-input= " + selValue + "]").show();
});
//Code to add new row
$("#addRow").on("click", function(){
//Clone first row
var rowClone = $(".inputGroup").eq(0).clone(true);
var rowCount = $(".inputGroup").length;
//Change the ids of the nested select elements
rowClone.find("select").each(function(){
$(this).attr("id", $(this).attr("id") + rowCount);
});
//Append the row
$("#formGroup").append(rowClone);
});
.inputGroup:nth-child(even) {
background-color:#CCC;
}
.inputGroup {
padding:5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="formGroup">
<div class="inputGroup">Input
<select class="" name="" id="ana_dig" data-input="type">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig" style="display:none;" data-input="dig">
<option value="" selected disabled>Choose Digital</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input" style="display:none;" id="ana" data-input="ana">
<option value="" selected disabled>Choose Analog</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
<div class="inputGroup">Input
<select class="" name="" id="ana_dig2" data-input="type">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig2" style="display:none;" data-input="dig">
<option value="" selected disabled>Choose Digital</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input" style="display:none;" id="ana2" data-input="ana">
<option value="" selected disabled>Choose Analog</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
</div>
<input type="button" value="Add Another Row" id="addRow"/>

Ok, this hides both the digital, and analog submenus, until it is selected by the first selection:
<script>
$(document).ready(function(){
$("select").hide();
$("#ana_dig").show();
$("#ana_dig").click(function(){
var x="#" + $(this).val();
$("select").hide();
$("#ana_dig").show();
$(x).show();
});
});
</script>
the op said if they wanted to add more in the first pull down selection, you would just add your additional option element with the value equal to the id to show. I added a reset function so when the first selection is changed, it resets... expanding it only is in the html code too.... I like to use ID for forms, and classes just for styling, and tag names for styling on page events

How do you add/remove people dynamically from a list in html?

This question has been asked on this forum multiple times. Yet every time I've applied the code and edited the fields to accommodate my code it doesn't seem to work. Essentially I'm trying to develop a list from a form, so once the fields are filled out and you click the add button. The info provided would populate in an ordered list below the form. Here is the following html and javascript code I've got so far. When I click the add button the information that was typed gets showed in the url bar after the original domain name, but it never makes a list.
var list = document.getElementById('list');
function add(){
var name = document.getElementById('name').value;
var people = document.getElementById('people').value;
var phone = document.getElementById('phone').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(name + people + phone));
list.appendChild(entry);
return false;
}
<html>
<head>
<meta charset="UTF-8">
<title>Whiskey on Water</title>
<h1>Whiskey on Water: Waiting List</h1>
</head>
<body>
<form id="lineInfo" onsubmit="return add()">
<fieldset>
<legend>Customer Information</legend>
<label for="name">Name*</label>
<input name="name" id="name" type="text" />
<label for="people">How many people?</label>
<input name="people" id="people" type="number" list="people1" />
<datalist id="people1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</datalist>
<label for="phone">Phone Number*</label>
<input name="phone" id="phone" type="tel"/>
<script src="wow.js"></script>
<button onclick='add ()' type="submit"> Add to List </button>
</fieldset>
</form>
<ol id="list"></ol>
</body>
</html>

Well, your code works when run as a SO Snippet (see below), so we will need more info about the problem you're having before we can answer your question.
That said, I did notice that your new list item was adding twice, and this is because you are running the add() function twice: Once for the onclick handler on the button press, and once as the action of the form upon submit. So, we need to remove one of those... I bet that you'll end up wanting to keep the form, but my working code below removes the form (keeping the onclick on the button) because I bet that your problem is that, although your code works, you are refreshing your page with the form, clearing out the options that have been added to your list. If this sounds right to you then look into passing/fetching the new list items via GET params.
var list = document.getElementById('list');
function add(){
var name = document.getElementById('name').value;
var people = document.getElementById('people').value;
var phone = document.getElementById('phone').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(name + people + phone));
list.appendChild(entry);
return false;
}
<html>
<head>
<meta charset="UTF-8">
<title>Whiskey on Water</title>
<h1>Whiskey on Water: Waiting List</h1>
</head>
<body>
<fieldset>
<legend>Customer Information</legend>
<label for="name">Name*</label>
<input name="name" id="name" type="text" />
<label for="people">How many people?</label>
<input name="people" id="people" type="number" list="people1" />
<datalist id="people1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</datalist>
<label for="phone">Phone Number*</label>
<input name="phone" id="phone" type="tel"/>
<script src="wow.js"></script>
<button onclick='add ()' type="submit"> Add to List </button>
</fieldset>
<ol id="list"></ol>
</body>
</html>

This may help assuming each field has an id:
document.querySelector('#yourButton').addEventListener('click', function(e){
/* Stop the form from submiting if useful */
e.preventDefault();
/* get the values of fields one at a time */
var field1 = document.querySelector('#input1').value;
var field2 = document.querySelector('#input2').value;
...
/** prepare new node and insert */
var newNode = '<ul>'+'<li>'+field1+'</li>'+'<li>'+field2+'</li>'+'</ul>';
document.querySelector('body').appendChild(newNode);
});

Categories

Resources