使用onsubmit在JS中提交表单

fupuchu

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

没有代码的代码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它将输入的背景更改为红色(如果错误)和绿色(如果正确),该函数就可以工作如果将其包装为函数运行的形式,则可以看到它短暂运行了一段时间,然后将所有功能重置。

静态小猎犬

发生的事情是您实际上正在提交表单。由于表单没有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();
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章