Send a MySQL query when pressing checkbox with AJAX

Question

I am trying to send an update query when a checkbox is pressed, using AJAX. How can I do this?

HTML imports:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="js/checkbox.js"></script>

HTML checkbox:

<td>
    <input type="checkbox" name="vehicle" value="" class="checkbox">  Ingevoerd<br>
</td>

(Yes my checkbox is in a table, I don't know if this has to be in a form.)

JavaScript code:

$(".checkbox").change(function() {
    window.alert(5 + 6);
    $.ajax({
        url: '../ingevoerd.php'
    });
});

(the window.alert is not triggered when I press the checkbox)

PHP code:

$stmt = $db->prepare('UPDATE table SET temp=0 where id = 1');
$stmt->execute();
var_dump('test');

Use .click instead of .change and before do the ajax call verify if the checkbox is checked or not — Professor Zoom
– Professor Zoom, Commented Oct 15, 2016 at 17:07
copied the .change from another question, tried .click but didn't help — sansactions
– sansactions, Commented Oct 15, 2016 at 17:09
the answer below, helped me, the alert succeeds, the query hasen't succeded yet, thanks for the info! — sansactions
– sansactions, Commented Oct 15, 2016 at 17:16

Dekel · Accepted Answer · 2016-10-15 17:13:14Z

2

I guess your javascript code runs before your html exists, so when your browser is trying to find $(".checkbox"), there aren't any elements with the checkbox class yet.

You should have the code running only after the document is ready:

$(function() {
    $(".checkbox").change(function() {
        window.alert(5 + 6);
        $.ajax({
            url: '../ingevoerd.php'
        });
    });
});

In the next example you can see that nothing will happen (because the javascript code exists before the elements are available in the DOM):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $('#d1').css('background', 'red');
</script>
<div id="d1">some block</div>

Same example, but wait for the DOM to be ready (this example will work as expected):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function() {
    $('#d1').css('background', 'red');
  });
</script>
<div id="d1">some block</div>

edited Oct 15, 2016 at 17:13

answered Oct 15, 2016 at 17:07

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

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

14 Comments

Matthew Over a year ago

I was just about to say that, but shouldn't he use document.ready() to make sure the page have finished loading? I don't know all the little tricks of Jquery.

Dekel Over a year ago

@Matthew, the $(function() { ... }); is only a short way to write $(document).ready(function() { ... });

Matthew Over a year ago

thanks! Did not know that, now it make sense why I see some people do that.

sansactions Over a year ago

I did have my scripts loaded before the html page was loaded, which was pretty dumb, have placed it under my footer and added document.ready (to b sure) but to no effect for the moment

Dekel Over a year ago

Well, I really don't know where the problem is. You should check the logs to see if you have problem in you PHP or in you Query. Currently your javascript works as expected.

|

Collectives™ on Stack Overflow

Send a MySQL query when pressing checkbox with AJAX

HTML imports:

HTML checkbox:

JavaScript code:

PHP code:

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML imports:

HTML checkbox:

JavaScript code:

PHP code:

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related