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.
Related
I am using a Contact Form 7 form in Wordpress. I have a group of checkboxes, of which I would like to make sure at least one is checked before the form is submitted. Should be simple enough... With the built in validation, because I am not using the CF7 short code, but html input markup, even if the fields are set to required, the form submits. I cannot use the short code because my input field names contain [] brackets. So, I installed Jquery validation plugin for CF7, which works fine to disallow the form to be submitted if none of the boxes are checked, but if you check, say, the first 3 boxes, only the values of the second and third boxes are sent through the form. I have looked around at several custom validation code snippets which look like they would work and I paste them into the same area as I have other similar snippets doing other things and they don't make a difference because the built in CF7 validation doesn't stop the form from submitting when the required fields of my html input fields aren't checked. Any suggestions? I am not a coder (doing my best though) so please feel free to answer like I am a child lol. Here is my html:
<p>
<label>Which Are You Most Interested In?</label>
</br>
<label for="cb1">
<input id="cb1" name="mc4wp-INTERESTS[de9f89w3vq][]"
type="checkbox" value="bf2fd8233f" required> <span>Interest 1</span>
</label>
</br>
<label for="cb2">
<input id="cb2" name="mc4wp-INTERESTS[de9f89w3vq][]"
type="checkbox" value="c1b1b74e7c" required> <span>Interest 2</span>
</label>
</br>
<label for="cb3">
<input id="cb3" name="mc4wp-INTERESTS[de9f89w3vq][]"
type="checkbox" value="a4c5eb6f36" required> <span>Interest 3</span>
</label>
</br>
<label for="cb4">
<input id="cb4" name="mc4wp-INTERESTS[de9f89w3vq][]"
type="checkbox" value="587de639d6" required> <span>Interest 4</span>
</label>
</p>
--
I figured the best way for me to go about this is to just disable the submit button until the group of checkboxes has had at least one value checked (and another set of radio buttons having had one checked) and found this code:
(function($) {
function buttonState(){
$("input").each(function(){
$('#send-info').attr('disabled', 'disabled');
if($(this).val() == "" ) return false;
$('#send-info').attr('disabled', '');
})
}
$(function(){
$('#send-info').attr('disabled', 'disabled');
$('input').change(buttonState);
})
})(jQuery);
... Which works really nicely to disable the submit button, however it seems like since I have hidden fields it does not re-enable the submit button. Also not sure if it cares about required fields only. Wondering how to modify it so that it only cares about required fields and ignores hidden fields. I tried several other snippet solutions and for some reason they were not disabling the submit button. I have the script installed at the bottom of the page via Scripts and Styles Wordpress plugin.
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'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" />
I tried the following but it returns two pieces of data to the server. This is a problem for my gateway, and I get an error.
I used this for one of my attempts:
<script type="text/javascript">
if( $('#other).is('):selected') )
{
// user wants to enter own value
$('[name="installments"]").not('[type="text"]').attr('name', '') // remove all
values apart from the entered text.
}
</script>
<body>
<FORM ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" METHOD="POST">
<br><br>
<input type="radio" name="installments" id="r1" checked="checked" value="99">
Open-Ended - I can stop them via email at any time.<br>
<label for="installments">number of payments</label><br>
<input type="radio" name="installments" id="other" value="Enter Custom.."><br>
<input type="text" name="installments" value="" maxlength="4" size="4">
<br><br><br>
<input type="submit" name="btnSubmit" value="Submit" />
</form>
This returns either -
installments 99
installments (empty)
or
installments Enter Custom..
installments 5
I can only have one return for the var 'installments' either 99 or the number they imputed.
I have tried various ways of doing this using JS and allowing the user to make a choice with the same results - two instances of the var 'installments' being sent.
Is there a javascript way to test the input field and if a number is entered then disable using id(s) the extra radio button so it can't send any data? Or is there a better way to do this?
Solved
I found the answer & Here it is
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#user_input').change(function() {
$('#use_user_input').val($(this).val());
});
});
</script>
And Html Here:
Total number of payments...</span><br>
<input type="radio" name="installments" checked value="99">
Open-Ended -
<input id="use_user_input" type="radio" name="installments" value="">
limited number of payments -
<input id="user_input" type="text" value="" maxlength="4" size="4"></span>
You would want to give the input text field a different name from the radio inputs, then handle the text field's POST as a separate variable from the radio buttons in the HTTP request. Also, give the second radio input a value, such as "other" so you know to handle the associated text input.
If you only have the ability to receive one field from the form you will need to alter the form as the user fills it in. Currently the form works if the user selects one of the values delimited by the radio buttons. The problem, I gather, is that the status of the radio buttons overrides the value of the text field even if the user selects the "other" option of filling in the text box.
The solution is to use a script that is triggered when the user changes the content of the text box. This script will read the value of the text box and assign that value to the 'other' radio button.
We can do this using the onchange event:
<input id="otherRadio" type="radio" name="installments" value="" /><br />
<input id="otherText" type="text" value="" maxlength="4" size="4" onchange="applyOtherOption()" />
If you try this now, it will cause a javascript error on your page when you change the value of the the text field. This is because the browser fails to find a javascript function with the name applyOtherOption. Let's change that now:
<script type="text/javascript">
function applyOtherOption() {
var textField = document.getElementById("otherText");
var radioField = document.getElementById("otherRadio");
radioField.value = textField.value;
}
</script>
The result is that the "other" radio button's value is always changed to whatever the user enters into the text field and if this radio is selected, this is what is sent with the form.
Important
I've been a bit lazy here and typed out the easiest way to access the content of the form elements. This will work on most (probably all major) browsers but it is not the way it should be done. The proper method is to access the form first, then from the form element access the fields. To do it right you should read this article on setting the value of form elements.
I hope this is useful.