Расчет формы в реальном времени с минимальным заказом - PullRequest
Новая
       10

Расчет формы в реальном времени с минимальным заказом

0 голосов
/ 01 ноября 2019

Я позаимствовал некоторый код из двух разных источников и склеил их вместе. Один работает (сумма заказа), а второй (минимальный заказ) - нет. Я новичок в том, что касается 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">$10</td>

</tr>
<tr>
<td width="224">item2<input type="number" name="item2" size="20" onchange="calculate(this.form)" value="0"> </td>
<td width="39">$30</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 $20 minimum."></p>
</form>
</body>
</html>

1 Ответ

0 голосов
/ 01 ноября 2019

$('#total') ищет элемент с идентификатором total, но у вас его нет (у вас есть только имя),

, поэтому, добавляя идентификатор - форма работает 

<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">$10</td>

</tr>
<tr>
<td>item2<input type="number" name="item2" size="20" onchange="calculate(this.form)" value="0"> </td>
<td>$30</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 $20 minimum."></p>
</form>
</body>
</html>
...