MyCodeStock

Hiiiii, we alll know that we use Ajax, JQuery, Javascript etc to perform some actions like data sending on next page or form validations on page without refreshing that page. So here in this post, I wiil be teaching how to submit a form and sending and receiving data through Ajax without refreshing of page.

 The code given below sends a data on next page on clicking the form (id="form1") submit button and displays the data coming from next page (post1.php) which is echoed or printet on that page.

Form Serialize method :

<script type=”text/javascript”>
$(document).ready(function(){
$(“#form1″).submit(function(){            // form1 is the id of form
var senddata=$(“#form1″).serialize();
//alert(senddata);
$.ajax({
url: ‘post1.php’,
data:senddata,
type:’POST’,
success: function(data){
//alert(data);
}
});
return false;
})
});
</script>

On  the Post1.php just write :
<?php
echo ‘<pre>’;
print_r($_POST);
echo ‘</pre>’;
?>

Sending Individual Form Values:

<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
firstname=$(“#fname”).val();
lastname=$(“#lname”).val();
$.post(‘./post3.php’,{ name: firstname, time: lastname },
function(data){
//                    alert(data);
$(‘.result’).html(data)
}
)
})
});
</script>
On  the Post3.php just write :
<?php
echo ‘<pre>’;
print_r($_POST);
echo ‘</pre>’;
?>

Sending JSON values:

$(document).ready(function(){
$.ajax({
url: ‘post4.php’,
data:{‘name’:'Arun’,'profession’:'Programmer’},
type:’POST’,
dataType: “json”,
success: function(data1,textStatus,obj){
//output = $.parseJSON(data1)
console.log(data1.name);
console.log(textStatus);
//console.log(obj);
}
});
});
</script>
On  the Post4.php just write :
<?php
echo json_encode($_POST);
?>