How to store a passed variable into database when 'Add' button is clicked?

Question

I have only recently started coding so any help would be appreciated. I am practicing an online book club and have used Google books to obtain an ISBN code for every book.

<?php 
$ISBN = $_GET['isbn'];
?>

The books appear with their information through the passed ISBN code passed from the previous page.

<script>
//script to find the book details for the ISBN passed
function findBook(postedISBN)
{ 
var findISBN = postedISBN;



//if ISBN not passed, display error
if(findISBN == null)
{
    alert("No ISBN!");
}
//else if ISBN passed correctly, find its details using the Google Books API and display them
else
{   
    //JQuery call to Google Books API passing in the ISBN
    $.get("https://www.googleapis.com/books/v1/volumes?q=isbn:" + findISBN,function(response)
    {
        for(i=0;i<response.items.length;i++)
        {
            //get values needed and store in variables - this is just a small selection of all available - you should modify this to get the details you want to display on the page
            var title=response.items[i].volumeInfo.title;  
            var subtitle=response.items[i].volumeInfo.subtitle;  
            var publishedDate=response.items[i].volumeInfo.publishedDate;  
            var description=response.items[i].volumeInfo.description;
            var averageRating=response.items[i].volumeInfo.averageRating;
            var imageLinks= response.items[i].volumeInfo.imageLinks;
            var infoLink = response.items[i].volumeInfo.infoLink

            //set values of HTML fields to the values found in API
            document.getElementById("isbn").innerHTML = findISBN;
            document.getElementById("title").innerHTML = title;
            document.getElementById("subtitle").innerHTML = subtitle;
            document.getElementById("publishedDate").innerHTML = publishedDate;
            document.getElementById("description").innerHTML = description;
            document.getElementById("averageRating").innerHTML= averageRating;
            document.getElementById("infoLink").innerHTML= infoLink;




        }
    }); 
}//else 
}//findBook

</script>

I now want to allow the user to store the book by the ISBN code into the MySQL database, when they click the 'Add to 'I want to read' button.

The database table is called bookswantstoread; bookswantstoreadID, userID, ISBN . The code for the bookdetails.php page

  <!-- call the findBook function when the page loads -->
    <script> window.onload=findBook(<?php echo $ISBN;?>); </script>


<!--HTML elements in which book values go -->

    <div style="font-family: arial" class="container">  

<p id="label1"><b>ISBN: </b></p>
<p id="isbn"></p>
<p id="label2"><b>Title: </b></p>
<p id="title"></p>
<p id="label3"><b>Subtitle: </b></p>
<p id="subtitle"></p>
<p id="label4"><b>Published Date: </b></p>
<p id="publishedDate"></p>
<p id="label5"><b>Description: </b></p>
<p id="description"></p>
<p id="label6"><b>Average Rating</b></p>
<p id="averageRating"></p>


<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="wanttoread.php">Add to 'Want to Read'</a>



</body>

</html>

My question is basically how do I store the passed varaible (ISBN), into the database table (bookswantstoread) when the user clicks the button 'Add to 'Want to Read'.

You'll need to read up on databases / tables. Check out [`mysqli`](http://php.net/manual/en/book.mysqli.php) or [PDO](http://php.net/manual/en/book.pdo.php). — Script47, May 29 '18 at 14:59
It depends. If you submit your form, you can get the value passed and update/insert into your table. If you want the user to remain on the page, you'll use AJAX to send the value to a script on your server. There is way to much to convey before you do some more research. Google mysqli functions and AJAX. I'd suggest also looking at jQuery — Sloan Thrasher, May 29 '18 at 15:01

score 0 · Answer 1 · answered May 29 '18 at 18:21

Please make this edit in your code. (I have added a class and updated the href)

<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger ajax-link" href="wanttoread.php?id=<?php echo $ISBN;?>">Add to 'Want to Read'</a>



</body>

</html>

Then in the wanttoread.php, write the insert query. Assuming you have jquery, add this script.

$( '.ajax-link' ).on( 'click', function( e) {
  e.preventDefault();
  $.ajax({url: $(this).href, success: function(result){
            $(this).html("Added to List!");
        }});
});

Its been a while I have played around with jquery... so if there is any error, just post it here and i will sort it out. — K3V, May 29 '18 at 18:23

How to store a passed variable into database when 'Add' button is clicked?

1 Answers1