Using JQuery and AJAX to pass data to a PHP script

Question

I have an HTML form that Is only composed of a button with a value. I would like to leave it this way. I am using AJAX/JQuery to pass the form data to a PHP script. But, for some reason, the button value is not sent. What could I be doing wrong?

HTML:

<form id="friend-send" method="post" action="">
<button type="submit" class="foll" name="approve-friend" value="4"> Approve </button>
</form>

AJAX/JQUERY:

$(document).ready(function() {

    $("#friend-send").submit(function(e) {

        var $this = $(this);        
        var dataString = $this.serialize(); 

        e.preventDefault();     

        $.ajax({  
            type: "POST",  
            url: "relate.php",  
            data: dataString,
            async: false,
            success: function() {
                $this.hide();
            }
        });             

    });

});

Where is friend-request-buttons in your HTML?

Barmar
– Barmar

2014-02-11 02:50:57 +00:00
Commented Feb 11, 2014 at 2:50 — Barmar
– Barmar, Commented Feb 11, 2014 at 2:50

VIDesignz · Accepted Answer · 2014-02-11 02:51:46Z

3

JQuery won't serialize a button, use a hidden field instead

 <form id="friend-send" method="post" action="">
 <input type="hidden" name="approve-friend" value="4" />
 <button type="submit" class="foll"> Approve </button>
 </form>

Also, You need to serialze the form by id, not the button by id Instead of this

 $("#friend-request-buttons")

It should be this

 $("#friend-send")

Lastly, since you are using ajax to post, you can simplfy your form open tag to this...

 <form id="friend-send">

edited Feb 11, 2014 at 2:51

answered Feb 11, 2014 at 2:46

VIDesignz

4,8133 gold badges30 silver badges38 bronze badges

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

8 Comments

user3259283 Over a year ago

Well in my PHP script I make sure that the submit button is set, to make sure that the script only be ran if the user actually submitted the form. Will using a hidden form be as secure? Thanks.

thescientist Over a year ago

a hidden input element, not a form. You still keep the submit button.

VIDesignz Over a year ago

Like @thescientist said, its just a hidden input element

user3259283 Over a year ago

I know, but if the submit button is not passed via JQuery, then it will always not be set.

thescientist Over a year ago

you could add the readonly attribute. but I don't think it would make a difference, hidden or not whether someone could live edit the code. That's why you always validate on the server side.

|

thescientist · Accepted Answer · 2014-02-11 02:45:40Z

1

<button> tags are not supported by serialize https://api.jquery.com/serialize/

You would need to use an input of some kind. A hidden one would work.

answered Feb 11, 2014 at 2:45

thescientist

2,9581 gold badge21 silver badges15 bronze badges

Comments

Barmar · Accepted Answer · 2014-02-11 02:55:36Z

0

Don't use serialize, create the input data yourself:

var dataString = {};
var $button = $this.find("[type=submit]");
dataString[$button.attr('name')] = $button.val();

When you provide an object as the data: argument to $.ajax, jQuery will serialize it automatically.

answered Feb 11, 2014 at 2:55

Barmar

789k57 gold badges554 silver badges668 bronze badges

1 Comment

VIDesignz Over a year ago

Can you explain what is happening on the last line of your answer? And also the {} on the first line? As you can see in my answer below I am just building the dataString very archaically :/

VIDesignz · Accepted Answer · 2014-02-11 02:57:05Z

This answer would be if you are set on using the button alone

$(document).ready(function() {

$("#friend-send").submit(function(e) {

    var $this = $(this);        
    var dataString = "?" + $(this).find('button').attr('name') + "=" + $(this).find('button').attr('value'); 

    e.preventDefault();     

    $.ajax({  
        type: "POST",  
        url: "relate.php",  
        data: dataString,
        async: false,
        success: function() {
            $this.hide();
        }
    });             

    });

});

Collectives™ on Stack Overflow

Using JQuery and AJAX to pass data to a PHP script

4 Answers 4

8 Comments

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

1 Comment

Comments

Related