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" />
Related
I have a website and I'm trying to make my (extra cost) checkboxes required before proceeding to checkout with paypal. The checkboxes, when clicked, add extra money to the total price as well (not sure if that affects anything). I also cannot find the name= field for the checkboxes so I used id= which I'm sure is completely wrong. Sorry I am extremely new with this.
ALSO NOTE - after my checkbox form I have to go through 2 more pages of clicking a book now button before I arrive at the SUBMIT checkout button... not sure if this stops anything from working correctly? –
I have added the following to my custom css:
<form action="../" onsubmit="if (this.package-44.checked == false) { alert ('You didn\'t choose any of the checkboxes!'); return false; } else { return true; }">
<p><input type="checkbox" id="package-44" value="add" required="required" /></p>
<p><input type="submit" name="woocommerce_checkout_place_order" value="Proceed to PayPal" required="required" /></p>
</form>
I posted this in footer.php of my theme:
$('#formTemplate').submit(function() {
if (!attributeSupported("required") || ($.browser.safari)) {
//If required attribute is not supported or browser is Safari (Safari thinks that it has this attribute, but it does not work), then check all fields that has required attribute
$("#formTemplate [required]").each(function(index) {
if (!$(this).val()) {
//If at least one required value is empty, then ask to fill all required fields.
alert("Please fill all required fields.");
return false;
}
});
}
return false; //This is a test form and I'm not going to submit it
});
I have also changed the inputs to <required="required" />on the backend of my checkbox input. This is still not stopping me from proceeding with my checkout.
any more help is appreciated.
if I understand you that the checkbox is required. Is it?
Just change the checkbox line:
<p><input type="checkbox" id="package-44" value="add" required ></p>
There is a simple html code for required for html inputs.
add required="required" to the input element. Example:
<input type="checkbox" required="required" />
When you submit the form, and the checkbox isn't checked, the browser will give you an alert to inform you that you need to check the checkbox element.
And because you want to do this in javascript, you can take a look at this answer: How to set HTML5 required attribute in Javascript?
EDIT: See comment from Marko below about checking the submitted forms with the required tags.
I need to make a simple form that is submitted using javascript to redirect a user to the correct page.
It has a list of radio buttons, and on submit I need to redirect the user to a page URL specified for each radio button.
Looking something like this:
I found a javascript using jquery to do this, but that is triggered on a radio button click. I need to have a submit button.
I thought is would be easy to do, and probably is, but somehow I can not find the solution.
This is the code I play with (I found the code elsewhere on SO, and this works. But there is no "Submit" button.):
I value the most:
<form>
<input type="radio" name="redirect" value="http://example.com/food"><span>eating food</span><br>
<input type="radio" name="redirect" value="http://example.com/kids"><span>play with my kids</span><br>
<input type="radio" name="redirect" value="http://example.com/fishing"><span>go fishing</span><br>
<input type="radio" name="redirect" value="http://example.com/stackoverflow"><span>answer StackOverflow questions</span><br>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$('input[type="radio"]').on('click', function() {
window.location = $(this).val();
});
</script>
I should probably be able to use this: https://api.jquery.com/submit/ BUT I haven't understood how to both trigger the submit and get the correct radio value at the same time, and then redirect.
Can I use the above code somehow, or do I need to make this with a totally different approach?
I tried with this:
I value the most:
<form id="mychoice">
<input type="radio" name="redirect" value="http://example.com/food"><span>eating food</span><br>
<input type="radio" name="redirect" value="http://example.com/kids"><span>play with my kids</span><br>
<input type="radio" name="redirect" value="http://example.com/fishing"><span>go fishing</span><br>
<input type="radio" name="redirect" value="http://example.com/stackoverflow"><span>answer StackOverflow questions</span><br>
<input type="submit" value="Go">
</form>
<script>
$( "#mychoice" ).submit(function( event ) {
window.location = $('input[type="radio"]:checked').val();
});
</script>
The idea was to open the window location with the value I get from the checked radio button. This might be totally wrong way to do it. Didn't work... :-)
Your selector is a bit off. Try the following:
$('input[name="redirect"]:checked').val();
This JSFiddle might help:
https://jsfiddle.net/yufnuwc6/2/
You can give this a try
$( "#mychoice" ).submit(function( event ) {
event.preventDefault();
window.location = $('input[type="radio"]:checked').val();
});
use button instead of submit
<input type="button" id="submit" value="Go">
</form>
<script>
$( "#submit" ).click(function( event ) {
window.location = $('input[type="radio"]:checked').val();
});
</script>
Proceed </button>
<input type="checkbox" name="checkbox3" value="yes">
By checking the box, I certify that have read the above disclaimers and agree to the rules. </input>
I have a checkbox and a button which will take me to next page. But, before I press the button the check box has to be ticked. If not, a label has to be displayed below the check box saying "accept to rules first". Help? Also, it would be great if i can highlight the checkbox to red if i click proceed without checking the checkbox. Can use javascript/jquery.
Try this it works
<form action="page.html">
<input type="checkbox" name="checkbox3" value="yes" required>
By checking the box, I certify that have read the above disclaimers and agree to the rules. </input>
<input type="submit" name ="submit"/>
</form>
To get you started:
<input id="checkboxAgree" type="checkbox" name="checkbox3" value="yes">
function checkAgree()
{
if (document.getElementbyId("checkboxAgree").getAttribute("checked") )//checkbox is checked
{
location.href = "page.html"; //load the next page.
}
else
{
Alert("You need to check the box before you can continue");
}
}
document.getElementById("proceed-button").addEventListener("click", checkAgree ,false);
addEventListener add an onclick event to the button. When clicked this executes the function checkAgree. When the checkbox has the attribute checked it is checked and the ifwill render true. location.href will load page.html.
Please delete the a that surrounds your button.
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 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>