CODEWITHSUNDEEP
javascriptformsfunction
fupuchu
fupuchu

Reputation: 307

Submit a form in JS using onsubmit

I ran into some issues when trying to execute a function upon form submit. I needed to add a min/max for the inputs.

The code without onsubmit="runFunction()" works as it's suppose to but when I wrap it into a form and use onsubmit="runFunction()" the function runs once but it resets everything after it's done.

The code looks like this:

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>

The function checkValues():

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

compareArray() just checks if the input value is the same as another array.

The function works as long as I don't use a form and use onclick which changes the background of the inputs to red if wrong and green if correct. If I wrap it in a form the function runs, I can see it run briefly for a moment before it resets everything.

Upvotes: 1

Views: 200

Answers (2)

Natta Wang
Natta Wang

Reputation: 551

The form you wrote is only form tag without any attributes, so when submit() function is fired, the default behavior is called, target is itself then make it do like refresh. That make your input values is all gone.

So the function checkValues() should have parameter event from fired element.

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

In function, first call event.preventDefault() to stop the default behavior and then last call document.getElementById('formId').submit() to fire the event by yourself.

Kind like this.

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

Upvotes: 1

StaticBeagle
StaticBeagle

Reputation: 5175

What is going on, is that you are actually submitting the form. Since the form doesn't have an action attributed to it, it just submits to itself and that ends up refreshing your page. You can solve this by preventing the submit from happening by using 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>

then in you 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();
}

Upvotes: 3

Related Questions