Question

我正在尝试为学校课程创建HTML和Javascript计算表单。我当前的代码允许表单在您单击收音机/复选框时自动计算总费用。问题是我需要以某种方式使它成为，1。我可以得到某种实时检查，如果用户选择了单选按钮/复选框，或2.转换代码，以便它需要提交并重置按钮进行验证并给出最终费用。我现在拥有的是： HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <title>Holiday Calculation Form</title>
    <script src="form.js"></script>

</head>
<body onload='hideTotal()'>
    <div id="wrap">
        <form action="" id="holidayform" onsubmit="return false;">
        <div>
            <div class="headings">
               <fieldset>
                <legend>Island Hopper Cruises Fare Calculator</legend>
                <label >Complete the form below to calculate the cost of your cruise.</label>
                <label class='radiolabel'><br />
                  <br />
<br />
                 <input type="radio"  name="selectedbeach" value="Beach1" onclick="calculateTotal()"/>Main Beach - Azkaban Island ($49)</label><br/>
                <label class='radiolabel'><input type="radio"  name="selectedbeach" value="Beach2" onclick="calculateTotal()" />Main Beach - Amity Island ($79)</label><br/>
                <label class='radiolabel'><input type="radio"  name="selectedbeach" value="Beach3" onclick="calculateTotal()" />Main Beach - Treasure Island ($109)</label><br/>
                <label class='radiolabel'><input type="radio"  name="selectedbeach" value="Beach4" onclick="calculateTotal()" />Main Beach - Gilligan’s Island ($89)</label><br/>
                <label class='radiolabel'><input type="radio"  name="selectedbeach" value="Beach5" onclick="calculateTotal()" />Main Beach - Skull Island ($59)</label><br/>
                <br/>

                <br/>
                <p>
                <label for='twowayfare' class="inlinelabel">Two Way Fare</label>
               <input type="checkbox" id="twowayfare" name='twowayfare' onclick="calculateTotal()" />
               </p>
               <p>
                <input type="radio"  name="selectedseat" value="Flight1" onclick="calculateTotal()" />Economy Seat</label><br/>
                <label class='radiolabel'><input type="radio"  name="selectedseat" value="Flight2" onclick="calculateTotal()" />Business Class Seat</label><br/>
                <label class='radiolabel'><input type="radio"  name="selectedseat" value="Flight3" onclick="calculateTotal()" />First Class Seat</label><br/>

                <br/>
                </p>
                <div id="totalPrice"></div>

              </fieldset>
            </div>


            <input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
        </div>  
       </form>
    </div>

使用Javascript：

var holiday_cost = new Array();
 holiday_cost["Beach1"]=49;
 holiday_cost["Beach2"]=79;
 holiday_cost["Beach3"]=109;
 holiday_cost["Beach4"]=89;
 holiday_cost["Beach5"]=59;

 var fare_prices = new Array();
 fare_prices["Flight1"]=1;
 fare_prices["Flight2"]=1.5;
 fare_prices["Flight3"]=2.5;


function getHolidayPrice()
{  
    var HolidayPrice=1;

    var theForm = document.forms["holidayform"];

    var selectedBeach = theForm.elements["selectedbeach"];

    for(var i = 0; i < selectedBeach.length; i++)
    {

        if(selectedBeach[i].checked)
        {

            HolidayPrice = holiday_cost[selectedBeach[i].value];

            break;
        }
    }

    return HolidayPrice;
}



function twowayPrice()
{
    var twowayPrice=1;

    var theForm = document.forms["holidayform"];

    var includeTwoway = theForm.elements["twowayfare"];


    if(includeTwoway.checked==true)
    {
        twowayPrice=2;
    }

    return twowayPrice;
}

function getSeatPrice()
{  
    var SeatPrice=1;

    var theForm = document.forms["holidayform"];

    var selectedSeat = theForm.elements["selectedseat"];

    for(var i = 0; i < selectedSeat.length; i++)
    {

        if(selectedSeat[i].checked)
        {

            SeatPrice = fare_prices[selectedSeat[i].value];

            break;
        }
    }

    return SeatPrice;
}



function calculateTotal()
{
    //Here we get the total price by calling our function
    //Each function returns a number so by calling them we add the values they return together
    var flightPrice = getHolidayPrice() * twowayPrice() * getSeatPrice();

    //display the result
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Total Price For the Holiday $"+flightPrice;

}

function hideTotal()
{
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='none';
}

请帮助！？， Fonza

Javascript计算表格

0 个答案: