Question

I have this ajax/jquery code :

var headline = $("input#headline").val();
var subheadline = $("textarea#subheadline").val();
var pics = $("input#pics").val();   
var dataString = 'headline='+ headline + '&subheadline=' + subheadline + '&pics=' + pics;

$(".save-notice").hide();
$.ajax({  
type: "POST",  
url: "web-block/forms/process-001.php",
data: dataString,
success: function() {             
$(".save-notice").show();
$(this).parents(".manage-content-wrap").next(".ribbon-content").fadeIn();
}  
});  

on the other side, I have this HTML form :

<form action="" id="select-block" class="general-form">
<div class="input-wrap">
    <input class="clearme" name="Headline" value="<?php echo $Headline;?>" id="headline"/>
</div>
<div class="input-wrap">
    <textarea class="clearme" name="Sub-Headline" id="subheadline"><?php echo $SubHeadline;?></textarea>
</div>
<label>Bottom Left Image</label>
<div class="up-mask">
    <span class="file-wrapper">
      <input type="file" name="Pics" class="photo" id="pics" />
      <span class="button">
         <span class="default-txt">Upload Photo</span>
      </span>
    </span>
</div><!-- .up-mask -->

<input type="hidden" name="Key" value="<?php echo $Key;?>"/>
<input type="submit" class="submit-btn" value="SAVE" />
<span class="save-notice">Your changed has been saved!</span>
</form>

as you can see process-001.php is the file which process all variables from HTML form. but I have difficulties to ‘catch’ $Headline and $SubHeadline submitted by that form, which actually ‘manipulates’ by Ajax too…

I tried using this code on process-001.php :

$Headline = $_POST['Headline'];
$SubHeadline = $_POST['Sub-Headline'];

but seems that those variables are empty… how to get variables submitted by AJAX correctly?

Answer 1

headline and Headline are not the same key. Your keys need to match exactly.

Also, as building the strings by hand can become extremely tricky very quickly, you may want to consider using an object literal or serialize():

data: {
    'foo': 'bar',
    'baz': [1, 2, 3]
}

Would have $_POST['foo'] === 'bar' and $_POST['baz'] === array(1, 2, 3)

You also shouldn’t assume that any kind of inputs exist:

$headline = (isset($_POST['headline'])) ? $_POST['headline'] : null;

Otherwise you can get index undefined notices.

Also, since you’re not using any of the options that $.post doesn’t expose, you could just use $.post for shorthand:

$.post("web-block/forms/process-001.php", {
    data: $("#select-block").serialize(),
    function() {             
        $(".save-notice").show();
        $(this).parents(".manage-content-wrap").next(".ribbon-content").fadeIn();
    }  
});

Or:

$.post("web-block/forms/process-001.php", {
    data: {
        Headline: $("#headline").val(), //input#headline is redundant -- getting a node by ID is extremely efficent; getting by tag is not
        'Sub-Headline': $("#subheadline").val()
    },
    function() {             
        $(".save-notice").show();
        $(this).parents(".manage-content-wrap").next(".ribbon-content").fadeIn();
    }  
});