How To Get Variables Submitted by AJAX Using PHP Correctly?

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?

Ashish Bhanderi · Accepted Answer · 2012-11-08 05:21:43Z

4

Try datastream like

var dataString = {
                   headline: headline,
                   subheadline: subheadline,
                   pics:pics
                };

for fatching in php you need to use

$Headline = $_POST['headline'];

$SubHeadline = $_POST['subheadline'];

and it will work fine

edited Nov 8, 2012 at 5:21

answered Nov 8, 2012 at 5:15

Ashish Bhanderi

5171 gold badge6 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ben Over a year ago

...this still wouldn't work because he requests $_POST['Headline'].

Ashish Bhanderi Over a year ago

@Ben he has created dataString with headline. So, in post they will receive using headline only.

Corbin · Accepted Answer · 2012-11-08 05:18:11Z

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

Ben · Accepted Answer · 2012-11-08 05:13:45Z

2

$_POST variables are case-sensitive - your variables on the ajax side are lowercase, the PHP side is capitalized.

answered Nov 8, 2012 at 5:13

Ben

57.6k50 gold badges187 silver badges229 bronze badges

2 Comments

Saint Robson Over a year ago

thanks bro, I didn't realize I made some typo here... thanks again!

Ben Over a year ago

Welcome, welcome, although @Corbin had me by 10 seconds...and a series of edits with increasingly helpful information ;)

Dagvadorj · Accepted Answer · 2012-11-08 05:22:52Z

1

Are you sure that process-001.php is ever requested? Because, one of the possibilities is that when you click the submit button, the wrapping form has been submitted with empty action.

A safer way is

<input type="submit" class="submit-btn" value="SAVE" onclick="return false;" />

And

<script type="text/javascript">
$('form#select-block input:submit').click(function() {
  // ajax goes here
});
</script>

edited Nov 8, 2012 at 5:22

answered Nov 8, 2012 at 5:17

Dagvadorj

3064 silver badges14 bronze badges

Collectives™ on Stack Overflow

How To Get Variables Submitted by AJAX Using PHP Correctly?

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related