如果值大于或等于指定值，则启用提交按钮

Question

只有当第二个文本值等于或大于第一个文本框值时，我才会尝试在表单中启用提交按钮。在发布之前，我已经检查了解决方案。我不知道我错过了什么。请在这方面帮助我。

我添加了JSfiddle代码，我在该代码上更改

表单代码

<form method="post" action="order.php">
First Number
<input type="text" id="total1" />
<br>
Second Number
<input type="text" id="total2" />
<br>
<input type="submit" value="Submit" disabled title="Not Relevant">
</form>

脚本

setInterval(function () {
if ($('#total1').val() >= ('#total2').val())
$(":submit").removeAttr("disabled");
else
$(":submit").attr("disabled", "disabled");
}, 1);

JSFiddle代码

Answer 1

不要使用setInterval来检查值。这将阻止线程执行任何其他操作，因为您基本上是在创建一个无限循环。

您只需要在提交时知道比较值即可。然后使用Event.preventDefault()提交或阻止提交。

let $form = $('form');
let $total1 = $('#total1');
let $total2 = $('#total2');
$form.on('submit', function(event) {
let val1 = Number($total1.val());
let val2 = Number($total2.val());
if (val1 < val2) { // If condition is NOT met.
event.preventDefault(); // Default submit from happening.
return false; // Stop function.
}
});

此外，当其中一个输入中的值发生更改时，您可以侦听表单上的change事件，并检查其中的值。然后根据评估设置输入按钮中的禁用属性。

let $submitButton = $(':submit');
$form.on('input', function(event) {
let val1 = Number($total1.val());
let val2 = Number($total2.val());
let isDisabled = val1 < val2; // Will return true or false.
$submitButton.prop('disabled', isDisabled);
});

如果要比较数字，请将输入类型更改为number。否则，您将比较字符串。

<input type="number" id="total1" />
<input type="number" id="total2" />