- Visit the JQuery site and download the JQuery API. ( Direct link to the API. Just save the page as .js)
- Link the JQuery API with your web page where the form is located.
- Write a Java Script function to collect data from the form by the IDs of the form items and send them to the PHP script.
Form.php
<html>
<head>
<title></title>
<script type="text/javascript" src="jScript/jquery-1.9.1.min.js"></script> <!-- Link to the JQuery API-->
<script>
<!--JavaScript Function-->
function formSubmit(){
$.ajax({ // create an AJAX call...
type: "POST", // Submitting Method is POST
url: "collectData.php", // To where the data should be submitted
data: { firstName: $('#fName').val(), //Value in the textbox which is identified by ID 'fName' will be transmitted to variable firstName in the PHP script
lastName: $('#lName').val(), //Value in the textbox which is identified by ID 'lName' will be transmitted to variable lastName in the PHP script
age: $('#age').val(), // Value in the textbox which is identified by ID 'age' will be transmitted to variable age in the PHP script
},
success: function(response) { // on success..
alert(response); // parameter response retrives any data which are echo by the PHP script
}
});
return false;
}
</script>
</head>
<body>
<form onsubmit="return formSubmit()"> <!-- formSubmit() will be called at the event of click on the submit button of the particular form -->
<table>
<tr>
<td>First Name :</td>
<td><input type="text" id="fName"></td>
</tr>
<tr>
<td>Last Name :</td>
<td><input type="text" id="lName"></td>
</tr>
<tr>
<td>Age :</td>
<td><input type="text" id="age"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>
collectData.php
<?php
$firstName=$_POST['firstName']; //Catch the data from form.php and store it in the particular variable
$lastName=$_POST['lastName'];
$age=$_POST['age'];
//Now we have stored the required data in the PHP script. Anything can be done on that data with PHP.
echo("Success"); // This statement will be returned to the parameter response.
?>
With this method you will not be re-directed to the PHP file as the traditional way. Have fun !!!!!
No comments:
Post a Comment