I'm new to AJAX and JavaScript, but decided to tackle sending a value based on an HTML "" tag using Ajax to a Python handler. Below is my code, simulated from this site. The problem I'm having is understanding when a box is "checked" vs "unchecked", how does the value get passed, when I have "unchecked" in the input tag? I'm not getting the connection as I want to make sure that whatever the user clicks gets passed through AJAX to my Python Handler.
send_data = function(status) {
$.ajax({
url: "/subscription",
dataType: "json",
data: {'status' : status},
type: "POST",
cache: false
}).done(function(data, status, xml) {
var obj = jQuery.parseJSON(data);
alert(obj.success);
}).fail(function(jqXHR, textStatus, errorThrown) {
}).always(function() {
});
}
$(document).ready(function() {
$("#subscription").submit(function() {
var cb = $("input#switch-1");
if (cb.is("checked")) {
send_data(cb.val());
} else {
send_data(cb.val());
}
return false;
});
});<form id="subscription" action="">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" name="status" class="mdl-switch__input" id="status" unchecked />
<span class="mdl-switch__label">USEREMAIL Subscribed</span>
<input type="submit" value="Submit" />
</form></div>
First of all, the correct selector is :checked.
Аnd you should pass checkbox value to send_data() function only when it's checked, otherwise your condition is irrelevant - you are doing the same thing for checked and not checked inputs.
So, your code should be something like this:
if (cb.is(":checked")) {
send_data(cb.val());
} else {
send_data(null);
}
But if all you need is pass form values to server, you don't need to handle checkbox manually, you can just do this:
var send_data = function(data) {
$.ajax({
url: "/subscription",
dataType: "json",
data: data,
type: "POST",
cache: false
}).done(function(data, status, xml) {
var obj = jQuery.parseJSON(data);
alert(obj.success);
}).fail(function(jqXHR, textStatus, errorThrown) {
}).always(function() {
});
}
$("#subscription").submit(function() {
send_data($(this).serialize());
});
Note, that if checbox is not checked, it's value won't be sent to server (it's a default browser behaviour). So you can just check presense of status field in your backend script.
Your current code can be reduced like this, you are doing the verification in vain, in both cases you are sending the same thing...
$("#subscription").submit(function() {
var cb = $("input#switch-1");
send_data(cb.val()); //your current code can be reduced like this
return false;
});
If you want to see what is passed, just print with python what you receive via the checkbox name...