Prevent form submission in the onsubmit event

Question

In my project, I have JS and HTML code as following:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>

function myFunction() {
    //document.getElementById('demo').innerHTML = Date();
    alert("done");
    var a = parseInt(document.getElementById('number1').value);
    var b = parseInt(document.getElementById('number2').value);
    var c = a + b;
    $.get('/_add_numbers',{number: c}, function(data,status){
        res = JSON.parse(data);
        alert(status);
        $("#feedback").text("change");
        alert("show");
    });
};

</script>
</head>
<body>
<h1>My First JavaScript V2</h1>
<p id="demo"></p>
<form onsubmit="myFunction()">
    <input type="text" size="5" name="a" id = "number1"> +
    <input type="text" size="5" name="b" id = "number2"> =
    <span id="result">?</span>
    <br>
    <input type="submit" value="calculate server side" >
</form>
<p id="feedback">feedback</p>
</body>
</html>

And the alert shows that the status was success.

The content of the paragraph turns to "change", but finally change back to original "feeback". So what's the reason ?

score 6 · Accepted Answer · edited Feb 09 '23 at 10:38

6

The content is not changing back. Actually, the form is being submitted and the page is essentially being refreshed.

You need to call .preventDefault(); on the submit event to prevent the form submission like this:

function myFunction(evt) { 
  evt.preventDefault();

  // ... other code
};

Or better yet, ditch the form altogether, change the type="submit" to type="button", then attach an event handler to the button like this:

<body>
  <h1>My First JavaScript V2</h1>
  <p id="demo"></p>
  <input type="text" size="5" name="a" id="number1"> +
  <input type="text" size="5" name="b" id="number2"> =
  <span id="result">?</span>
  <br>
  <input type="button" class="calculate" value="calculate server side">
  <p id="feedback">feedback</p>
</body>

$(function() {
  $('.calculate').click(function() {
    alert("done");
    var a = parseInt(document.getElementById('number1').value);
    var b = parseInt(document.getElementById('number2').value);
    var c = a + b;
    $.get('/_add_numbers', {
      number: c
    }, function(data, status) {
      res = JSON.parse(data);
      alert(status);
      $("#feedback").text("change");
      alert("show");
    });
  });
});

edited Feb 09 '23 at 10:38

Murat Çorlu

8,207
5
53
78

answered Mar 10 '16 at 04:14

Wesley Smith

19,401
22
85
133

One more issue: if I add method of `.preventDefault()`, then the $.get failed to work, the server side can not get the {name: c} parameter. What the reason? – Chris Bao Mar 10 '16 at 05:08
@baoqger Look in the console, are you getting an error like `evt is undefined`? If so, you likely forgot to add the `evt` in `function myFunction(evt) {`, if there are no such errors, drop your code in a jsFiddle and post the link so I can see it please – Wesley Smith Mar 10 '16 at 05:20
1

I think I made some mistake here. It's ok now. Thank you @DelightedD0D – Chris Bao Mar 10 '16 at 06:16
@baoqger glad you got sorted, happy coding, dont forget to close the question if it's resolved now – Wesley Smith Mar 10 '16 at 06:20
1

Re: Or better yet, ditch the form altogether, change the type="submit" to type="button". This is bad advice, as a user will no longer be able to submit a form using their Enter key. – rothschild86 Mar 05 '20 at 11:04
@rothschild86 That's your opinion. Its also something that could easily be added back if needed ;) – Wesley Smith Mar 05 '20 at 11:58

score 4 · Answer 2 · answered Mar 10 '16 at 04:42

4

It's because of the default behavior of the form. It just get submitted when you click the submit button. If you don't do this then the purpose of ajax is useless.

The solution is to stop the default behavior of the form with event.preventDefault ();:

 onsubmit="myFunction(event)"

Now use this in function:

function myFunction(e){
    e.preventDefault();// will stop the form submission
    // rest of the code
}

answered Mar 10 '16 at 04:42

Jai

74,255
12
74
103

1

Work on me , but changing the word to "event" on html to "e" returns an error. i dont know why – Ryan Aquino Apr 29 '20 at 04:44
Because in HTML attribute, "event" is a name which refers the the event object. "e" does not refer to anything inside the onsubmit attribute, it is only defined in myFunction. – Apr 18 '23 at 16:05

score 1 · Answer 3 · answered Mar 10 '16 at 04:27

1

If we use a submit button then post back occurs on the page. To solve the solution you can use the following

<input type="button" value="calculate server side" onclick="myFunction()" >

With this you will not have to create a form tag

answered Mar 10 '16 at 04:27

blackwind090

63
8

Prevent form submission in the onsubmit event

3 Answers3

Linked

Related