Отправить форму в JS, используя onsubmit

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

Форма, которую вы написали, является только тегом 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();
}

Answer 2

То, что происходит, это то, что вы на самом деле отправляете форму.Поскольку форме не приписывается 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();
}