实时计算最小订单形式

Question

我从两个不同的来源借用了一些代码并将它们拼接在一起。一个有效（订购总数），但第二个（最小订单）无效。我是 Java 的新手，可能只是缺少命令或其他东西。

'total' 用于两者，一旦 'total' 高于 20，应重新启用提交按钮。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>temp</title>

<script language="javascript">
function calculate(form)
{
var item1 = form.item1.value;
var item2 = form.item2.value;
form.total.value = (item1 * 10) + (item2 * 30);
};
</script>

<script language="javascript">
setInterval(function () {
    if ($('#total').val() >= 20)
        $(":submit").removeAttr("disabled");
    else
        $(":submit").attr("disabled", "disabled");
}, 1);
</script>

</head>
<body>
<form method="POST" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" >
<table border="1" cellspacing="1" width="757">
<tr>
<td width="224" align="center"><strong>Quantity</strong></td>
<td width="39" align="center"><strong>price</strong></td>
<td width="476" align="center"><strong>total</strong></td>
</tr>
<tr>
<td width="224">item1<input type="number" name="item1" size="20" onchange="calculate(this.form)" value="0"></td>
<td width="39"></td>

</tr>
<tr>
<td width="224">item2<input type="number" name="item2" size="20" onchange="calculate(this.form)" value="0"> </td>
<td width="39"></td>
</tr>
<tr>
<td width="224"> </td>
<td width="39">total</td>
<td width="476"> <input type="number" name="total" size="20"></td>
</tr>
</table>
<p><input type="submit" value="Submit Order" disabled title="Order is below  minimum."></p>
</form>
</body>
</html>

Answer 1

$('#total') 查找 ID 为 total 的元素，但您没有它（您只有名称），

所以，通过添加 id - 表单有效

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>temp</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript">
function calculate(form)
{
var item1 = form.item1.value;
var item2 = form.item2.value;
form.total.value = (item1 * 10) + (item2 * 30);
};
</script>

<script language="javascript">
setInterval(function () {
    if ($('#total').val() >= 20)
        $(":submit").removeAttr("disabled");
    else
        $(":submit").attr("disabled", "disabled");
}, 1);
</script>

</head>
<body>
<form method="POST" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" >
<table>
<tr>
<td align="center"><strong>Quantity</strong></td>
<td align="center"><strong>price</strong></td>
<td align="center"><strong>total</strong></td>
</tr>
<tr>
<td>item1<input type="number" name="item1" size="20" onchange="calculate(this.form)" value="0"></td>
<td width="39"></td>

</tr>
<tr>
<td>item2<input type="number" name="item2" size="20" onchange="calculate(this.form)" value="0"> </td>
<td></td>
</tr>
<tr>
<td> </td>
<td>total</td>
<td> <input type="number" id="total" name="total" size="20"></td>
</tr>
</table>
<p><input type="submit" value="Submit Order" disabled title="Order is below  minimum."></p>
</form>
</body>
</html>

实时计算最小订单形式

Real time calculation of form with minimum order

html

javascript

php

calculation