Question

尝试在表单提交时执行函数时遇到了一些问题。我需要为输入添加最小值/最大值。

没有onsubmit="runFunction()"的代码可以正常工作，但当我将其包装到表单中并使用onsubmit="runFunction()"时，该函数会运行一次，但它会在完成后重置所有内容

代码如下所示：

HTML：

<form>
    <input class="numGuess" id="num0" min="0" max="9" autocomplete="off">
    <input class="numGuess" id="num1" min="0" max="9" autocomplete="off">
    <input class="numGuess" id="num2" min="0" max="9" autocomplete="off">
    <input class="numGuess" id="num3" min="0" max="9" autocomplete="off">
    <input type="submit" value="Is it correct?" onclick="checkValues()">
</form>

函数checkValues（）：

function checkValues(){
  arr2 = [];
  Object.keys(mainGuess).forEach(function(num){
    var iterated = mainGuess[num];
    console.log(iterated.value);
    arr2.push(iterated.value);
  })
  compareArray();
}

compareArray（）只检查输入值是否与另一个数组相同。

只要我不使用表单并使用onclick，该功能就会起作用，如果错误则将输入的背景更改为红色，如果正确，则将绿色更改为绿色。如果我将它包装在一个函数运行的表单中，我可以看到它在重置所有内容之前暂时运行了一段时间。

Answer 1

发生了什么，是你实际上是在提交表格。由于表单没有归因于action，因此它只会提交给自己，最终会刷新您的页面。您可以使用preventDefault()

阻止提交，从而解决此问题

<form>
    <input class="numGuess" id="num0" min="0" max="9" autocomplete="off">
    <input class="numGuess" id="num1" min="0" max="9" autocomplete="off">
    <input class="numGuess" id="num2" min="0" max="9" autocomplete="off">
    <input class="numGuess" id="num3" min="0" max="9" autocomplete="off">
    <input type="submit" value="Is it correct?" onclick="checkValues(event)">
</form>

然后在你Javascript

function checkValues(event){
  event.preventDefault();
  arr2 = [];
  Object.keys(mainGuess).forEach(function(num){
    var iterated = mainGuess[num];
    console.log(iterated.value);
    arr2.push(iterated.value);
  })
  compareArray();
}

Answer 2

您编写的表单只有form标签，没有任何属性，因此当submit()函数被触发时，会调用默认行为，target本身就会使其像刷新一样。这使得您的输入值全部消失。

因此函数checkValues()应该来自被触发元素的参数event。

<input type="submit" value="Is it correct?" onclick="checkValues(event)">

在功能中，首先调用event.preventDefault()以停止默认行为，然后最后调用document.getElementById('formId').submit()以自行触发事件。

有点像这样。

function checkValues(event) {
    event.preventDefault();
    ...your code...
    document.getElementById('formId').submit();
}

使用onsubmit在JS中提交表单

2 个答案: