Search code examples
javascripthtmljqueryformsradio-button

Other radio buttons not clickable after using Javascript function to select certain Radio based on if statement

I am working on a car service reservation system and there are three different vehicle options. I am trying to code it to where if there are a certain number of passengers listed, the vehicle automatically switches to something that accommodates more people and disables the first vehicle.

I have accomplished this but there are problems. I'm using arrays and functions to define the amount of passengers. I am then using a variable that adds the values these functions spit out to create a total number of passengers. Then I have set up an if statement to say if the value is greater than four, change to this radio input and disable the first one.

The problem occurs when this happens I am no longer able to select the third vehicle option and I don't know why.

I also attempted to set the total passenger value to where if it is less than five, the first vehicle is automatically selected. This did not work either.

Ultimately I would like it to act in such a way that if over 14 passengers are selected, the user receives an error (this is working fine). If less than 5 passengers are selected, the first vehicle is selected. If over 4 passengers are selected, the second vehicle is selected and the third is still an option. If more than 8 passengers are selected, both the first and third vehicle are disabled.

Hopefully my code is not overly ill formatted. I am fairly new to Javascript and have been piecing tutorials together. Here is a jsfiddle of the part of the form that is not working.

Here is the Javascript code:

var adults_teenagers2 = new Array();
adults_teenagers2["1"] = 1;
adults_teenagers2["2"] = 2;
adults_teenagers2["3"] = 3;
adults_teenagers2["4"] = 4;
adults_teenagers2["5"] = 5;
adults_teenagers2["6"] = 6;
adults_teenagers2["7"] = 7;
adults_teenagers2["8"] = 8;
adults_teenagers2["9"] = 9;
adults_teenagers2["10"] = 10;
adults_teenagers2["11"] = 11;
adults_teenagers2["12"] = 12;
adults_teenagers2["13"] = 13;
adults_teenagers2["14"] = 14;

function AmountAdultsTeenagers() {
var AdultsTeenagersNumberAmount = 0;
var theForm = document.forms["resForm"];
var AdultsTeenagersNumber = theForm.elements["adults_teenagers"];
AdultsTeenagersNumberAmount = adults_teenagers2[AdultsTeenagersNumber.value];
return AdultsTeenagersNumberAmount;
}

var children2 = new Array();
children2["0"] = 0;
children2["1"] = 1;
children2["2"] = 2;
children2["3"] = 3;
children2["4"] = 4;
children2["5"] = 5;
children2["6"] = 6;
children2["7"] = 7;
children2["8"] = 8;

function Amountchildren() {
var childrenNumberAmount = 0;
var theForm = document.forms["resForm"];
var childrenNumber = theForm.elements["children"];
childrenNumberAmount = children2[childrenNumber.value];
return childrenNumberAmount;
}

var infants2 = new Array();
infants2["0"] = 0;
infants2["1"] = 1;
infants2["2"] = 2;
infants2["3"] = 3;
infants2["4"] = 4;
infants2["5"] = 5;
infants2["6"] = 6;
infants2["7"] = 7;
infants2["8"] = 8;

function Amountinfants() {
var infantsNumberAmount = 0;
var theForm = document.forms["resForm"];
var infantsNumber = theForm.elements["infants"];
infantsNumberAmount = infants2[infantsNumber.value];
return infantsNumberAmount;
}

function calculateTotal() {
var over = AmountAdultsTeenagers() + Amountchildren() + Amountinfants();
if(over>'14')
{
alert('Sorry, no vehicle can accomodate more than 14 passengers.');
document.getElementById("firstPageSubmit").disabled = true;

}
else {
document.getElementById("firstPageSubmit").disabled = false;
}
if(over<'5') {
document.getElementById("towncar").checked = true;
}
if(over>'4')
{
document.getElementById("towncar").disabled = true;
document.getElementById("stretch_limousine").disabled = false;
document.getElementById("passenger_van").checked = true;
}
else {document.getElementById("towncar").disabled = false;
}
}

and the HTML:

<form method="post" class="res_form" id="resForm" name="res_form" onSubmit="return quoteCheck();">
<ul>
    <li id="steps">Step 1 of 3 - Select Type of Service/Get Quote</li>
    <li class="form_notice"><span>Reservations must be at least 48 hrs prior for towncars and 72 hrs for any other vehicle.</span></li>
    <li><fieldset class="res_form_fs" id="passengers">
    <legend>Passengers:</legend>
<label for="adults_teenagers" class="selectLabel">Adults/Teenagers:
        <select name="adults_teenagers" id="adults_teenagers" onchange="calculateTotal()">
            <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>
        </select></label>
<label for="children" class="selectLabel">Children:
        <select name="children" id="children" onchange="calculateTotal()">
            <option value="0">None</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>
        </select></label>
<label for="infants" class="selectLabel">Infants:
        <select name="infants" id="infants" onchange="calculateTotal()">
            <option value="0">None</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>
        </select></label>
    </fieldset>
    </li>
    <li>
    <fieldset class="res_form_fs">
    <legend>Select Vehicle:</legend>
        <p class="radioT"><input type="radio" value="Towncar" onclick="calculateTotal()" name="vehicle" id="towncar" class="radio" unchecked /></p><p class="nonradioT"><span class="radioOption"><label for="towncar">Towncar</label></span></p><br />
        <p class="radioT"><input type="radio" value="Passenger Van" onclick="calculateTotal()" name="vehicle" id="passenger_van" class="radio" unchecked /></p><p class="nonradioT"><span class="radioOption"><label for="passenger_van">Passenger Van</label></span></p><br />
        <p class="radioT"><input type="radio" value="Stretch Limousine" onclick="calculateTotal()" name="vehicle" id="stretch_limousine" class="radio" unchecked /></p><p class="nonradioT"><span class="radioOption"><label for="stretch_limousine">Stretch Limousine</label></span></p>
    </fieldset>
    </li>
    <li><input name="submit" type="submit" id="firstPageSubmit" class="ressubmitButton" value="Continue to Make Reservation" /></li>
    </ul>
    </form>
Solution

  • Here i change name all select option as same and now it's work. Please see in below JSFiddle:

    <select name="adults_teenagers">

    http://jsfiddle.net/ketan156/cthbg27h/8/

    edit:

    change in if condition: following is new JSFiddle:

    http://jsfiddle.net/ketan156/cthbg27h/10/

    is is ok? as per my understanding you like to get it.

    As You need i edited JSFiddle:

    http://jsfiddle.net/ketan156/cthbg27h/11/