Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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?

share|improve this question
The problem has been solved. The value can be passed actually. And can't be echoed on that page – Yansen Tan Oct 31 '12 at 10:11

4 Answers

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();

});
share|improve this answer

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();
    }
});
share|improve this answer

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):

  1. Replace <? echo $_POST['headline']; ?> with <span id="yourheadline"><span>
  2. 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;
share|improve this answer

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']

share|improve this answer
Hi rkm, how do I get the data to be used on PHP variable? – Yansen Tan Oct 31 '12 at 3:16
I have edited the answer for same.. – user1680049 Oct 31 '12 at 6:38

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.