Pass data to database using javascript Onclick

Question

Hi all, I am a real noob when it comes to javascript/ajax, so any help will be very appreciated. In reference to this question:

Updating a MySql database using PHP via an onClick javascript function

But mainly concerned with the answer left by Phill Sacre. I am wondering if someone could elaborate on how we are(if we can?) passing values/data through his example, using jquery. The code example left by him is as follows:

    function updateScore(answer, correct) {

      if (answer == correct) {
$.post('updatescore.php');

  }
}

...

<a onclick="updateScore(this, correct)" ...> </a>

Say for example, we are wanting to pass any number of values to the database with php, could someone give me a snippet example of what is required in the javascript function? Or elaborate on what is posted above please?

Thanks again all.

Answer 1

The simplest example I can think of is this. Make your AJAX call in your if block like this:

$.get('updatescore.php', {'score': '222'}, function(d) {
    alert('Hello from PHP: ' + d);
});

On your "updatescore.php" script, just do that: update the score. And return a plain text stating wether the update operation was successful or not.

Good luck.

P.S.: You could also use POST instead of GET.

Answer 2

What you would do is on the php server side have a page lets say its update.php. This page will be visited by your javascript in an Ajax request, take the request and put it in a database.

The php might look something like this:

<?php
mysql_connect(...)
mysql_query("INSERT INTO table 
(score) VALUES('$_GET["score"]') ")

Your javascript would simply preform an ajax request on update.php and send it the variables as get value "score".

Answer 3

Phil is not passing any values to the script. He's simply sending a request to the script which most likely contains logic to 'update' the score. A savvy person taking his test though could simply look at the HTML source and see the answer by checking to see what the anchor is doing.

To further nitpick about his solution, a set of radio buttons should be used, and within the form, a button or some sort of clickable element should be used to send the values to the server via an ajax request, and the values sent to the server can be analyzed and the status of the answer sent back to the page.

Since you're using jQuery, the code can be made unobtrusive as seen in the following example:

$('#submit_answer').click(function() {
    var answer = 'blah' // With blah being the value of the radio button
    $.get('updatescore.php',
    {'value': answer},
    function(d) {
        alert('Your answer is: ' + d') // Where d is the string 'incorrect' or 'correct'
    }
});

Enjoy.