根據計算計算子總數

我想根據：「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>

來源

2012-06-13 user1426583

請不要轉儲代碼，我們期望我們做得更好。給我們一個能夠再現您的問題的小型測試案例，然後我們可以嘗試幫助您。 –

沒問題。對此感到抱歉 – user1426583

http://jsfiddle.net/newbie123/98aNx/1/ – user1426583

這是否你想要做什麼：

//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/

來源

2012-06-13 21:32:22 HBP

根據計算計算子總數

回答

相關問題