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.
