I have the following code for enabling the submit button after clicking the checkbox.
HTML:
<input type="checkbox" checked="checked" id="check">terms and conditions
<input type="submit" name="submit" id="post" value="submit">
Script:
$('#check').click(function(){
if($(this).attr('checked') == false){
$('#post').attr("disabled","disabled");
}
else {
$('#post').removeAttr('disabled');
}
});
But this is not working in my localhost. The button is enabled all the time even if the checkbox is not selected. Please help me to make it work.
$('#check').click(function() {
$('#post').prop('disabled', !$(this).is(':checked'));
}
.attr() checks the attribute in the HTML, not the current state of the HTML; .is(':checked') tests the latter. Also, I believe it's preferable to use .prop() to change the disabled state of the element dynamically.
Does it disable it if you check, and then uncheck the checkbox? If so, then you just need to set disabled as the default state.
Use .is(':checked')
$('#check').click(function() {
if(!$(this).is(':checked')) {
$('#post').attr("disabled","disabled");
} else {
$('#post').removeAttr('disabled');
}
});
$(this).attr('checked') will always true, it just read the "checked" attr value out,
use
this.checked
or
$(this).prop('checked')
See this: http://jsfiddle.net/m6aBZ/
Here is the filddle
Here is the javascript for working with it
$(function(){
$('#check').click(function(){
if($(this).attr('checked')!="checked"){
$("#post").attr("disabled","disabled");
} else {
$("#post").removeAttr("disabled");
}
});
});
Lots of answers.
Don't call any form control "submit" as it will shadow the form's submit method (i.e. form.submit will reference the control, not the method).
All you need is something like:
<form ...>
<input type="checkbox" onclick="this.form.submitButton.disabled = !this.checked" ...>
<input type="submit" name="submitButton" disabled>
</form>
Related
I have a checkbox and the requirement is that when the user clicks it, instead of immediately changing its state, a modal window should pop up asking them a yes/no question. Depending on their answer, the checkbox should either become checked or remain unchecked.
I thought that this requirement should be handled using Event.preventDefault() but when I tried to do it I discovered that when I exit the event handler, the checkbox is reverted to its original state, regardless of my programmatic attempts to set the state in the handler.
$(function() {
$(":checkbox").click(function(e) {
e.preventDefault();
$(this).prop("checked", confirm("Confirm to check the checkbox"));
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label for="checkbox">Click me</label>
<input type="checkbox" id="checkbox">
</form>
So how can I implement the required behavior?
The problem is because you called preventDefault() at all. You don't need it in this case as the checked state is entirely dependant on the outcome of the confirm() call.
Also note that you should use the change event, not click, when dealing with checkboxes. Try this:
$(function() {
$(":checkbox").change(function(e) {
$(this).prop("checked", confirm("Confirm to check the checkbox"));
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label for="checkbox">Click me</label>
<input type="checkbox" id="checkbox">
</form>
I have a form with checkbox and I want to keep it checked after submitting the form when it goes back to the same view with an error. I heard that the value attribute can help me to make the checkbox be checked so im trying to set it to true/false. Anyway, the input value stays "false" even if I click it. What happens exactly?
I thought the value goes true/false after clicking the checkbox
<input type="checkbox" name="acceptRules" class="inline checkbox" id="checkbox1" value="false">
<script>
$("#checkbox1").is(':checked', function(){
$("#checkbox1").attr('value', 'true');
});
</script>
If I understand the question, you want to change the value of the checkbox depending if it is checked or not.
Here is one solution:
$('#checkbox-value').text($('#checkbox1').val());
$("#checkbox1").on('change', function() {
if ($(this).is(':checked')) {
$(this).attr('value', 'true');
} else {
$(this).attr('value', 'false');
}
$('#checkbox-value').text($('#checkbox1').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="acceptRules" class="inline checkbox" id="checkbox1" value="false">
<div id="checkbox-value"></div>
Use Checked = true
$("#checkbox1").prop('checked', true);
Note: I am not clear whether you want to onclick/onchange event on checkbox. is(":checked", function(){}) is a wrong in the question.
To return true or false depending on whether a checkbox is checked or not, I use this in JQuery
let checkState = $("#checkboxId").is(":checked") ? "true" : "false";
Try this
$("#checkbox1").is(':checked', function(){
$("#checkbox1").prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="acceptRules" class="inline checkbox" id="checkbox1" value="false">
Checkboxes can be really weird in JS. You're best off checking for the presence of the checked attribute. (I've had older jQuery versions return true even if checked is set to 'false'.) Once you've determined that something is checked then you can get the value from the value attribute.
jQuery.is() function does not have a signature for .is('selector', function).
I guess you want to do something like this:
if($("#checkbox1").is(':checked')){
$("#checkbox1").attr('value', 'true');
}
I'm going to post this answer under the following assumptions.
1) You (un)selected the checkbox on the first page and submitted the form.
2) Your building the second form and you setting the value="" true/false depending on if the previous one was checked.
3) You want the checkbox to reflect if it was checked or not before.
If this is the case then you can do something like:
var $checkbox1 = $('#checkbox1');
$checkbox1.prop('checked', $checkbox1.val() === 'true');
Or you can solve this with only JavaScript by using onClick:
<input type="checkbox" name="acceptRules" class="inline checkbox" id="checkbox1" value="false" onClick={e => console.log(e.target.checked)}>
Good practise to use this:
$('.name-checkbox:checked').length
I have an input like the one below:
<input class="submit" type="submit" name="submit" value="Blah">
I want to change the value to 'Other Text'.
When I use the .val(),attr() or .prop() jQuery method the value changes fine but when I submit, the input doesn't work any more.Just refreshes the page without doing what its supposed to.
Same result with .setAttribute method.
How do I get the input to work correctly now the value has been changed?
Try this
<input type=button name="b1" value="Submit" onclick="javascript:document.MyForm.b1.value='Done'">
Source : Change text on submit button after submission
Check this
$(document).ready(function(){
$(".submit").click(function(){
$(this).val("OtherText");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="submit" type="submit" name="submit" value="Blah">
I believe it was server side script was checking the value, so had to change the value back when clicked.
if ($('.submit').length > 0) {
$('.submit').prop('value', 'Other Text');
$('.submit').click(function(){
$('.submit').prop('value', 'blah');
});}
This seems to be working 'ok' now. Not ideal but works
You can prevent submitting form or in click event of button:
$(".submit").click(function(e){
e.preventDefault();
$("#inputbox").val("OtherText");
//Now you can submit form manually here
$("#form").submit();
});
I have this markup:
<form action="http://acumbamail.com/signup/13565/" method="POST">
<input type="checkbox" id="privacidad-btn" > Acepto política de privacidad<br>
<input type="button" value="Enviar" id="submit_acumba">
</form>
I want that if the user clicks on the button without checkbox checked there is an alert that he must agree to the terms (check the checkbox). Any ideas on the best approach to this?
I'm starting doing this way but don't know how which way to go:
if (jQuery("#privacidad-btn").is(":checked")) {
}
One approach that i like with html5 is the form validation
just put required on the checkbox and when the try to submit it they will be alerted with a popover dialog in there own language (its a good highlighter in the form of what is wrong with it)
<input required type="checkbox" id="privacidad-btn">
You could do it the way tymeJV suggest with button clicked event $("#submit_acumba").click(...)
That way you would support more browsers. but: It would just only validate on a click of a button
But there is the form submit event as well.
$("form").submit(function(e) {
if ( ! jQuery("#privacidad-btn").is(":checked")) {
// Not checked abort the default submit
e.preventDefault();
}
});
The difference is that it has to do all the native form validation before -> if it is invalid it won't trigger a submit or call the function
with button.onclick it would avoid the native validation since it would run before the submit event
You need a handler for the button as well:
$("#submit_acumba").click(function(e) {
e.preventDefault();
if (jQuery("#privacidad-btn").is(":checked")) {
//submit!
}
})
Using this straight and simple HTML implementation, you can do this without any special scripting (JavaScript/jQuery):
<form>
<p><input type="checkbox" required name="terms"> I accept the <u>Terms and Conditions</u></p>
<p><input type="submit"></p>
</form>
Here's a JSFiddle link where you can play with this implementation: http://jsfiddle.net/zs9b167b/
I've tried a few but similar ways of disabling a form submit button until a checkbox is checked.
<input type="checkbox" name="toc" value="accept" onclick="formsubmit.disabled = !this.checked" >I accept
<input class="FontSans" type="submit" name="formsubmit" id="formsubmit" value="submit" disabled="disabled" >
However if after submission you need to go back in the browser then the form shows the checkbox as checked but the submit is disabled. To enable the submit you need to uncheck
and check. Is there a way round this?
Not sure if you're using jQuery or not, but here's a jQuery-centric solution.
jQuery(function() {
if ($('.check').is(':checked')) {
$('form').removeAttr('disabled');
} else {
$('form').attr('disabled', true);
}
})
Let me know if you need vanilla JS.
This should prevent browser from restoring previous state
<input ... autocomplete="off" />