title: Pass value from html to php page using ajax and print the return value in div
body: <p>I want to pass some value from my html page to php page using ajax and print the return value in a div</p>
  
  <p>HTML Code :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;style type="text/css"&gt;
  
  #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;
  }
  
  &lt;/style&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
     &lt;div id="div1" class="container input-group"&gt; &lt;!-- Make text input and button in same row with Bootstrap --&gt;
  
          &lt;form&gt;
              &lt;table width="70%"&gt;
  
                  &lt;tr&gt;
                      &lt;td align="right"&gt;Name : &amp;nbsp;&lt;/td&gt;
                       &lt;td&gt;
                          &lt;input type="text" name="nm" id="nm" maxlength="30" class="form-control" placeholder="Name"&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;br&gt;
  
                  &lt;tr&gt;
                      &lt;td align="right"&gt;Class : &amp;nbsp;&lt;/td&gt;
                       &lt;td&gt;
                          &lt;select class="form-control" align="center" id="cls"&gt;
                              &lt;option value="0"&gt;Please Select&lt;/option&gt;
                              &lt;option value="First Year"&gt;First Year&lt;/option&gt;
                              &lt;option value="Second Year"&gt;Second Year&lt;/option&gt;
                              &lt;option value="Third Year"&gt;Third Year&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td align="right"&gt;Roll No. : &amp;nbsp;&lt;/td&gt;
                       &lt;td&gt;
                          &lt;input type="text" name="roll" id="roll" class="form-control" placeholder="Roll No." align="center"&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td align="right"&gt;DOB : &amp;nbsp;&lt;/td&gt;
                       &lt;td&gt;
                          &lt;input type="date" name="dob" id="dob" class="form-control" placeholder="Date of Birth" align="center"&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td&gt;&lt;/td&gt;
                       &lt;td&gt;
                          &lt;button class="btn btn-primary" name="submit1" id="submit1"&gt;Add&lt;/button&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
              &lt;/table&gt;
  
          &lt;/form&gt;
  
     &lt;/div&gt;
  
     &lt;div id="div2"&gt;
  
     &lt;/div&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  $(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);
      }
  });
  });
  });
  
  &lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>PHP Code</p>
  
  <pre><code>&lt;?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;
  
  ?&gt;
  </code></pre>
  
  <p>I don't know what is wrong with my code. But after I click on "Add" button my address bar looks like this :</p>
  
  <pre><code>index.html?nm=asd&amp;roll=1&amp;dob=1992-08-12&amp;submit1=
  </code></pre>
  
  <p>even though I am using POST method. Help is needed.</p>