We Keep Coding

Javascript: alternative or less complex code to create hidden input forms

I ask for your help to improve the form I created, keeping in mind that I am not a great expert in javascript programming.
I need to create a hotel search engine, with the possibility to choose the total number of rooms. Depending on the number of rooms selected, as many hidden form fields will be displayed, containing additional selection fields.
To make the idea of ​​what I have created better, I attach a screen.
To view the hidden fields in relation to the number of rooms chosen, I used this javascript code, repeated 5 times (maximum number of rooms).
function admSelectCheck(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
admOptionValue = document.getElementById("room1").value;
if(admOptionValue == nameSelect.value){
document.getElementById("pax_room_1").style.display = "block";
}
else{
document.getElementById("pax_room_1").style.display = "none";
}
}
else{
document.getElementById("pax_room_1").style.display = "none";
}
To realize the options for choosing each room, I used this javascript code repetition in proportion to the room number. That is: 1 room -> entered code 1 once; 2 rooms -> entered the code 2 times; etc.
function childSelect(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
admOptionValue = document.getElementById("child1").value;
if(admOptionValue == nameSelect.value){
document.getElementById("agechild1").style.display = "block";
}
else{
document.getElementById("agechild1").style.display = "none";
}
}
else{
document.getElementById("agechild1").style.display = "none";
}
if(nameSelect){
admOptionValue = document.getElementById("child2").value;
if(admOptionValue == nameSelect.value){
document.getElementById("agechild2").style.display = "block";
}
else{
document.getElementById("agechild2").style.display = "none";
}
}
else{
document.getElementById("agechild2").style.display = "none";
}
if(nameSelect){
admOptionValue = document.getElementById("child3").value;
if(admOptionValue == nameSelect.value){
document.getElementById("agechild3").style.display = "block";
}
else{
document.getElementById("agechild3").style.display = "none";
}
}
else{
document.getElementById("agechild3").style.display = "none";
}
}
$(function(){
$(':submit').click(function(){
$('select').each(function(){
if ( $(this).val() == '' )
{
$(this).remove(); // or
$(this).attr('disabled','disabled');
}
});
});
});
While, I used this html code repeated the same way.
<div class="container_hidden">
<div id="pax_room_1" style="display:none;" class="row_hidden">
<div class="nrRoom" style="width: 100px;background: #f5a445;font-size: 15px;text-align: center;height: 30px; padding-top: 5px; border-radius: 10px 10px 0px 0px;"><font color="#000"><img src="images/family-room.png" alt="Icon Family Room" style="width: 19px;" /> Room 1</font></div>
<div class="column"><font color="#000">Adult (18+)</font>
<select id="adulti" name="nrAdult">
<option value="">-</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>
</select>
</div>
<div class="column"><font color="#000">Children (0-17)</font>
<select id="nrchild" name="nrChild" onchange="childSelect(this);">
<option value="">-</option>
<option id="child1" value="1">1</option>
<option id="child2" value="2">2</option>
<option id="child3" value="3">3</option>
</select>
</div>
<!-- Select Bambino 1 -->
<div id="agechild1" style="display:none;" class="row_hidden">
<div class="column"><font color="#000"> Child Age 1 </font>
<select id="child1" name="ageChild1">
<option value="">-</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>
<!-- Select Bambino 1-2 -->
<div id="agechild2" style="display:none;" class="row_hidden">
<div class="column"><font color="#000"> Child Age 1 </font>
<select id="child1" name="ageChild1">
<option value="">-</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="column"><font color="#000"> Child Age 2 </font>
<select id="child2" name="ageChild2">
<option value="">-</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>
<!-- Select Bambino 1-2-3 -->
<div id="agechild3" style="display:none;" class="row_hidden">
<div class="column"><font color="#000"> Child Age 1 </font>
<select id="child1" name="ageChild1">
<option value="">-</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="column"><font color="#000"> Child Age 2 </font>
<select id="child2" name="ageChild2">
<option value="">-</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="column"><font color="#000"> Child Age 3 </font>
<select id="child3" name="ageChild3">
<option value="">-</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>
</div>
I realize that it is too laborious, even if it works. This is why I ask you if there is a way to lighten the code.

You can use the data-* attribute to dynamically choose the relations in the html.
e.g.
(function() {
const hiders = document.getElementsByClassName('hider');
// const is ES6 syntax, you can use var, although you might want to read up on that
for (let i = 0; i < hiders.length; ++i) {
const hider = hiders[i];
hider.onchange = function() {
const hideTarget = hider.dataset.hideTarget; // this reads the value of data-hide-target
if (hideTarget == null)
return; // no target set (else we would potentially get an TypeError, when data-hide-target wasn't set. Still happens with an invalid value though, but there you want an error
if (hider.value !== '')
document.getElementById(hideTarget).style.display = "block";
else
document.getElementById(hideTarget).style.display = "none";
// you might also want to take a look at .setAttribute("aria-hidden", "true") and .style.visibility = "hidden"
};
}
})()
<select id="adulti" name="nrAdult" class="hider" data-hide-target="hideme1">
<option value="">-</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>
</select>
<div id="hideme1" style="display: none;">
Hide me 1
</div>
<select id="adulti2" name="nrAdult" class="hider" data-hide-target="hideme2">
<option value="">-</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>
</select>
<div id="hideme2" style="display: none;">
Hide me 2
</div>
I think this snippet is rather easy to understand, but if you want me to elaborate a bit further, feel free to ask.
FYI, this can also be used for convenience in this example:
(function(){
function makeOption(val) {
const option = document.createElement('option');
option.value = val;
option.innerText = val;
return option;
}
const simpleSelects = document.getElementsByClassName('simpleSelect');
for(let i = 0; i < simpleSelects.length; ++i){
const simpleSelect = simpleSelects[i];
const min = simpleSelect.dataset.from;
const max = simpleSelect.dataset.to;
if(min == null || max == null)
return;
simpleSelect.appendChild(makeOption('-'));
for (let j = min; j <= max; ++j) {
simpleSelect.appendChild(makeOption(j));
}
}
})()
<select name="nrAdult" class="simpleSelect" data-from="0" data-to="5"></select>
<select name="nrChildren" class="simpleSelect" data-from="0" data-to="10"></select>
And I also just realised that you were using the same id multiple times, which is not only not allowed, but also doesn't work.
(And yes I am aware that what this does is quite different from what you want, but it is the same principle and I didn't want to give you an out-of-the-box solution.)

Share a common value among dropdown item and adjust the value on selection

I have a situation where I have been stuck. Actually i have to share the room avalability among condition shown in dropdownlist and after selection in any of dropdownlist the actual room avalability should be maintained.
consider the following scenario in javascript
suppose i have 10 rooms available and there are 3 conditions so we have 3 drop-down for each condition and each drop-down have value from 1-10 initially.
User can select value from any of condition so if user selected 5 from one drop-down then other drop-down should have value 1-5 only. if user select value 2 from second condition then final drop-down should have max selectable value 3. User can play in 10 availability of room but any time max value slected from all condition should not go away than 10.
Can any one give me hint how to do this?

When you select an option from one of the drop-downs, subtract the value from the available total and disable those options from the remaining drop-downs.
$("select").change(function() {
$("option").prop('disabled', false);
var select1 = parseInt($("#select1").val(), 10);
var select2 = parseInt($("#select2").val(), 10);
if (!isNaN(select1)) {
var select2_max = 10 - select1;
$("#select2 option").slice(select2_max + 1).prop('disabled', true);
$("#select3 option").slice(select2_max + 1).prop('disabled', true);
if (!isNaN(select2)) {
var select3_max = select2_max - select2;
$("#select3 option").slice(select3_max + 1).prop('disabled', true);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="4">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>
<select id="select2">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="4">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>
<select id="select3">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="4">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>

How to combine values from three different fields and set it to the hidden field only when all the three fields are filled with values?

I've six fields on a form for showing the start time and end time in Hour: Minutes AM/PM format as follows :
<div class="block-time-term" style="padding-bottom:10px;">
<label>Starts at :</label>
<select name="hours_start" id="hours_start">
<option value="">hh</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>
</select>
<select name="minutes_start" id="minutes_start">
<option value="">mm</option>
<option value="0">00</option>
<option value="5">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am_pm_start" id="am_pm_start">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
<br><br>
<label>Ends at :</label>
<select name="hours_end" id="hours_end">
<option value="">hh</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>
</select>
<select name="minutes_end" id="minutes_end">
<option value="">mm</option>
<option value="0">00</option>
<option value="5">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am_pm_end" id="am_pm_end">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
</div>
Now there are two hidden fields present on the form as follows :
<input type="hidden" name="val[start_time]" id="start_time" value=""/>
<input type="hidden" name="val[end_time]" id="end_time" value=""/>
Now what I want to do is when user selects all the values from the respective drop downs only then the selected values should get combined and should be stored in respecive hidden fields.
For example if user selects Start Time as follows 2 from Hour, 30 from Minutes and PM then the string to be formed and to be stored should be 02:35 PM. Same should be applicable to end date.
If anything is missing proper alert message should appear. How should I achieve this using jQuery/Javascript?
Thanks.

I have created a JSFiddle for you. I made the hidden text boxes visible for you to check the output. It's better to replace the alert messages with a DIV in production. Hope this helps.
http://jsfiddle.net/su8898/m5r140cy/4/

Mathematical Operation with addition and multiplication

I have been trying to do this operation where quantity or Subtotal=value1+(value2*value3) but I can't figure out how to do the addition and multiplication in that order. I was trying it out on JS Bin and for some reason when I put 1 slab and BD variables it is 175 which is even below the value1 values. I would appreciate the help since I just started coding and with a bit of direct hints and help I will get better. Thank you.
I apologize for the confusing question. What I want is to create a form that will allow someone to know the price of a painted slab with a certain material. I found out I can do 2 slabs per hour, this is why value1 for numbers 1 and 2 = 300 an so on. Slab BD equals $75, slab BG equals $120. What I want is to calculate the price depending on number of slabs times the type of the slab. For example: If I want 1 slab of BD the math would be 300+(75*1) which is 300 for the hour of painting, 75 for the type and since I only use 1 of those types the multiplication at the end is 1. If I use 2 the math would be 300+(75*2), if I use three the math would be 600+(75*3). Feel free to ask if this is confusing. I appreciate any help.
Slabs
<select input id="numberofslabs"><br>
<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>
</select><br>
Materials
<select input id="materials"><br>
<option value="75">BD</option>
<option value="120">BG</option>
<option value="50">CC</option>
<option value="200">MDF</option>
<option value="800">A2</option>
<option value="900">A3</option>
<option value="1200">A4</option>
<option value="1400">A5</option>
<option value="1750">A6</option>
</select>
<script type="text/javascript">
var selectElement = document.getElementById("numberofslabs");
selectElement.addEventListener('change',myFunction);
function myFunction() {
var value1 = document.getElementById("numberofslabs").value;
if(value1=="1")
value=300;
if(value1=="2")
value=300
if(value1=="3")
value=600
if(value1=="4")
value=600
if(value1=="5")
value=900
if(value1=="6")
value=900
if(value1=="7")
value=1200
if(value1=="8")
value=1200
if(value1=="9")
value=1500
if(value1=="10")
value=1500
if(value1=="11")
value=1800
if(value1=="12")
value=1800
if(value1=="13")
value=2100
if(value1=="14")
value=2100
if(value1=="15")
value=2400
if(value1=="16")
value=2400
if(value1=="17")
value=2700
if(value1=="18")
value=2700
if(value1=="19")
value=3000
if(value1=="20")
value=3000
var value2 =
document.getElementById("numberofslabs").value;
var value3 =
document.getElementById("materials").value;
document.getElementById("quantity").value
='$'+value1 + +value2*value3;
}
</script>
<br>
Subtotal:<td><input id="quantity" name="quantity" type="value" value="$0.00" size="5" readonly/></td>

You mixed up 'value' and 'value1' in your code, which is the main bug, and becomes more apparent once you use a mathematical formula instead of a long if statement.
Then as other improvements, separating the concatenation + (from '$'+ ...) and the mathematical + with parentheses makes for less confusion.
Finally, you weren't listening for changes on the materials.
document.getElementById("numberofslabs").addEventListener('change',myFunction);
document.getElementById("materials").addEventListener('change',myFunction);
function myFunction() {
var value1 = document.getElementById("numberofslabs").value;
value1 = (+value1 + value1 % 2) * 150;
var value2 = document.getElementById("numberofslabs").value;
var value3 = document.getElementById("materials").value;
document.getElementById("quantity").value ='$'+(+value1 + value2 * value3);
}
Slabs
<select input id="numberofslabs"><br>
<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>
</select><br>
Materials
<select input id="materials"><br>
<option value="75">BD</option>
<option value="120">BG</option>
<option value="50">CC</option>
<option value="200">MDF</option>
<option value="800">A2</option>
<option value="900">A3</option>
<option value="1200">A4</option>
<option value="1400">A5</option>
<option value="1750">A6</option>
</select>
<br>
Subtotal:<input id="quantity" name="quantity" type="value" value="$0.00" size="5" readonly/>

Want display and hide drop down using javascript

I have a drop down for Number of guests and then need to show another drop down which will have age for each guest. Lets say if some one select 2 from number of guests then 2 other drop down will show to select their age from. This far I have done using following code but the problem is if some body first selects 2 by mistake and goes back to one, the displayed drop down remains there, instead one drop down should hide. Please refer to the code below:
CSS:
#kidsage40, #kidsage41, #kidsage42
{
display:none;
}
HTML:
<select name="kids4" onChange="showroom4kidsage(this.value);">
<option value="0">Kids</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="kidsage40" id="kidsage40">
<option value="0">Kids Age</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>
<select name="kidsage41" id="kidsage41">
<option value="0">Kids Age</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>
<select name="kidsage42" id="kidsage42">
<option value="0">Kids Age</option>
<option value="1">1</option>
<option value="3">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>
JAVASCRIPT:
function showroom4kidsage(value)
{
for(i=0;i<value;i++)
{
kidsage = 'kidsage1'+i;
document.getElementById(kidsage).style.display = "block";
}
}

The easiest way is to just hide them all first, then your loop will show the correct number of drowns after.
function showroom4kidsage(value){
for(i=0;i<3;i++){
document.getElementById('kidsage4' + i).style.display = "none";
}
for(i=0;i<value;i++){
kidsage = 'kidsage4'+i;
document.getElementById(kidsage).style.display = "block";
}
}
Or adding a classname to make accessing these inputs easier:
<select class="foo" id="kidsage41>...</select>
<select class="foo" id="kidsage42>...</select>
and then you can:
function showroom4kidsage(value){
document.getElementByClassName('foo').style.display = "none";
for(i=0;i<value;i++){
kidsage = 'kidsage4'+i;
document.getElementById(kidsage).style.display = "block";
}
}

Simply add a class onto the selectboxes, say "kidsageselect" and then have your javascript do this:
function showroom4kidsage(value) {
var elems = document.getElementsByClassName('kidsageselect');
for (var i = 0; i < elems.length; i++) {
elems[i].style.display = 'none';
}
for(var i = 0; i < value; i++) {
kidsage = 'kidsage4'+i;
document.getElementById(kidsage).style.display = "block";
}
}

you have to set all SELECTS to display:none before
Give all those select ONE class="randomclass" and set all elements in that class display:none
or set em one by one via loop or ony by one to display:none like
document.getElementById('kidsage42').style.display = "none";
that would hide the last select f.E.