Monday, April 1, 2013

Submit Form data using JQuery


Using $.post() method we can post the data to the server and as per the user needs can receive the response from the server.

$.post() method takes 4 parameters.
1. URL : This is the url of a page where we want to send the data to server
2. FormData : This FormData contains all fields data of the form to post
3. Function : This function is used to execute after successful submission of form data, we can receive the response from the server also using this function by taking a parameter.
4. JSON : This parameter is optional to Post method. If we want to receive the JSON encoded response to the Jquery then we need to enable this parameter as 'json', other wise ignore it.

For example take a form like below : (Save this file as textData.php)
<html>
<head>
<title>Test Post</title>
<script type="text/javascript">
//Below JQuery function is used to execute the code when page loads, with out calling any 
functions.
$(document).ready(function() {

    //This is executed when the user click on submit button, here form id is 'myForm'.
    $("#myForm").submit(function() { 

       //This statement will take the url/page name which is defined in the form of action 
       //   attribute. or we can directly give the url/page name here.
        var url = $(this).attr("action"); 

        //This statement is used to collect the form data which is given by user and create 
        //   as a string. example: it will generate as "username=somevalue&password=somevalue".
        var dataString = $(this).serialize();

        //This statement is the post method it will take 4 parameters the first 
//parameter is to where the data need to send, and the second parameter contains the 
//data of form, and the third parameter is used to execute when the JQuery successfully 
//submitted the formdata and receives the response. and the fourth parameter is optional 
//if we want to receive the json data we can use it otherwise ignore it.
        $.post(url, dataString, function(o) { alert(o.message); },'json'); 

        return false;
    });
});
</script>

<form name="myForm" id="myForm" action="serverPage.php" method="post">
User Name : <input type="text" name="username">
Password : <input type="password" name="password">
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>


In the above statement function(o) means after successful submission of the form data the server page can send return data to JQuery in that case this parameter will take it. Initially this parameter is an array. using the array index value we can access the data of the return parameter.

For example: We are taking the parameter name as "o". In this example am sending a $response array to JQuery back after getting the data to server. It contains a "message" value. To use this message in JQuery we need to write like o.message in function.

When user fill the form data and click on submit it will send the data to "serverPage.php" using JQuery Post method.
serverPage.php:
if(isset($_POST['submit']))
{
  $data = array();
  $response = array();

  //Here verifying the data is given or not by the user, we can write this for required fields
  if(isset($_POST['username']) && isset($_POST['password'])) 
  { 
    $data['username'] = $_POST['username'];
    data['password'] = $_POST['password'];
    //Here we can perform any Database operations using this parameters and send 
    // the response as user needs
    $response['message'] = "Data received successfully";
    echo json_encode($response);
  }
  else
  {
    //This will execute if any required fields are not filled by the user, 
    // write any statements here in failed cases
    $response['message'] = "Data not received. Try again!";
    echo json_encode($response);
  }
}

After submitting the form JQuery will show a alert message. if the username and password values is given in the form then it will show "Data received successfully" if any one data is not given by user it will show alert as "Data not received". Thank you.

No comments:

Post a Comment