javascript - 根据计算计算小计

Question

我正在尝试根据“total_full”+“total_half”计算“sub_total”字段。但是我尝试的 javascript 不起作用。sub_total 的结果显示为“0”。如何改进我的javascript“计算小计”以允许我将“total_full”和“total_half”加在一起？（然后，当我可以正确计算时，我还将实现 sub_total 计算以包括“total_single”、“total_double”和“total_projector”。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Conference Form</title>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryui.js"></script>
<link href="style.css" rel="stylesheet" type="text/css"/>
<link href="css/jqueryui.css" rel="stylesheet" type="text/css" />

<body>

<div id="wrapper">
<div id="header"></div>

<table width="899" border="1" align="left" cellpadding="1">
  <form action="" method="get" name="myform">

  <tr>
    <td width="258"><label>Company Name</label></td>
    <td width="249"><input type="text" name="companyname" id="companyname" /></td>
    <td width="27">&nbsp;</td>
    <td width="186">Enquiry Date</td>
    <td width="145"><input type="text" name="enquiry_date" id="enquiry_date" class="datepicker" /></td>
  </tr>

  <tr>
    <td>Conference Date In</td>
    <td><input type="text" name="conference_date_in" id="conference_date_in" class="datepicker" /></td>
    <td>&nbsp;</td>
    <td>Conference Date Out</td>
    <td><input type="text" name="conference_date_out" id="conference_date_out" class="datepicker" /></td>
  </tr>
  <tr>
    <td>Total Days</td>
    <td><input type="text" name="total_days" id="total_days" /></td>
  </tr>
  <tr>
    <td>Number of Delegates</td>
    <td><input type="text" name="no_of_delegates" id="no_of_delegates" /></td>
    </tr>
   <tr>
    <td>Accommodation:</td>
    <tr>
    <td><p>Check in Date</p></td>
    <td><input type="text" name="check_in_date" id="check_in_date" class="datepicker" /></td>

    <td><p>Check out Date</p></td>
    <td><p>
      <input type="text" name="check_out_date" id="check_out_date" class="datepicker" />
        </p></td>
  </tr>
  <tr>
    <td>Total Days Accommodation</td>
    <td><input type="text" name="total_days_acc" id="total_days_acc" /></td>
  </tr>
  <tr>
    <td><strong>Contact Details</strong></td>
    </tr>
  <tr>
    <td>Contact Person</td>
    <td><input type="text" name="contact_person" id="contact_person" /></td>
    </tr>
  <tr>
    <td>Telephone Number</td>
    <td><input type="text" name="tel_no" id="tel_no" /></td>
    <td>&nbsp;</td>
    <td>Fax Number</td>
    <td><input type="text" name="fax_no" id="fax_no" /></td>
  </tr>
  <tr>
    <td>Cell Number</td>
    <td><input type="text" name="cell_no" id="cell_no" /></td>
    <td>&nbsp;</td>
    <td>Email</td>
    <td><input type="text" name="email" id="email" /></td>
  </tr>

  <tr>
    <td>Full Day Conference @ R260 p/p</td>
    <td><input type="text" name="full_day" id="full_day" />
    Full Days</td>
    <td>&nbsp;</td>
    <td>Total Cost Full Day</td>
    <td><input type="text" name="total_full" id="total_full" readonly="readonly" /></td>
  </tr>
  <tr>
    <td>Half Day Conference @ R240 p/p</td>
    <td><input type="text" name="half_day" id="half_day" />
    Half Days</td>
    <td>&nbsp;</td>
    <td>Total Cost Half Day</td>
    <td><input type="text" name="total_half" id="total_half" readonly="readonly" /></td>
  </tr>
  <tr>
    <td>Single Rooms @ R480 p/p</td>
    <td><input type="text" name="single_rooms" id="single_rooms" />
    Guests</td>
    <td>&nbsp;</td>
    <td>Total Cost Single Rooms</td>
    <td><input name="total_single" type="text" id="total_single" readonly="readonly" /></td>
  </tr>
  <tr>
    <td>Double / Twin Rooms @ R360 p/p/s</td>
    <td><input type="text" name="double_rooms" id="double_rooms" /> 
    Guests</td>
    <td>&nbsp;</td>
    <td>Total Cost Double / Twin</td>
    <td><input name="total_double" type="text" id="total_double" readonly="readonly" /></td>
  </tr>
  <tr>
    <td>Data Projector @ R400 rental p/day</td>
    <td><input type="text" name="data_projector" id="data_projector" /> 
      Days</td>
    <td>&nbsp;</td>
    <td>Total Cost Projector Rental</td>
    <td><input name="total_projector" type="text" id="total_projector" readonly="readonly" /></td>
  </tr>
   <tr>
    <td>Sub Total</td>
    <td><input name="sub_total" type="text" id="sub_total" readonly="readonly" /></td>
    </tr>
  <tr>
    <td height="23">&nbsp;</td>
    </tr>

  </form>
</table>

</div>

<div id="hideme">
Hello Hideme
</div>

</body>
</html>

JAVASCRIPT

<script type="text/javascript">
//Datepicker
$(function() {
    $(".datepicker").datepicker({ minDate: -0, maxDate: "+100M +10D",dateFormat: 'dd-mm-yy'})
    ({
        changeMonth: true,
        changeYear: true,
    });
        });

//Datepicker Enquiry Date Set to Today
var enquiry_date = $.datepicker.formatDate('dd-mm-yy', new Date());
document.getElementById('enquiry_date').value = enquiry_date;


//Datepicker Conference in / out
var calcDate = function() {
    var start = $('#conference_date_in').datepicker('getDate');
    var end = $('#conference_date_out').datepicker('getDate');
    var days = (end - start) / 1000 / 60 / 60 / 24 + 1;

    if(days==0) {days=1
    }
    if( days >= 0 ) {
    document.getElementById('total_days').value = days;
    } 
        }


$('#conference_date_out').change(calcDate);
$('#conference_date_in').change(calcDate);




//Datepicker Check in  / Out Accommodation
var calcDateAcc = function() {
    var startacc = $('#check_in_date').datepicker('getDate');
    var endacc = $('#check_out_date').datepicker('getDate');
    var daysacc = (endacc - startacc) / 1000 / 60 / 60 / 24;


    if(daysacc==0) daysacc=1
    if( daysacc >= 0 ) {
    document.getElementById('total_days_acc').value = daysacc;
    } 
        }


$('#check_in_date').change(calcDateAcc);
$('#check_out_date').change(calcDateAcc);



//Calculate Total Cost FullDay Conference
function calculateFull()
{
    var fulldays = parseInt(document.getElementById("full_day").value);

    var no_of_delegates = parseInt(document.getElementById("no_of_delegates").value);

    var fullprice = 260;

    var resultfull =  fulldays * no_of_delegates * fullprice;

    document.getElementById("total_full").value = resultfull;
    }

    $('#full_day').change(calculateFull).keyup(calculateFull);



//Calculate Half Day conference total   

    function calculateHalf()
{
    var halfdays = parseInt(document.getElementById("half_day").value);

    var no_of_delegates = parseInt(document.getElementById("no_of_delegates").value);

    var halfprice = 240;

    var resulthalf =  halfdays * no_of_delegates * halfprice;

    document.getElementById("total_half").value = resulthalf;
    }

    $('#half_day').change(calculateHalf).keyup(calculateHalf);



//Calculate Total Cost Single Rooms
    function calculateSingle()
{
    var single_rooms = parseInt(document.getElementById("single_rooms").value);

    var total_days_acc = parseInt(document.getElementById("total_days_acc").value);

    var single_rooms_price = 480;

    var resultsingle =  single_rooms * total_days_acc * single_rooms_price;

    document.getElementById("total_single").value = isNaN(resultsingle) ? 0 : resultsingle;
    }



    $('#single_rooms').change(calculateSingle).keyup(calculateSingle);
    $('#check_in_date').change(calculateSingle);
    $('#check_out_date').change(calculateSingle);





//Calculate Total Cost Double / Twin Rooms
    function calculateDouble()
{
    var double_rooms = parseInt(document.getElementById("double_rooms").value);

    var total_days_acc = parseInt(document.getElementById("total_days_acc").value);

    var double_rooms_price = 360;

    var resultdouble =  double_rooms * total_days_acc * double_rooms_price;

    document.getElementById("total_double").value = isNaN(resultdouble) ? 0 : resultdouble;
    }



    $('#double_rooms').change(calculateDouble).keyup(calculateDouble);
    $('#check_in_date').change(calculateDouble);
    $('#check_out_date').change(calculateDouble);




//Calculate Total Cost Date Projector
    function calculateProjector()
{
    var data_projector = parseInt(document.getElementById("data_projector").value);


    var data_projector_price = 400;

    var resultdata =  data_projector *  data_projector_price;

    document.getElementById("total_projector").value = isNaN(resultdata) ? 0 : resultdata;
    }



    $('#data_projector').change(calculateProjector).keyup(calculateProjector);





//Calculate Sub Total
    function calculateSubTotal()
{

    var SubTotal =  total_full +  total_half;

    document.getElementById("sub_total").value = isNaN(SubTotal) ? 0 : SubTotal;
    }


    $('#data_projector').change(calculateSubTotal).keyup(calculateSubTotal);







//Hide me Testing   
$("#full_day").keyup(function(){

        if ($('#full_day').val() == "1") {   
            $("#hideme").show("fast"); //Slide Down Effect
        }
        else {
            $("#hideme").hide("fast");    //Slide Up Effect
        }
    });
</script>

score 1 · Accepted Answer

这是否符合您的要求：

//Calculate Sub Total
    function calculateSubTotal()
{

    var SubTotal =  +total_full.value +  +total_half.value;

    document.getElementById("sub_total").value = isNaN(SubTotal) ? 0 : SubTotal;
    }


document.getElementById("total_half").onchange = calculateSubTotal;
document.getElementById("total_half").onkeyup = calculateSubTotal;

注意一元的使用，+以及.value在获取输入的值时total_full和total_half。还有事件处理程序的设置。

在这里试试：http: //jsfiddle.net/jstoolsmith/ue62p/

javascript - 根据计算计算小计

1 回答 1

Related

Reference