title: jQuery Ajax passing value on php same page
body: <p>I am kinda confused on it, when trying to send value on the same page.</p>
  
  <pre><code> &lt;script&gt;
        $("select[name='sweets']").change(function () {
        var str = "";
        $("select[name='sweets'] option:selected").each(function () {
              str += $(this).text() + " ";
  
            });
  
              jQuery.ajax({
              type: "POST",
              data:  $("form#a").serialize(),
  
              success: function(data){
                  jQuery(".res").html(data);
  
                  $('#test').text($(data).html());
  
  
              }
              });  
              var str = $("form").serialize();
              $(".res").text(str);
      });
      &lt;/script&gt;
   &lt;div id="test"&gt;
   &lt;?php
    echo $_POST['sweets'];
    ?&gt;
    &lt;/div&gt;
  &lt;form id="a" action="" method="post"&gt;
    &lt;select name="sweets" &gt;
     &lt;option&gt;Chocolate&lt;/option&gt;
     &lt;option selected="selected"&gt;Candy&lt;/option&gt;
     &lt;option&gt;Taffy&lt;/option&gt;
     &lt;option&gt;Caramel&lt;/option&gt;
     &lt;option&gt;Fudge&lt;/option&gt;
    &lt;option&gt;Cookie&lt;/option&gt;
  &lt;/select&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Well it will display if its in the top of html tag but if its inside the body it will display null.</p>