Form Submit With Ajax Passing Form Data to PHP Without Page Refresh

Form submit with AJAX passing form data to PHP without page refresh

The form is submitting after the ajax request.

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      $(function () {

        $('form').on('submit', function (e) {

          e.preventDefault();

          $.ajax({
            type: 'post',
            url: 'post.php',
            data: $('form').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });

        });

      });
    </script>
  </head>
  <body>
    <form>
      <input name="time" value="00:00:00.00"><br>
      <input name="date" value="0000-00-00"><br>
      <input name="submit" type="submit" value="Submit">
    </form>
  </body>
</html>

How to post data (form) without page refresh PHP, jQuery, Ajax

You have made couple of mistakes.

First:: You should put button type="button" in your HTML form code

Second:: You have made a syntax error. $("#comment").vol(); should be replaced with $("#comment").val(); in your jQuery AJAX

How to Submit a html Form Submit Without Page Refresh using AJAX

This is not a new question but still you can take help from this code

$(document).ready(function(){
 $("button").click(function(){
    $.ajax({url: "submit_form.php", success: function(result){
        $("#div1").html(result);
    }});
 });
});

Form submit without refresh using jquery/ajax if page have more than one form

Just customize your function and add params like formid to get form data within the function to pass processForm("id of the form");

function processForm(formId) { 
    //your validation code
    $.ajax( {
            type: 'POST',
            url: form_process.php,
            data: $("#"+formId).serialize(), 
            success: function(data) {
                $('#message').html(data);
            }
        } );
    }

<form action="" id="form1" method="post" onsubmit="processForm('form1');return false;">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>

<form action="" id="form2" method="post" onsubmit="processForm('form2');return false;">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>
<form action="" id="form3" method="post" onsubmit="processForm('form3');return false;">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>
<div id='message'></div>

How to submit form using AJAX without having to leave the page HTML Formsubmit

To Prevent Submission You should return false in

frm.submit(function (e) { 
   return false;
})

Or in form tag
<form onSubmit="return false">

var frm = $('#contactForm');
var msg_res ='';

frm.submit(function (e) {

    e.preventDefault();

   
    $.ajax({
        type: frm.attr('method'),
        method: "POST",
        url: "https://formsubmit.co/el/vupawa",
        dataType: 'html',
        accepts: 'application/json',
        data: frm.serialize(),
        success: function (response) {
        $("#message").html(response);
            if(response != msg_res){
                msg_res = response; //store new response
                alert('New message received');
              }
        },
        error: function (data) {
            console.log('An error occurred.');
            console.log(data);
        }
    });
    return false; // here a change
});

<form id="contactForm" action="https://formsubmit.co/el/myemail" method="POST">
<input type="text"   name="name">
<input type="phone"  name="phone" inputmode="tel">
<input type="hidden" name="_subject" value="Partenaires">
<input type="email"  name="email" >
<input type="text"   name="message" >
<button class="btn btn-primary border rounded-0 shadow-lg d-lg-flex justify-content-lg-center" 
type="submit" name="sendData">Send</button>

<!-- <input type="hidden" name="_next" value="thanks.html">-->

Submit ajax form without page refresh php

When using jQuery to submit the form, the submit button isn't used. Therefore it will turn up empty once PHP receives the posted data.
Your script is checking $subSale to perform the query, which now fails.

Try to supply a hidden input with the name SubSale and it wil work again. Another solution is to remove this entire if statement, as per your own suggestion.

if(isset($subSale)){

Form Submit With Ajax Passing Form Data to PHP Without Page Refresh