this is my first post on stackoverflow, I hope you can help me out!
I need to have javascript/ajax validation for a checkbox on a form I am making,
the checkbox is deselected by default but when it is ticked, a javascript box should pop up displaying this text,
"You have selected the newsletter checkbox, are you sure you would like to receive our newsletter?"
when they click the submit button.
If they click yes, the the form should submit the newsletter checkbox info, if not, the form should still submit, but without the newsletter checkbox info.
I would really appreciate the help, thank you.
Welcome to SO!
You will need a Javascript function that runs when your form is submitted. From there, you will check if the box is checked, if so, use confirm() to show your message. If they select no, then you uncheck the box via Javascript and your form submits as usual.
Pseudo code:
<script language="javascript">
function checkNewsLetter()
{
var chk = document.getElementById('chk1');
if ((chk.checked) && (!confirm('Are you sure you wish to sign up?')))
chk.checked = false;
}
</script>
<form onsubmit="return checkNewsLetter();">
<input type="checkbox" id="chk1" name="chk1" />
<input type="submit" />
</form>
I would also recommend checking out jQuery for all your Javascript needs, it's very easy to use.
Related
I am trying to submit my button with a form. Im not trying to make my button submit the form. I want to be able to see my button value in the POST variable after the form submits. From my understanding all I need is to give my element a name and value. I should be able to see all the form variables once my form is submitted.
<input name='MC[]' type='text' size='51' placeholder='Enter In Question'>
<br/>
<input name='MC[]' type='button' value='Incorrect'>
<input name='MC[]' id='Options' size='40' placeholder='Enter In Option A'>
I'm new to this site not sure if I'm providing enough information but I simply want to submit this button inside a form and to be able to add the value of my button to a file. For some reason I cant see the button once the form is submitted. Are type button not sent to POST when submitted?
Note, I am able to see my other input elements. The type button one is the only one I cant see.
You can use Javascript that fills in the value of a hidden input from the value of the button that was clicked.
HTML:
<input type="hidden" name="answer" id="answer">
JS:
document.querySelectorAll("input[name='MC[]']").forEach(function(el) {
el.addEventListener("click", function() {
document.getElementById("answer").value = el.value;
}
}
Then you'll be able to get the button's value in $_POST['answer'].
That's not how buttons work... they perform an action, they don't get included in the post data. What you need is a checkbox, or a disabled input perhaps?
i have developed a survey form with the help of html and css. I want to give validation to question before page redirect to Contact form. In Survey form when user click in submit button page will redirect to contact form.
but i want to put validation so that user has to click on all question before page redirect to contact form.
I don't have the privalage to comment but you can use the required field as follows
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A" required=true />
using this way the user will have to click all the required fields before submitting a form.
To make sure all fields are filled before submission of the form:
<input type="radio" required>
The ' required ' attribute makes sure all fields are filled before the form can be submitted.
You just need to set the required-attribute for one input of the radiogroup, but you can set it for all.
use the required field validator or refer the link below http://www.chennaisunday.com/jsradio.html
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 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'm using this tutorial to try and make a form http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
My form works great but I have included 3 tick boxes that I want the user to tick before they can submit. Creating this validation has had me scratching my head all day!
I've tried making these custom fields but am pretty sure my syntax is wrong. I am well out of my depth here! The tutorial provides example that I tried to implement but the coding is too different for me to use on my form. This is what I tried:
<input type="checkbox" name="checkbox1" id="checkbox1" />
<label for="checkbox" value='<?php echo $formproc->SafeDisplay('email') ?>'</label><label for='Please tick the box before pressing submit' >
And then after the form, inside the script adding:
frmvalidator.addValidation("checkbox1","checkbox1","Please tick the box before pressing submit");
The form still submits but my validation doesn't happen. If anyone can point me in the right direction, that would be really incredible.
I'm not sure if it's the done thing to post the actual page I'm working on as it's my clients website?
It's in the documentation.
frmvalidator.addValidation("checkbox1","shouldselchk=on");
First you need to give value to your checkbox as below
<input type="checkbox" name="checkbox1" id="checkbox1" value="1"/>
Then, you need to pass type of validation in second argument of addValidation function as below
frmvalidator.addValidation("checkbox1","shouldselchk=1");