title: How to use jQuery Ajax to pass multiple form values to php?
body: <p>Why I can not get response from php by using jQuery Ajax?  When I click the "page" buttons, the weblink will change from:</p>
  
  <pre><code> http://localhost/jQuery1.html
  </code></pre>
  
  <p>to something like:</p>
  
  <pre><code>http://localhost/jQuery1.html?state_chosen=Alabama&amp;Type=&amp;page=1
  </code></pre>
  
  <p>However, no echo-ed results from PHP.  </p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      $(document).ready(function(){
      $("form").change(function(){
          $.ajax({
              type:"POST",
              url:"passdata.php",
              data: $('form').serialize(),
              success: function(data){
                 $('#result').html(data);
              }  });
            });  });
       &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;form &gt;
  &lt;select class="dd1" name="state_chosen"&gt;
  &lt;option selected value = ""&gt; Location &lt;/option&gt;
  &lt;option value="Alabama" &gt; US: Alabama   &lt;/option&gt;
  &lt;/select&gt;
  &lt;select class="dd2" name="type"&gt;
  &lt;option selected value = ""&gt; Type &lt;/option&gt;
  &lt;option value="Plumber" &gt; Plumber   &lt;/option&gt;
  &lt;/select&gt;
  
  &lt;button name="page" value="1" &gt;1&lt;/button&gt;
  &lt;button name="page" value="2" &gt;2&lt;/button&gt;   
  
  &lt;/form&gt;
  
  &lt;div id="result"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>passdata.php</p>
  
  <pre><code>&lt;?php
  echo '&lt;div&gt;' .$_POST['state_chosen']." &lt;br&gt;". $_POST['type']."&lt;br&gt;". $_POST['page']. '&lt;/div&gt;';
  ?&gt;
  </code></pre>