Pass variable from Javascript/JQuery to PHP - php

Question

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)
So, I put
"<? echo $_POST['headline']; ?>"
on
<span class="save-notice">Your change has been saved! <? echo $_POST['headline']; ?></span>
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.
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.
HTML FORM
<div id="submit-form">
<form action="" id="select-block" class="general-form">
<div class="input-wrap">
<input class="clearme" name="Headline" value="Your headline here" id="headline"/>
</div>
<div class="input-wrap">
<textarea class="clearme" name="Sub-Headline" id="subheadline">Sub Headline Here</textarea>
</div>
<input type="submit" class="submit-btn" value="SAVE" />
<span class="save-notice">Your change has been saved! <? echo $_POST['headline']; ?></span>
</form>
</div>
And the JQUERY CODE
<script type="text/javascript">
$(function() {
$(".save-notice").hide();
$(".submit-btn").click(function() {
var headline = $("input#headline").val();
var subheadline = $("textarea#subheadline").val();
var dataString = 'headline='+ headline + '&subheadline=' + subheadline;
alert(dataString)
$(".save-notice").hide();
$.ajax({
type: "POST",
url: "",
data: dataString,
success: function() {
$(".save-notice").show();
}
});
return false;
});
});
</script>
I saw on several example/tutorial on the internet if it can be done like that. Can you advise?

Answer 1

See
http://api.jquery.com/serialize/
Instead of adding code to click handler
$(".submit-btn").click(function() { ... }
use submit handler
$("#select-block").submit(function() {
// your code
var dataString = $(this).serialize();
});

Answer 2

The $_POST['headline'] in your save-notice was generated when the page was loaded. The PHP ran, and output an HTML file.
When you make your AJAX request, the page returned to the AJAX call would contain your new value, but your current page does not.
You can either post to a different page, have that page return a value, then use JavaScript to change the value of the div.
Or, you can try to extract the data from the returned HTML page.
$(".save-notice").hide();
$.ajax({
type: "POST",
url: "",
data: dataString,
dataType: 'html', // the page returned
success: function(data) {
// get the data from the returned page
$(".save-notice").html($('.save-notice', data).html());
$(".save-notice").show();
}
});

Answer 3

Using Firebug's console feature, you can see the server's response to your AJAX call. The response is evaluating the $_POST var like you want it to, but since the AJAX call happens behind the scenes, you don't see it.
To get your script working without much modification, try this (no PHP is necessary):
Replace <? echo $_POST['headline']; ?> with <span id="yourheadline"><span>
Insert $('#yourheadline').html(headline); on the line before $(".save-notice").show();
Another thing I would suggest is serializing your form to create the dataString var, instead of doing it input by input. If your inputs were named headline and subheadline instead of Headline and Sub-Headline...
var dataString = $("#select-block").serialize();
...would accomplish the same thing as:
var headline = $("input#headline").val();
var subheadline = $("textarea#subheadline").val();
var dataString = 'headline='+ headline + '&subheadline=' + subheadline;

Answer 4

You already have the values in the javascript variables:
var headline = $("input#headline").val();
var subheadline = $("textarea#subheadline").val();
You can do something like this:
$.ajax({
type: "POST",
url: "foo.php",
data: {headline: headline, subheadline: subheadline},
success: function() {
$(".save-notice").show();
}
});
or like this:
$.post("foo.php", { headline: headline, subheadline: subheadline },
function(data) {
$(".save-notice").show();
}
);
You can see that, data is passed in the key value pair:
{ headline: headline, subheadline: subheadline }
You can access it using $_POST like $_POST['headline'] and $_POST['subheadline']