Question

i have an form which will send some data to an php file , then return some results as example:

<form action"<?php $_SERVER['PHP_SELF']?>" method="post" id="data">
  <input type"text" name="first_name"/>
  <input type="text" name="last_name"/>
</form>

then in javascript i want catch clcik event in submit form as example :

$("#data").submit(function(){
some code .....
});

which that will prevent the default action for submitting inputs form to the php file , the question is can i send data of a form for php file and same time catch event for the same form ?

NOTE the returned data from php file will be needed by another php
function

Answer 1

To prevent the default behavior of form submit(Which is Page reload) you need to use event.preventDefault() like this

$("#data").submit(function(event){
    event.preventDefault();
    //some code .....
});

And to post the form data into php without refreshing page you need to use any of the jQuery’s available ajax methods like .post() (Which will send form values using HTTP POST Method) like

$("#data").submit(function(event){
    event.preventDefault();// prevent page reload
    // Now post the form using Ajax
    // $(this).serialize() will return an array of all form fields as
    //                                                 name value pair 
    $.post('some_script.php',$(this).serialize(),function(data){
        // Just to check if everything is working well
        console.log('Form Submitted Successfully.');
        // do whatever you want with the data
   });
});

If your php script returns the data in json format the you can either set the content-Type header using php or force jQuery to treat the return data as JSON by specifying the dataType as JSON in the 4th parameter like

   $.post('some_script.php',$(this).serialize(),function(data){
        // Just to check if everything is working well
        console.log('Form Submitted Successfully.');
        // do whatever you want with the data
   },'json');