How to send data of a form without refreshing using AJAX?

Question

I have a form that contains just two buttons, a like and a dislike button. Each button gets the ID of a product in the 'action' section of the button and I want to pass that to a php file that contains a pdo function to submit a like/dislike to my database, but I don't want the page to refresh.

I am really new to AJAX and have no clue on how to use it to solve this problem. Below is the relevant code, I'm wondering if I can get any tips on how to use AJAX with the code I have?

index.html

<form id="likeDislike" class="form-horizontal" action="index.php?id=' . $productData->getID() .'" method="post">
    <button id="like" type="submit" name="like" value="like" class="btn btn-success"><i class="glyphicon glyphicon-thumbs-up"></i></button>                            
    <button id="dislike" type="submit" name="dislike" value="dislike" class="btn btn-danger"><i class="glyphicon glyphicon-thumbs-down"></i></button>
</form>

index.php

if (isset($_POST["like"])) {
    $productDataSet = new productDataSet();    
    $productDataSet->addLike();
}    
if (isset($_POST["dislike"])) {
    $productDataSet = new productDataSet();    
    $productDataSet->addDislike();
}

possible duplicate of [jQuery Ajax POST example with PHP](http://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php) — Alex, Feb 25 '15 at 20:10

score 0 · Answer 1 · answered Feb 25 '15 at 20:15

why you don't do it in jquery? you can do it like this..

$('#like').click(function() {

                        var input = $("<input>").attr(
                                "type", "hidden").attr(
                                "name", "update_like").val(
                                JSON.stringify("1"));
                        $('#likeDislike').append($(input));
                    })

$('#dislike').click(function() {

                        var input = $("<input>").attr(
                                "type", "hidden").attr(
                                "name", "update_dislike").val(
                                JSON.stringify("1"));
                        $('#likeDislike').append($(input));
                    })

so at the server side u will receive the form with input update_like or update_dislike and you just add it.

score 0 · Answer 2 · answered Feb 25 '15 at 20:38

You can do this using jQuery. Just add jQuery to your javascript project snd use this code for posting data to a php file and get the response from it.

We consider that you have an element with id of btnLike and btnDisLike. That they have a custom property named postID.

This is the jQuery code:

$(document).ready(function(){
     $("#btnLike").click(function(){
         $.post("./submit.php",{Request : "Like"  ,  PostID : $(this).attr("postID")},function(data,status){
             // data is the response
         });
     });


     $("#btnDisLike").click(function(){
         $.post("./submit.php",{Request : "DisLike"  ,  PostID : $(this).attr("postID")},function(data,status){
             // data is the response
         });
     });
});

You can use Request and PostID in the $_POST global variable to access the passed data.

How to send data of a form without refreshing using AJAX?

2 Answers2