时间戳

首页 > 解决方案 > 如果值大于或等于指定值，则启用提交按钮

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

问题描述

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

我添加了我正在更改的 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);

JSF中间代码

标签： javascript

解决方案

不要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" />

推荐阅读