Seeking assistance to enhance the form I designed, despite my limited knowledge in JavaScript programming.
The objective is to develop a hotel search engine with the ability to specify the total number of rooms. Based on the selected number of rooms, additional hidden form fields will be displayed, providing further selection options.
To gain a clearer understanding of my concept, I have attached a screenshot.
https://i.sstatic.net/ZTGk7.jpg
I have utilized the following JavaScript code to display hidden fields corresponding to the chosen number of rooms, which is repeated 5 times (maximum room count).
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";
}
Similarly, I have employed JavaScript code to facilitate room selection options, with repetition based on the room count. For example: 1 room -> code entered once; 2 rooms -> code entered twice; and so forth.
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";
}
// ... Repeated similar logic for child selection based on room count
}
$(function(){
$(':submit').click(function(){
$('select').each(function(){
if ( $(this).val() == '' )
{
$(this).remove(); // or
$(this).attr('disabled','disabled');
}
});
});
});
Furthermore, I have repeated the same HTML structure for the hidden fields display.
<div class="container_hidden">
// ... HTML code for room and child selections repeated for each room count
</div>
While this approach is functional, it appears cumbersome. Hence, I am inquiring if there is an alternate method to streamline the code.