Checkbox trouble in jQuery, AJAX and MySQL

Question

I have some trouble sending the value from a variable set with a checkbox to my MySQL database.

Ok.

I have a checkbox, e-mail field and a button:

    <label><input type="checkbox" id="emailSubCheck"> Check me</label>

    <input type="text" class="form-control email-field" id="emailInput" name="email" placeholder="Your e-mail...">

    <button id="sendReportAsMail" class="btn btn-default" type="button">Send</button>

I then run this jQuery (it is the checked variable causing me trouble. It always returns 0 to the database. No matter what I do):

   $(document).ready(function() {
var checked;
function checkEmailSub() {

$('#emailSubCheck').click( function() {
  if ($('#emailSubCheck').is(':checked')) {
      checked = 1;
    } else {
      checked = 0;
    }
  });
}
checkEmailSub();

$("#sendReportAsMail").click(function(){

var email = $('#emailInput').val();

    $.ajax({
        type:"POST",
        url:"sendSubmits.php",
        data:"email="+email+"&checked="+checked, 
          success:function(data){
          console.log('Ok. So data have been submitted and as I get it. Checked value is now ' + checked);
        }
    });
 });
});

In the log it is perfectly showing 1 if I checked the box before submitting and 0 if I didn't.

This makes me believe that the jQuery (although not perfect) is working.

In my sendSubmits.php I have:

$email=$_POST["email"];
$checked=$POST["checked"];

$sql = "INSERT INTO sendsubmits(email, checked) VALUES ('$email', '$checked')";

(Notice: The DB Connection isn't included. The e-mail is perfectly inserted to the database on every submission. Just the var checked value is missing)

The checked column in my MySQL database is INT(1). No matter what i try it just always registers a 0.

What am I doing wrong here?

Thanks a bunch in advance!

Try not inserting it as a string, i.e. remove the quotes around it. — Musa
– Musa, Commented May 21, 2016 at 21:08
What is $('#emailSubCheck')? It isn't shown in html. What is value of checked being sent? can inspect data sent in actual request browser dev tools network or log it to console — charlietfl
– charlietfl, Commented May 21, 2016 at 21:11
I've tried removing quotes like this $sql = "INSERT INTO sendsubmits(email, checked) VALUES ('$email', $checked)"; Unfortunately didn't work. Do I have to parse it as an integer in my jQuery script also? Sorry for ID confusion. I pasted the wrong HTML at first. It is supposed to be ID="emailSubCheck" in the checkbox. — Mark Buskbjerg
– Mark Buskbjerg, Commented May 21, 2016 at 21:18
It is worth pointing out that your SQL query is insecure, and it is vulnerable to SQL Injection. Perhaps you simply omitted the escaping and sanitization to simplify your question, but if not, please look into SQL safety techniques. — Spencer D
– Spencer D, Commented May 21, 2016 at 21:26
Thanks for pointing out Spencer. I knew there was a problem. But I'm not quite sure how to fix it yet. It's next step. If you have a great read on it I'd love a link:) — Mark Buskbjerg
– Mark Buskbjerg, Commented May 21, 2016 at 21:30

Sofiene Djebali · Accepted Answer · 2016-05-21 21:10:12Z

2

You put the wrong ID in your javascript, try to change the ID of your input like so :

HTML

<label><input type="checkbox" id="emailSubCheck"> Check me</label>

And run the checkEmailSub() function just before making your ajax request to refresh the checked variable.

JAVSCRIPT

$("#sendReportAsMail").click(function(){

var email = $('#emailInput').val();
checkEmailSub(); //Add this to refresh the checked variable.
    $.ajax({
        type:"POST",
        url:"sendSubmits.php",
        data:"email="+email+"&checked="+checked, 
          success:function(data){
          console.log('Ok. So data have been submitted and as I get it. Checked value is now ' + checked);
        }
    });
 });
});

You also forgot the _ in your POST variable, replace this :

PHP

$checked=$POST["checked"];

with this :

$checked=$_POST["checked"];

answered May 21, 2016 at 21:10

Sofiene Djebali

4,5481 gold badge24 silver badges28 bronze badges

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

1 Comment

Mark Buskbjerg Over a year ago

Yeah! It worked. Thanks a bunch. You saved me a headache.

Maksim Volkov · Accepted Answer · 2016-05-21 22:29:14Z

2

Seems like you forgot the "_" symbol here:

$checked=$_POST["checked"];

And the ids "emailSubCheck" (javascript) and "emailSubscribe" (html) are different.

And also everything can be done in much easier way:

$(document).ready(function() {
  $("#sendReportAsMail").click(function(){

    var email = encodeURIComponent($('#emailInput').val());
    var checked = $("#emailSubscribe").prop("checked") ? 1 : 0;
    $.ajax({
      type:"POST",
      url:"sendSubmits.php",
      data:"email="+email+"&checked="+checked, 
      success:function(data){
        console.log('Ok. So data have been submitted and as I get it. Checked value is now ' + checked);
      }
    });
  });
});

edited May 21, 2016 at 22:29

answered May 21, 2016 at 21:13

Maksim Volkov

1,5661 gold badge10 silver badges4 bronze badges

1 Comment

Mark Buskbjerg Over a year ago

Thanks. Yes. Your suggestion seems way easier. I'll try and rewrite my own code in that way (I have bunch of other variables entering. Just cleaned up for the sake of posting it here). Thanks for optimization along the way. That's so cool!

Collectives™ on Stack Overflow

Checkbox trouble in jQuery, AJAX and MySQL

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related