Simple JavaScript Checkbox Validation - javascript

I usually work with PHP so sadly don't have some basic JS principles down. This is all I want to accomplish--I've seen many posts on this topic but they are usually beyond what I need.
Here is my form:
<input type="checkbox" name="checkbox" value="check" />
<input type="submit" name="email_submit" value="submit" onclick="----??----" />
The checkbox is a simple "I agree". I want the submit button to be pressed and it will only submit if that check box is selected.
Here's the thing: I want the simple, cheating way -- no methods -- just some inline code in that form (assuming its not overly long?). This is not a public page, I just need something quick and simple with that type of validation. If its unchecked, it will throw an alert(); if its checked it will submit via post through php and go on as normal.

You could use:
if(!this.form.checkbox.checked)
{
alert('You must agree to the terms first.');
return false;
}
(demo page).
<input type="checkbox" name="checkbox" value="check" />
<input type="submit" name="email_submit" value="submit" onclick="if(!this.form.checkbox.checked){alert('You must agree to the terms first.');return false}" />
Returning false from an inline event handler will prevent the default action from taking place (in this case, submitting the form).
! is the Boolean NOT operator.
this is the submit button because it is the element the event handler is attached to.
.form is the form the submit button is in.
.checkbox is the control named "checkbox" in that form.
.checked is true if the checkbox is checked and false if the checkbox is unchecked.

For now no jquery or php needed. Use just "required" HTML5 input attrbute like here
<form>
<p>
<input class="form-control" type="text" name="email" />
<input type="submit" value="ok" class="btn btn-success" name="submit" />
<input type="hidden" name="action" value="0" />
</p>
<p><input type="checkbox" required name="terms">I have read and accept SOMETHING Terms and Conditions</p>
</form>
This will validate and prevent any submit before checkbox is opt in. Language independent solution because its generated by users web browser.

You can do something like this:
<form action="../" onsubmit="return checkCheckBoxes(this);">
<p><input type="CHECKBOX" name="MyCheckbox" value="This..."> This...</p>
<p><input type="SUBMIT" value="Submit!"></p>
</form>
<script type="text/javascript" language="JavaScript">
<!--
function checkCheckBoxes(theForm) {
if (
theForm.MyCheckbox.checked == false)
{
alert ('You didn\'t choose any of the checkboxes!');
return false;
} else {
return true;
}
}
//-->
</script>
http://lab.artlung.com/validate-checkbox/
Although less legible imho, this can be done without a separate function definition like this:
<form action="../" onsubmit="if (this.MyCheckbox.checked == false) { alert ('You didn\'t choose any of the checkboxes!'); return false; } else { return true; }">
<p><input type="CHECKBOX" name="MyCheckbox" value="This..."> This...</p>
<p><input type="SUBMIT" value="Submit!"></p>
</form>

You can do the following:
<form action="/" onsubmit="if(document.getElementById('agree').checked) { return true; } else { alert('please agree'); return false; }">
<input type="checkbox" name="checkbox" value="check" id="agree" />
<input type="submit" name="email_submit" value="submit" />
</form>​
Here is a working demo - http://jsfiddle.net/Ccr2x/

If your checkbox has an ID of 'checkbox':
if(document.getElementById('checkbox').checked == true){ // code here }
HTH

var confirm=document.getElementById("confirm").value;
if((confirm.checked==false)
{
alert("plz check the checkbox field");
document.getElementbyId("confirm").focus();
return false;
}

If the check box's ID "Delete" then for the "onclick" event of the submit button the javascript function can be as follows:
html:
<input type="checkbox" name="Delete" value="Delete" id="Delete"></td>
<input type="button" value="Delete" name="delBtn" id="delBtn" onclick="deleteData()">
script:
<script type="text/Javascript">
function deleteData() {
if(!document.getElementById('Delete').checked){
alert('Checkbox not checked');
return false;
}
</script>

Another simple way is to create a function and check if the checkbox(es) are checked or not, and disable a button that way using jQuery.
HTML:
<input type="checkbox" id="myCheckbox" />
<input type="submit" id="myButton" />
JavaScript:
var alterDisabledState = function () {
var isMyCheckboxChecked = $('#myCheckbox').is(':checked');
if (isMyCheckboxChecked) {
$('myButton').removeAttr("disabled");
}
else {
$('myButton').attr("disabled", "disabled");
}
}
Now you have a button that is disabled until they select the checkbox, and now you have a better user experience. I would make sure that you still do the server side validation though.

Another Simple way is to create & invoke the function validate() when the form loads & when submit button is clicked.
By using checked property we check whether the checkbox is selected or not.
cbox[0] has an index 0 which is used to access the first value (i.e Male) with name="gender"
You can do the following:
function validate() {
var cbox = document.forms["myForm"]["gender"];
if (
cbox[0].checked == false &&
cbox[1].checked == false &&
cbox[2].checked == false
) {
alert("Please Select Gender");
return false;
} else {
alert("Successfully Submited");
return true;
}
}
<form onload="return validate()" name="myForm">
<input type="checkbox" name="gender" value="male"> Male
<input type="checkbox" name="gender" value="female"> Female
<input type="checkbox" name="gender" value="other"> Other <br>
<input type="submit" name="submit" value="Submit" onclick="validate()">
</form>
Demo: CodePen

Target it by id and then use this code:
function check(){
if(document.getElementById('yourid').checked
{
return false;
}
else
{
alert ("checkbox not checked");
return false;
}
}

var testCheckbox = document.getElementById("checkbox");
if (!testCheckbox.checked) {
alert("Error Message!!");
}
else {
alert("Success Message!!");
}

Guys you can do this kind of validation very easily. Just you have to track the id or name of the checkboxes. you can do it statically or dynamically.
For statically you can use hard coded id of the checkboxes and for dynamically you can use the name of the field as an array and create a loop.
Please check the below link. You will get my point very easily.
http://expertsdiscussion.com/checkbox-validation-using-javascript-t29.html
Thanks

Related

Return true doesn't work for javascript on button click

I have a Javascript code that returns true if a certain checkbox is checked.
document.getElementById("accept").addEventListener("click", function(event){
if(document.getElementById('hck').checked == false){
event.preventDefault();
}
else
{
return true;
}
});
This is the Javascript code
<input class="btn btn-success btn-lg mx-auto btnac" type="submit" id="accept" name="accept" value="Accept">
This is the button and it's inside a form.
I had put in two print statements earlier to see if it enters the clauses, and it does, but it doesn't go to the Django function and return the appropriate page on return true.
I suggest you better use the required attribute for the case
You can use the required attribute as suggested by others already but to also resolve your original attempt here's a working example of what you tried to achieve.
The form submits when checkbox is checked otherwise it doesn't.
document.getElementById("accept").addEventListener("click", function(event){
if(document.getElementById('hck').checked) {
console.log('checkbox is checked');
return true;
}
console.log('checkbox is not checked');
event.preventDefault();
});
<div>
<form action="#something" method="get">
<input type="checkbox" id="hck" name="hck" value="Test Box">
<br/>
<input class="btn" type="submit" id="accept" name="accept" value="Accept">
</form>
</div>

How to validate if the data is entered in the text field when the checkkbox is checked

I have this form where I need to validate that - "If the user checks the checkbox, they must enter data in the text field. I have the following JS where I can verify the parent/child checkbox validation, but I am not sure how to use the script for text field validation. Thanks!
$(document).ready(function () {
$('#checkBtn').click(function() {
checked = $("input[type=checkbox]:checked").length;
if(!checked) {
alert("You must check at least one checkbox.");
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="checkbox" class="model"> Model #
<input type="text" size="12" class="childModel"><BR>
<input type="submit" name="submit" value="submit" id="checkBtn" style="text-align:center;"/>
Sounds like you just need to check that:
either the checkbox is unchecked, OR
there's something in the checkbox
Here's a simple way to do it:
$(document).ready(function () {
$('#checkBtn').click(function() {
var isCheckboxChecked = $("input[type=checkbox]:checked").length;
var isTextEntered = $("input.childModel").val().length;
if ( isTextEntered || !isCheckboxChecked ) {
alert("validation passed!");
} else {
alert("validation failed!");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="checkbox" class="model"> Model #
<input type="text" size="12" class="childModel"><BR>
<input type="submit" name="submit" value="submit" id="checkBtn" style="text-align:center;"/>

Check if textbox is checked before submitting

I want to submit the form if and only if the textbox is checked... if not I want to stop the form and give an alert
Right now I am getting the alert if it is not checked but it's submitting the form either way
$(function() {
$("#button").click(function(){
if ($("#uploadTOS").is(":checked")) {
return true;
} else {
alert("Please agree to the TOS");
return false;
}
})
})
<form enctype="multipart/form-data" action="urlupload.php?do=verify" id="form" method="post" onsubmit="a=document.getElementById('form').style;a.display='none';b=document.getElementById('part2').style;b.display='inline';" style="display: inline;">
<div id="uploadform">
<input type="text" name="uploadfile" size="30" /><p>
<input type="submit" id="button" class="button" value="Upload" />
</div>
<div id="TOSDiv" style="display:none; z-index:60;">
<input id="uploadTOS" type="checkbox" name="tos" value="1" />
<span id="uploadTOSText">
I Agree to the Terms of Service
</span>
</div>
</form>
Use onclick javascript with this:
function toscheck() {
if ($("#uploadTOS").is(":checked")) {
return true;
} else {
alert("Please agree to the TOS");
return false;
}
}
Change javascript to:
function submitcheck() {
if ($("#uploadTOS").is(":checked")) {
return true;
} else {
alert("Please agree to the TOS");
return false;
}
}
And then add onclick to the submit button
<input type="submit" id="button" class="button" value="Upload" onclick="return submitcheck();" />
I believe return values are deprecated for newer versions of jQuery. Try event.preventDefault instead of return false.
Note that the event variable would simply by the first argument to your jQuery .click(function(event) {...}) handler.

JavaScript Form - changeable URL's for the submit button

I need to make a form, example:
<form id="myform" name="myform" method="get">
<input type="radio" checked="checked" name="Answer" value="yes" />Yes
<input type="radio" name="Answer" value="no" />No
<input id="submit" name="submit" src="images/submit.jpg" type="image" />
</form>
Questions:
1. How can I set a URL to the submit button (on click)?
2. How can i change this URL depending on when the user selects either the Yes or No answer?
Set the form action attribute to the YES URL
$('input:radio').on('click', function(){
if($(this).val() == "yes"){
$('#myform').attr('action', 'YES_URL');
}
else {
$('#myform').attr('action', 'NO_URL');
}
});
A submit button fires the event submit to a adress that is defined in the action attribute from form tag. So here comes one option:
<script type="text/javascript">
function mytarget ()
{
var myFormObject = document.myforma;
var chk = false;
for (i = 0; i < myFormObject.Answer.length; i++)
{
if (myFormObject.Answer[i].checked && myFormObject.Answer[i].value == 'yes')
{
myFormObject.action = "http://urltforthevalueYes.com";
chk = true;
break;
} else if (myFormObject.Answer[i].checked && myFormObject.Answer[i].value == 'no') {
myFormObject.action = "http://urltforthevalueNo.com";
chk = true;
break;
}
}
if (chk == true) {myFormObject.submit();} else {alert("Please select an option");}
}
</script>
Update:
I had to change my javascript code because there was two mistakes in there. Also added the new HTML code.
Changes you have to do:
add the action attribute to the open form tag <form id="myform" name="myform" method="get" action="">
Change the name of your submit button. The use of submit creates a conflict between your button and the javascript function <input id="send" name="send" src="images/submit.jpg" type="image" />
Add at you submit button the attribute onClick with the reference to the method mytarget() <input id="send" name="send" src="images/submit.jpg" type="image" onClick="mytarget()"/>

Identify the value of clicked submit button with multiple submit buttons

I have situation where i need to track which submit button click in order to do set variables according to that. Below is the test code,
<script>
function submitForm(form) {
alert(document.getElementById('sb').value);
if (document.getElementById('sb').value=="One") {
//Do something
}
return true;
}
</script>
<form action="" method="get" onsubmit="return submitForm(this);">
<input type="submit" name="sb" value="One">
<input type="submit" name="sb" value="Two">
<input type="submit" name="sb" value="Three">
</form>
The alert always shows One even if i click button Two or Three. But the url change with clickable parameter. How to alert the value which is in the clickable submit button?
Note: I want a solution with out JQuery
EDIT: I change the code bit which the onsubmit call the submitForm(this);
The problem is even use document.forms[0].sb.value its undefined because document.forms[0].sb return a node list of all submit buttons as its same as with document.getElementById('sb')
Here is what I think is a simpler solution to this problem. It does not require any extra events.
<script>
function submitForm(form) {
console.log(document.activeElement.value);
if (document.activeElement.value == 'One') {
console.log("Have one.");
return false;
}
return true;
}
</script>
<form action="" method="get" onsubmit="return submitForm(this);">
<input type="submit" name="sb" value="One">
<input type="submit" name="sb" value="Two">
<input type="submit" name="sb" value="Three">
</form>
jsfiddle
What I would like an answer to is how the form is getting the query set to "?sb={value}".
I would suggest you to use buttons, instead of multiple submit buttons. In the onclick attribute of the buttons, submit the form using javascript.
You can try like this,
<form>
<input class="myButton" type="submit" name="sb" value="One">
<input class="myButton" type="submit" name="sb" value="Two">
<input class="myButton" type="submit" name="sb" value="Three">
</form>
<script type="text/javascript">
$(".myButton").on('click', function() {
alert($(this).val());
});
</script>
I'm a bit new to javascript; please forgive me if I'm wrong on this. Wouldn't it make a difference if your if statement had a 3rd = sign?
Should it be:
if (document.getElementById('sb').value === "One") {
//Do something
}
return true;
Continuing the answer above:
<script>
function m(value) {
alert(value);
}
</script>
<input type="button" value="One" onClick="m(this.value)">
<input type="button" value="Two" onClick="m(this.value)">
<input type="button" value="Three" onClick="m(this.value)">
You can of course see what's the id:
<input type="button" id='myId' value="Three" onClick="m(this.id)">
you can try with jquery something like :
$(":submit").live('click', function() {
alert($(this).val());
})
This is a non-jquery, simple solution for detecting which submit button was clicked.
<script>
function submitForm(form) {
console.log(document.getElementById('btn_clicked').value);
if (document.getElementById('btn_clicked').value === 'One') {
console.log("Have one.");
return false;
}
return true;
}
</script>
<form action="" method="get" onsubmit="return submitForm(this);" ;">
<input type="hidden" name="btn_clicked" id="btn_clicked" value="">
<input type="submit" name="sb" value="One" onclick="document.getElementById('btn_clicked').value='One';">
<input type="submit" name="sb" value="Two" onclick="document.getElementById('btn_clicked').value='Two';">
</form>

Categories