I want to pass some value from my html page to php page using ajax and print the return value in a div
HTML Code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style type="text/css">
#div1, #div2{
border: 1px solid #000;
width: 30%;
margin-left: 10%;
height: 400px;
margin-top: 20px;
float: left;
}
#nm, #cls, #roll, #dob, #submit1{
margin-top: 10px;
}
</style>
</head>
<body>
<div id="div1" class="container input-group"> <!-- Make text input and button in same row with Bootstrap -->
<form>
<table width="70%">
<tr>
<td align="right">Name : </td>
<td>
<input type="text" name="nm" id="nm" maxlength="30" class="form-control" placeholder="Name">
</td>
</tr>
<br>
<tr>
<td align="right">Class : </td>
<td>
<select class="form-control" align="center" id="cls">
<option value="0">Please Select</option>
<option value="First Year">First Year</option>
<option value="Second Year">Second Year</option>
<option value="Third Year">Third Year</option>
</select>
</td>
</tr>
<tr>
<td align="right">Roll No. : </td>
<td>
<input type="text" name="roll" id="roll" class="form-control" placeholder="Roll No." align="center">
</td>
</tr>
<tr>
<td align="right">DOB : </td>
<td>
<input type="date" name="dob" id="dob" class="form-control" placeholder="Date of Birth" align="center">
</td>
</tr>
<tr>
<td></td>
<td>
<button class="btn btn-primary" name="submit1" id="submit1">Add</button>
</td>
</tr>
</table>
</form>
</div>
<div id="div2">
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#submit1').click(function() {
var nm = $('#nm').val();
var cls = $('#cls').val();
var roll = $('#roll').val();
var dob = $('#dob').val();
$.ajax({
type: 'POST',
url: 'index.php',
data: ({ nm: nm, cls: cls, roll: roll, dob: dob }),
success: function(response) {
$('#div2').html(response);
}
});
});
});
</script>
</body>
</html>
PHP Code
<?php
$nm = $_POST['nm'];
$cls = $_POST['cls'];
$roll = $_POST['roll'];
$dob = $_POST['dob'];
$date = date_format($date, 'Y-m-d');
$now = time();
$dob = strtotime('Y-m-d', $dob);
$difference = $now - $dob;
$age = floor($difference / 31556926);
echo "Name : ". $nm;
echo "Class : ". $cls;
echo "Roll No. : ". $roll;
echo "Age : ". $age;
?>
I don't know what is wrong with my code. But after I click on "Add" button my address bar looks like this :
index.html?nm=asd&roll=1&dob=1992-08-12&submit1=
even though I am using POST method. Help is needed.
Your click function still posts the form. use Javascript's preventDefault() to counter this
$('#submit1').click(function(event) {
event.preventDefault();
var nm = $('#nm').val();
var cls = $('#cls').val();
var roll = $('#roll').val();
var dob = $('#dob').val();
$.ajax({
type: 'POST',
url: 'index.php',
data: ({ nm: nm, cls: cls, roll: roll, dob: dob }),
success: function(response) {
$('#div2').html(response);
}
});
});
You have to provide the form method as "POST" then alone it will never send the submitted data to the URL which you access.
What problem you face is that you have not specified any method to your <form> attribute and hence it takes the GET method.
First Learn the difference between GET and POST methods