title: Pass variable from Javascript/JQuery to PHP
body: <p>I'm still new to JQuery and trying to learn how to submit form without page refresh...
  What I want is, when the form is submitted, the value of what I type on "headline" and "subheadline" can be passed into php variable (So I can echo/insert data to database, etc)</p>
  
  <p>So,  I put </p>
  
  <pre><code>"&lt;? echo $_POST['headline']; ?&gt;" 
  </code></pre>
  
  <p>on </p>
  
  <pre><code>&lt;span class="save-notice"&gt;Your change has been saved! &lt;? echo $_POST['headline']; ?&gt;&lt;/span&gt;
  </code></pre>
  
  <p>but when I fill the form and click the submit button, it only shows "Your change has been saved!". Which means, the variable can't be passed to PHP.</p>
  
  <p>The HTML and the JS is combined into 1 file. I left the URL method on .ajax because it is processed in the same file.</p>
  
  <p><strong>HTML FORM</strong></p>
  
  <pre><code>&lt;div id="submit-form"&gt;
  &lt;form action="" id="select-block" class="general-form"&gt;
  &lt;div class="input-wrap"&gt;
      &lt;input class="clearme" name="Headline" value="Your headline here" id="headline"/&gt;
  &lt;/div&gt;
  &lt;div class="input-wrap"&gt;
      &lt;textarea class="clearme" name="Sub-Headline" id="subheadline"&gt;Sub Headline Here&lt;/textarea&gt;
  &lt;/div&gt;
  
  &lt;input type="submit" class="submit-btn" value="SAVE" /&gt;
  &lt;span class="save-notice"&gt;Your change has been saved! &lt;? echo $_POST['headline']; ?&gt;&lt;/span&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>And the JQUERY CODE</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $(function() {  
    $(".save-notice").hide();
    $(".submit-btn").click(function() {  
  
      var headline = $("input#headline").val();
      var subheadline = $("textarea#subheadline").val();
      var dataString = 'headline='+ headline + '&amp;subheadline=' + subheadline;
      alert(dataString)
  
  
          $(".save-notice").hide();
          $.ajax({  
          type: "POST",  
          url: "",
          data: dataString,
          success: function() {  
              $(".save-notice").show();
          }  
      });  
  return false;  
    });  
  });  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I saw on several example/tutorial on the internet if it can be done like that. Can you advise?</p>