Radio Buttons and Calculations

Student101 · October 31st, 2005, 04:06 PM

I've got some code that I need assistance with, I need to have radio buttons that affect the way my calculations go. All of the basics are there, but when I try to calculate all of it I get nothing but the wrong answer. I hope someone can help.

    <br><center><select name=origCity>
    <option value=0>Bellingham
    <option value=60>Everett
    <option value=90>Seattle
    <option value=120>Tacoma
    <option value=150>Olympia
    </select><b>Originating City</b>
<br>
    <br><center><select name=destCity>
    <option value=0>Bellingham
    <option value=60>Everett
    <option value=90>Seattle
    <option value=120>Tacoma
    <option value=150>Olympia
    </select><b>Destination</b>
<br>

<br><input type=button value="Calculate Fare"
    onClick='

    var origCity = document.trainForm.origCity.value;
    var destCity= document.trainForm.destCity.value;
    if (origCity == destCity)
    {
        alert ("Please choose new Destination or Origin");
        return;
    }

    var distance;
    var fare;
        distance = (destCity - origCity);
    if (distance < 0)
        distance = (distance *(-1));

    fare = ((distance)*(.4));

    if ((Trip = "Round Trip"))
        fare = (fare*2);

    if (discount = "No discount")
        fare = fare;
    else if (discount = "Student")
        fare = (fare - (fare * .1));
    else if (discount = "Senior")
        fare = (fare - (fare * .05));

    document.trainForm.fare.value = fare
'>
<br><br>

    <input type="radio" name="trip" checked>One Way <br>
    <input type="radio" name="trip" >Round Trip<br>
<br><br><br>
    <input type="radio" name="discount" checked>No discount<br>
    <input type="radio" name="discount">Student<br>
    <input type="radio" name="discount">Senior<br>

<input type=text name="fare" size="5">Dollars

middledd · November 9th, 2005, 06:54 PM

try putting your onClick function into a separate function. Then set onClick='thatFunction()'

PeterPeiGuo · April 23rd, 2009, 12:49 AM

Quote:

Originally Posted by middledd

try putting your onClick function into a separate function. Then set onClick='thatFunction()'

True, what he did is not the best pratice, and yours is, but that's not the reason why his code didn't work.

PeterPeiGuo · April 23rd, 2009, 12:51 AM

Several issues:
1) To test equality, you use ==, not =.
2) You need to give options values.
3) To get the value, you need to loop.

Check out this fixed version, and you will understand the above points.

Code:

 
<html>
<body>
<form name="trainForm">
<br><center><select name=origCity>
<option value=0>Bellingham
<option value=60>Everett
<option value=90>Seattle
<option value=120>Tacoma
<option value=150>Olympia
</select><b>Originating City</b>
<br>
<br><center><select name=destCity>
<option value=0>Bellingham
<option value=60>Everett
<option value=90>Seattle
<option value=120>Tacoma
<option value=150>Olympia
</select><b>Destination</b>
<br>
<br><input type=button value="Calculate Fare"
onClick='
var origCity = document.trainForm.origCity.value;
var destCity= document.trainForm.destCity.value;
if (origCity == destCity)
{ 
alert ("Please choose new Destination or Origin");
return;
}
 
var distance;
var fare;
distance = (destCity - origCity);
if (distance < 0)
distance = (distance *(-1));
fare = ((distance)*(.4));

for (var i=0; i < document.trainForm.trip.length; i++) {
   if (document.trainForm.trip[i].checked) {
      var trip = document.trainForm.trip[i].value;
   }
}
if (trip == "Round Trip")
fare = (fare*2);

for (var i=0; i < document.trainForm.discount.length; i++) {
   if (document.trainForm.discount[i].checked) {
      var discount = document.trainForm.discount[i].value;
   }
}
if (discount == "No discount")
fare = fare;
else if (discount == "Student")
fare = (fare - (fare * .1));
else if (discount == "Senior")
fare = (fare - (fare * .05));
document.trainForm.fare.value = fare
'>
<br><br>
<input type="radio" name="trip" value="One Way" checked>One Way <br>
<input type="radio" name="trip" value="Round Trip">Round Trip<br>
<br><br><br>
<input type="radio" name="discount" value="No discount" checked>No discount<br>
<input type="radio" name="discount" value="Student">Student<br>
<input type="radio" name="discount" value="Senior">Senior<br>

<input type=text name="fare" size="5">Dollars
</form>
</body>
</html>

micsolaris · June 21st, 2009, 11:02 AM

Code:

<html>
    <head>
        <title>Example1</title>
    </head>
    <body>
        <script type="text/javascript">
            function onClickF(){
                var trainForm = document.getElementById("trainForm");
                
                var origCity = trainForm.origCity.value;
                var destCity = trainForm.destCity.value;
                if (origCity == destCity) {
                    alert("Please choose new Destination or Origin");
                    return;
                }
                var distance;
                var fare;
                distance = (destCity - origCity);
                if (distance < 0) 
                    distance = (distance * (-1));
                fare = ((distance) * (.4));
                if ((Trip = "Round Trip")) 
                    fare = (fare * 2);
                if (discount = "No discount") 
                    fare = fare;
                else 
                    if (discount = "Student") 
                        fare = (fare - (fare * .1));
                    else 
                        if (discount = "Senior") 
                            fare = (fare - (fare * .05));
                trainForm.fare.value = fare
            }
        </script>
        <br>
        <center>
            <form id="trainForm">
                <select name=origCity>
                    <option value=0>Bellingham<option value=60>Everett<option value=90>Seattle<option value=120>Tacoma<option value=150>Olympia
                                    </select>
                                    <b>Originating City</b>
                                    <br>
                                    <br>
                                    <center>
                                        <select name=destCity>
                                            <option value=0>Bellingham<option value=60>Everett<option value=90>Seattle<option value=120>Tacoma<option value=150>Olympia
                                                            </select>
                                                            <b>Destination</b>
                                                            <br>
                                                            <br>
                                                            <input type=button value="Calculate Fare" onClick='onClickF();'>
                                                            <br>
                                                            <br>
                                                            <input type="radio" name="trip" checked>One Way
                                                            <br>
                                                            <input type="radio" name="trip">Round Trip
                                                            <br>
                                                            <br>
                                                            <br>
                                                            <br>
                                                            <input type="radio" name="discount" checked>No discount
                                                            <br>
                                                            <input type="radio" name="discount">Student
                                                            <br>
                                                            <input type="radio" name="discount">Senior
                                                            <br>
                                                            <input type=text name="fare" size="5">Dollars
                                                        </form>
                                                        </body>
                                                    </html>

I think this is what you want!