Fatal编程技术网
  • javascript/
  • Javascript将输入字段乘以一个数值

Javascript将输入字段乘以一个数值

javascript

Javascript将输入字段乘以一个数值,javascript,Javascript,我试图将输入字段“full_day”上的用户输入乘以“var fullprice”，并在只读输入字段“total_full”中显示结果我做错了什么导致它无法工作 <div id="wrapper"> <div id="header"></div> <table width="899" border="1" align="left" cellpadding="1"> <form action="" method="get" name="m

我试图将输入字段“full_day”上的用户输入乘以“var fullprice”，并在只读输入字段“total_full”中显示结果我做错了什么导致它无法工作

<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="275"><label>Company Name</label></td>
    <td width="180"><input type="text" name="companyname" id="companyname" /></td>
    <td width="27">&nbsp;</td>
    <td width="223">Enquiry Date</td>
    <td width="160"><input type="text" name="enquiry_date" id="enquiry_date" class="datepicker" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Number of Delegates</td>
    <td><input type="text" name="no_of_delegates" id="no_of_delegates" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Accommodation:</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <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>&nbsp;</p></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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>Total Days Accommodation</td>
    <td><input type="text" name="total_days_acc" id="total_days_acc" /></td>
  </tr>
  <tr>
    <td>Number of Rooms:</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Single</td>
    <td><input type="text" name="no_of_rooms_single" id="no_of_rooms_single" /></td>
    <td>&nbsp;</td>
    <td>Double / Twin</td>
    <td><input type="text" name="no_of_rooms_double" id="no_of_rooms_double" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Contact Person</td>
    <td><input type="text" name="contact_person" id="contact_person" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Full Day Conference @ R260.00 p/p</td>
    <td><input type="text" name="full_day" id="full_day" /></td>
    <td>&nbsp;</td>
    <td>Total Full Day</td>
    <td><input type="text" name="total_full" id="total_full" readonly="readonly" /></td>
  </tr>
  <tr>
    <td>Half Day Conference @ R240.00 p/p</td>
    <td><input type="text" name="half_day" id="half_day" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Single Rooms @ R480.00 p/p</td>
    <td><input type="text" name="single_rooms" id="single_rooms" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Double / Twin Rooms @ R720.00 p/p</td>
    <td><input type="text" name="double_rooms" id="double_rooms" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Data Projector @ R400.00 rental p/day</td>
    <td><input type="text" name="data_proj" id="data_proj" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Sub Total</td>
    <td><input type="text" name="sub_total" id="sub_total" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  </form>
</table>
</div>
</body>
</html>

<script type="text/javascript">

$(function() {
    $(".datepicker").datepicker({ minDate: -0, maxDate: "+100M +10D",dateFormat: 'dd-mm-yy'})
    ({
        changeMonth: true,
        changeYear: true,
    });
        });


var enquiry_date = $.datepicker.formatDate('dd-mm-yy', new Date());
document.getElementById('enquiry_date').value = enquiry_date;

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;

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


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



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);

function calculateFull()
{
    var fulldays = document.getElementById("full_day").value;

    var fullprice = 260;

    var result =  fulldays * fullprice;

    document.getElementById("total_full").innerHTML = result;   
    }
    $('#full_day').change(calculateFull);
</script>


公司名称
查询日期
会议日期
会议日期
代表人数
住宿：
登记日期



退房日期




住宿总天数
房间数量：
仅有一个的
双人房/双人房
联系人
电话号码
传真号码
细胞数
电子邮件
全天会议@R260.00 p/p
全天
半天会议@R240.00 p/p
单人房，每间480.00南非兰特
双人房/双人房，价格720.00南非兰特
数据投影仪@R400.00租赁/天
小计
$（函数（）{
$（“.datepicker”）.datepicker（{minDate:-0，maxDate:“+100M+10D”，日期格式：'dd-mm-yy'}）
({
变化月：对，
变化年：是的，
});
});
var查询日期=$.datepicker.formatDate（'dd-mm-yy'，新日期（））；
document.getElementById（“查询日期”）。值=查询日期；
var calcDate=函数（）{
var start=$（'#会议日期''u in'）。日期选择器（'getDate'）；
var end=$（'#会议日期''u out'）。日期选择器（'getDate'）；
风险值天数=（结束-开始）/1000/60/60/24；
如果（天==0）天=1
如果（天数>=0）{
document.getElementById（'total_days'）。值=天；
} 
}
$（'会议日期'）。更改（calcDate）；
$（'会议日期'）。更改（calcDate）；
var calcDateAcc=函数（）{
var startacc=$（'check#in_date'）。日期选择器（'getDate'）；
var endacc=$（'check out'u date'）。日期选择器（'getDate'）；
var daysacc=（endacc-startacc）/1000/60/60/24；
如果（daysacc==0）daysacc=1
如果（daysac>=0）{
document.getElementById（'total_days_acc'）。value=daysacc；
} 
}
$（'check#in_date'）。更改（calcDateAcc）；
$（'签出日期'）。更改（calcDateAcc）；
函数calculateFull（）
{
var fulldays=document.getElementById（“full_day”）.value；
var fullprice=260；
var结果=完整天数*完整价格；
document.getElementById（“total_full”）.innerHTML=result；
}
$（'full#u day'）。更改（可计算）；
document.getElementByid（“全天”）。value返回字符串。在与
fullprice

var fulldays = parseInt(document.getElementById("full_day").value, 10);
并更改
document.getElementById（“total_full”）.innerHTML=result

到
document.getElementById（“total_full”）。值=结果
总计\u满是输入框，所以您应该设置值，而不是innetHTML


document.getElementById("total_full").innerHTML = result;

document.getElementById("total_full").value = result;



字符串乘法自动将它们转换为数字。太好了。非常感谢。我已按规定进行了两项更改，并且正在运行。当用户输入“全天”值时，是否有办法更改“全天”值，而不是仅在用户“退出”字段时更改？是的，使用按键事件$（“#全天”）.change（calculateFull）。按键（calculateFull）；谢谢，它正在工作，但是在键入total_full的值时是NaN？它仅在“离开”字段时更新。此外，如果您返回并编辑“全天”，则总天数不会更新？您可以在calculateFull中使用isNaN函数。若结果为NaN，只需在此处显示“？”或类似内容。