Submit Form and Stay on Same Page

Submit form and stay on same page?

The easiest answer: jQuery. Do something like this:

$(document).ready(function(){
   var $form = $('form');
   $form.submit(function(){
      $.post($(this).attr('action'), $(this).serialize(), function(response){
            // do something here on success
      },'json');
      return false;
   });
});

If you want to add content dynamically and still need it to work, and also with more than one form, you can do this:

   $('form').live('submit', function(){
      $.post($(this).attr('action'), $(this).serialize(), function(response){
            // do something here on success
      },'json');
      return false;
   });

How to stay in same page after submit form

You can use event.preventDefault to prevent the form submission but you also need to send the data to the server so for this you can use jQuery ajax ( see below code )

    $(".subcribe-form").submit(function(event){
    event.preventDefault()
    var validEmail = true;

    $("input.form-control").each(function(){
        if ($.trim($(this).val()).length == 0){
            $(this).addClass("has-error");
            validEmail = false;
        }
        else{
            $(this).removeClass("has-error");
        }
    });

    if (!validEmail) { alert("Please enter your email to subscribe");
    }else {
//for valid emails sent data to the server
     $.ajax({
            url: 'some-url',
            type: 'post',
            dataType: 'json',
            data: $('.subcribe-form').serialize(),
            success: function(serverResponse) {
                       //... do something with the server Response...
                     }
        });
    }
    return validEmail;
    });

jquery submit form and stay on same page not working

@DankyiAnnoKwaku - kudos to Dankyi for getting me on the right track, but his solution didn't work for me, I had to adapt it a bit more:

 <script type="text/javascript">

        function submitForm() {
            console.log("SUBMIT BUTTON CLICKED");
            var subForm = $('#signupForm')[0] ;
            if (!subForm.checkValidity()) {
                console.log("INVALID FORM SUBMISSION");
                $('#signupForm').find(':submit').click() ;
                return ;
            }
            $("#signupForm").submit();
        }

        // Had to wrap the `submit(function(event)` in the root `$(document).ready ....`
        $(document).ready(function(event) {
          $("#signupForm").submit(function(event){
              console.log("FORM SUBMITTED AND PAGE DOES NOT REDIRECT");
              event.preventDefault(); // now working 
              $.post($(this).attr('action'), $(this).serialize(), function(response){
                  // do something here on success
                  console.log(response) ;
            },'json');
              return false;  // not working here
          });
        }) ;
    </script>

After submit a form, stay same page, show a word in the page

Firstly, you were having document.forms["my form"] which was invalid since your form name was form so I changed it to document.forms["form"].

And, on submit, I added return false at the bottom of the function to stay on the page. Also, before that, added "Submitted" text in the center of the page as shown below.

Here's working code snippet!

Hope that helps!

var errosCount = 0;
function myFunction() {  var x, text;  x = document.getElementById("id1").value;
  if (isNaN(x) || x != 100) {    text = "Incorrect";    document.getElementById("Q1").style.color = "red";    errosCount++;  } else {    text = "Correct";    document.getElementById("Q1").style.color = "green";  }  document.getElementById("Q1").innerHTML = text;  if (errosCount === 3) {    errosCount = 0;    document.getElementById('btn1').style.display = 'block';    document.getElementById("Q1").innerHTML = '';  } else {    document.getElementById('btn1').style.display = 'none';  }}
function Solution() {  text = "(P - w) * q<sub>o</sub> - I = (53 - 43) * 30 - 200 = 100";  document.getElementById("Q1").style.color = "red";  document.getElementById("Q1").innerHTML = text;}
function validateForm() {  var q = document.forms["form"]["Computer"].value;  if (q == "") {    alert("Computer Number is Missing!");    return false;  }  var w = document.forms["form"]["id1"].value;  if (w != "100") {    alert("Question 1 is Incorrect!");    return false;  }  document.getElementById("submitted").innerHTML = "Submitted"  return false;}

#submitted {  text-align: center}

<form name="form" onsubmit="return validateForm()">
  Computer Number:<br>  <input type="text" name="Computer"><br>
  <p>How much is your profit?
    <input id="id1" name="id1" required>    <button type="button" onclick="myFunction()">My Answer</button>    <button type="button" id="btn1" onclick="Solution()" style="display:none;">Solution</button>  </p>
  <p id="Q1"></p>
  <input type="submit" value="Submit">
</form><br/><div id="submitted">  </div>