How to prevent form to reload page after onsubmit

Question

Here's the form code that I have:

<form id="sizePicker">
    Grid Height:
    <input type="number" id="inputHeight" name="height" min="1" value="1">
    Grid Width:
    <input type="number" id="inputWidth" name="width" min="1" value="1">
    <input type="submit">
</form>

I need to validate those inputs using a separate JS file:

function getGridValues() {                                                                                                                                                
const inputHeight = document.getElementById('inputHeight').value;
const inputWidth = document.getElementById('inputWidth').value;
const colorPicker = document.getElementById('colorPicker').value;
console.log(`Height: ${inputHeight}, Width: ${inputWidth}, Color: ${colorPicker}`);
}

document.getElementById('submit').addEventListener("click", getGridValues());

The problem is that every time that I click on submit it reloads the page and sends the default values. If I change the values without submitting, I'm able to retrieve those new values using the JS Console.

I've researched a lot on this thing but everything suggests jQuery/Ajax solutions but I'm just allowed to work with HTML/CSS/JS.

What is the problem? How can I fix it?

Thank you in advanced.

`document.getElementById('submit').addEventListener("click", getGridValues());` isn't your real code, is it? surely you have `document.getElementById('submit').addEventListener("click", getGridValues);` — Jaromanda X, Jun 05 '18 at 03:13
`function getGridValues(e) { e.preventDefault(); ...rest of your code ...}` — Jaromanda X, Jun 05 '18 at 03:14
It is the right code. I'm not pretty sure if that's the correct way to handle a form. — Ronny C., Jun 05 '18 at 03:16
Ajax is JavaScript right? You don't need jquery, but if you can use native JavaScript, you can do Ajax calls and aggregate the field values yourself without using form submission. Even still, this is a duplicate question: https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit — theferrit32, Jun 05 '18 at 03:16
I'd be more inclined to `document.getElementById('sizePicker').addEventListener('submit', ....)` though — Jaromanda X, Jun 05 '18 at 03:19
`document.getElementById('submit').addEventListener("click", getGridValues());` executes `getGridValues()` straight away, not in response to click ... the returned value (undefined in this case) is used as the click event handler, and since `undefined` is not a function, then nothing (extra) will happen on click, just the default action — Jaromanda X, Jun 05 '18 at 03:20

score 3 · Accepted Answer · answered Jun 05 '18 at 03:19

Prevent the default behavior of the submit using event.preventDefault. Then use ajax to submit the form value.

Also in addEventListener while attaching the event you dont need to immediately call the getGridValues, so avoid the () after the function name

function getGridValues(e) {
  e.preventDefault();
  const inputHeight = document.getElementById('inputHeight').value;
  const inputWidth = document.getElementById('inputWidth').value;
  console.log(`Height: ${inputHeight}, Width: ${inputWidth}`);

  // Here use ajax to submit the value
}

document.getElementById('submit').addEventListener("click", getGridValues);

<form id="sizePicker">
  Grid Height:
  <input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
  <input type="number" id="inputWidth" name="width" min="1" value="1">
  <input type="submit" id="submit">
</form>

I previously found the e.preventDefault() method before as mentioned by Jaromanda X but it didn't work. Now by just removing the () when attaching the event it worked just fine. What's the difference from calling a function with () and without 'em? I thought that object.something it was a property and object.something() it was a function. I'm very new to Javascript. — Ronny C., Jun 05 '18 at 03:26

Luke101 · Answer 2 · 2018-06-05T03:25:07.507

You can use preventDefault

function getGridValues(event) {        
     event.preventDefault();                                                                                                                                        
     const inputHeight = document.getElementById('inputHeight').value;
     const inputWidth = document.getElementById('inputWidth').value;
     const colorPicker = document.getElementById('colorPicker').value;
     console.log(`Height: ${inputHeight}, Width: ${inputWidth}, Color: ${colorPicker}`);
}

document.getElementById('submit').addEventListener("click", getGridValues);

score 0 · Answer 3 · answered Jun 05 '18 at 03:49

Try with the following changes in your code.

<input type="button" onclick="return getGridValues();">

and the script is,

function getGridValues() {                                                                                                                                                
   const inputHeight = document.getElementById('inputHeight').value;
   const inputWidth = document.getElementById('inputWidth').value;
   const colorPicker = document.getElementById('colorPicker').value;
   console.log(`Height: ${inputHeight}, Width: ${inputWidth}, Color: 
   ${colorPicker}`);
   return false;
}

score 0 · Answer 4 · answered Jun 05 '18 at 04:08

0

Adding event.preventDefault(); is a way to do this, but it can not stop the page to reload if user press "Enter" instead of click on submit button.

Adding action="javascript:void(0);" into the form will prevent both.

answered Jun 05 '18 at 04:08

Hank Phung

2,059
1
23
38

How to prevent form to reload page after onsubmit

4 Answers4