1

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 ?

3 Answers 3

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");
    });
  });
});
6
  • 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, 2016 at 5: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 Mar 10, 2016 at 5:20
  • 1
    I think I made some mistake here. It's ok now. Thank you @DelightedD0D
    – Chris Bao
    Mar 10, 2016 at 6:16
  • @baoqger glad you got sorted, happy coding, dont forget to close the question if it's resolved now Mar 10, 2016 at 6: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. Mar 5, 2020 at 11:04
5

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
}
2
  • 1
    Work on me , but changing the word to "event" on html to "e" returns an error. i dont know why Apr 29, 2020 at 4: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 at 16:05
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.