ajax to post data and run php sql query on click

Question

I'm trying to get it so when a button is pressed it runs a PHP function without reloading the page.

I have this button:

<div class= "obutton feature2" data-id="<?php echo $bookID;?>">
    <button>Reserve Book</button>
</div>

Which I want to run:

<script>
    $('button').click(function() 
    {
        var book_id = $(this).parent().data('id'),
        result = "Book #" + book_id + " has been reserved.";
        $.post('reserbook.php', 'book_id');    
        $('.modal-box').text(result).fadeIn(700, function() 
        {
            setTimeout(function() 
            {
        $('.modal-box').fadeOut();
            }, 2000);
        });
    });
</script>

The PHP file is, reservebook.php:

<?php
session_start();
$conn = mysql_connect('localhost', 'root', '');
mysql_select_db('library', $conn);
if(isset($_POST['jqbookID']))
{
    $bookID = $_POST['jqbookID'];
    mysql_query("INSERT INTO borrowing (UserID, BookID, Returned) VALUES
    ('".$_SESSION['userID']."', '".$bookID."', '3')", $conn);
}
?>

The js runs fine and makes the modal box fade then out displaying the variable passed to it, I just don't know how to get the post working.

I've been trying to udnerstand looking at other answers on questions such as calling php function from jquery? and How to pass jQuery variables to PHP variable?

I'm also not sure if I need a ajax specific script to be called at the start as right now all I have is

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>

for my jquery.

It is probably something very simply, a rookie mistake, so all help is appreciated.

Parixit · Accepted Answer · 2013-12-12 11:42:35Z

0

<script>
    //called when button is clicked
    $('button').click(function() 
    {

        var book_id = $(this).parent().data('id'),
        result = "Book #" + book_id + " has been reserved.";

       //set parameter which you want to pass, url to be requested
        $.ajax({ url: 'reserbook.php',
             data: "book_id="+book_id,
             type: 'post',
             success: function(result) {
                  //after success it will be here and server have to send some data to be handled
                          alert(result);
                 $('.modal-box').text(result).fadeIn(700, function() 
                {
                   setTimeout(function() 
                {
                $('.modal-box').fadeOut();
                }, 2000);
                });
             }
        });
    });
</script>

edited Dec 12, 2013 at 11:42

answered Dec 12, 2013 at 11:36

Parixit

3,8193 gold badges39 silver badges65 bronze badges

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

4 Comments

Vereonix Over a year ago

So, does that go with in my current script in place of where I have $.post? because on its own it doesn't know to run on click or what data to send. A lil' explanation with answers would be great.

Parixit Over a year ago

@Tom Please check my update with comments. Ask me if you still have doubts

Vereonix Over a year ago

Thank you for the update, sorry if I came across kinda dickish. Using the script you posted nothing happens now :/

Parixit Over a year ago

@Tom Please go through jquery documentation

Morteza Edalati · Accepted Answer · 2013-12-12 11:46:48Z

0

What are you posting to reservebook.php? book_id is a string.You should send data in json or xml format to the server or using a query like key1=value1&key2=value2. $.post is a shortcut function i think it's better to use $.ajax and specify the type attribute POST.

answered Dec 12, 2013 at 11:46

Morteza Edalati

951 silver badge8 bronze badges

1 Comment

Vereonix Over a year ago

So essentially what parixit posted, though when I try it, nothing happens, not even the modal box anymore.

fxbt · Accepted Answer · 2013-12-12 13:07:48Z

0

You have to add a parameter to the post function to get the postdata in your php

{ jqbookID: book_id }

Try this :

$('button').click(function() 
{

    var book_id = $(this).parent().data('id'),
    result = "Book #" + book_id + " has been reserved.";

    $.post('reservebook.php', { jqbookID: book_id  }, function() {

        $('.modal-box').text(result).fadeIn(700, function() 
        {
            setTimeout(function() 
            {
        $('.modal-box').fadeOut();
            }, 2000);
        });
    });
});

edited Dec 12, 2013 at 13:07

answered Dec 12, 2013 at 11:41

fxbt

2,59621 silver badges19 bronze badges

6 Comments

Vereonix Over a year ago

hmmmm, now nothing happens :/

Vereonix Over a year ago

Nothing still happens, could the script be made so it just posts the data and doesn't do the modal box, to try and trouble shoot whats up. Though its clearly something to do with ajax not working for me I think.

fxbt Over a year ago

I used the php file reserbook.php just like in your script but i just saw that the real name of the file is reservebook.php. Change it in the post function.

Vereonix Over a year ago

Yeah I noticed you missed spelled it :), but still nothing :/, I feel it must be something outside of the script and php, something just stopping the ajax from working. I have the script at the bottom of my body as the script with just the modal box wouldn't work elsewhere, could that affect it?

fxbt Over a year ago

Try to call the post function without any callback to see if it works. $.post('reservebook.php', { jqbookID: book_id });

|

Collectives™ on Stack Overflow

ajax to post data and run php sql query on click

3 Answers 3

4 Comments

1 Comment

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related