I can receive a checkbox (blackbox) state like true or false in the browser developer console correctly with
$("#blackbox").prop('checked')
$('#blackbox').is(':checked')
checked
<input type="checkbox" id="blackbox" name="blackbox" title="Enable Something" checked>
<input type="checkbox" id="blackbox" name="blackbox" title="Enable Something">
<div class="container">
<form action="add" id="urlform" method="POST" accept-charset="utf-8">
<div class="control-group">
<div class="input-append">
<input type="checkbox" id="blackbox" name="blackbox" title="Enable Something">
<input type="text" id="url" value="" placeholder="Text">
<input class="btn btn-warning "type="submit" value="Shorten">
</div>
</div>
</form>
</div>
<form action="/s/add" id="longform" method="POST" accept-charset="utf-8"></form>
<script>
var form = $('#urlform');
var form2 = $('#longform');
if ($('#blackbox').is(':checked')) {
test = form2;
} else {
test = form;
}
form.submit(function () {
$.ajax({
type: test.attr('method'),
url: test.attr('action') + '?url=' + $('#url').val(),
success: function (data) {
test.append('<p style="color:#FFA500">' + 'https://' + location.host + '/' +
data[0].uid + '</p>')
}
});
return false;
});
</script>
The if ($('#blackbox').is(':checked')) { ... }
is happening on page load and the form.submit
is happening multiple times but only using the value that was set on page load.
Move the logic into the form.submit()
action:
<script>
var form = $('#urlform');
var form2 = $('#longform');
form.submit(function () {
if ($('#blackbox').is(':checked')) {
test = form2;
} else {
test = form;
}
$.ajax({
type: test.attr('method'),
url: test.attr('action') + '?url=' + $('#url').val(),
success: function (data) {
test.append('<p style="color:#FFA500">' + 'https://' + location.host + '/' +
data[0].uid + '</p>')
}
});
return false;
});
</script>