jQuery checkbox validation without form - javascript

I want to make a validation function with jQuery or pure javascript.
this is my checkbox
<input type="checkbox" name="terms" id="terms">
and this is my link button
<label id="kosullar" for="terms">
<a class="fancybox-effects-d" data-fancybox-type="iframe" onclick="" href="kosullar.php">KULLANIM KOSULLARINI KABUL EDIYORUM</a>
</label>
If checkbox is checked process will continue to redirect my href url if not i want to show alert() to user.
Thats it.
Would you show me an example?

Can you try this,
function Accept(dat){
var terms = $('#terms').is(':checked');
if(terms){
window.location.href=dat.href;
}else{
alert('not checked!');
return false;
}
}
HTML Section:
<input type="checkbox" name="terms" id="terms">
<label id="kosullar" for="terms">
<a class="fancybox-effects-d" data-fancybox-type="iframe" onclick="return Accept(this);" href="kosullar.php">KULLANIM KOSULLARINI KABUL EDIYORUM</a>
</label>
Another method:
$(function(){
$(".fancybox-effects-d").click(function(){
var terms = $('#terms').is(':checked');
if(terms){
window.location.href=$(this).attr('href');
}else{
alert('not checked!');
return false;
}
});
});
HTML:
<input type="checkbox" name="terms" id="terms">
<label id="kosullar" for="terms">
<a class="fancybox-effects-d" data-fancybox-type="iframe" href="kosullar.php">KULLANIM KOSULLARINI KABUL EDIYORUM</a>
</label>

In your onclick define a function and pass this, return false to stop the default action
onclick="verifyCheck(this); return false;"
function verifyCheck(elem) {
var cb = document.getElememtById("terms");
if (cb.checked) {
location.href = elem.href;
} else {
alert("Check the box!");
}
}

$('.fancybox-effects-d').click(function(e) {
if (!($('#fancybox-effects-d').is(':checked'))) {
e.preventDefault();
}
});

Try this.
<a class="fancybox-effects-d" data-fancybox-type="iframe" onclick="return Validate();" href="kosullar.php">
Javascript method
function Validate()
{
If($("#terms").is(":checked"))
{
//do your code to go to next step
}
else
{
alert("Please check the checkbox");
return false;
}
}

Related

How to enable checkbox when checked?

Here's my code:
HTML:
<input type="checkbox" id="checkme"/>
<p class="label-text"><b>By checking this, you agree to our <a href="terms.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Terms & <br>Conditions</a> and <a href="privacy.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Privacy Policy</a></b></p>
<input class="formBtn" type="submit" id="submit" value="Submit" disabled="disabled" />
JavaScript
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('submit');
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
};
jQuery
$( "#checkme" ).on( "click", function() {
if($( "#checkme:checked" ).length > 0) {
$('#submit').prop('disabled', false);
} else{
$('#submit').prop('disabled', true);
}
});
All not working. Please help.
Also help me add in the javascript a class for css to make the button transparent when disabled. Thanks a lot!
You need to use change not click and to add style to the disabled input you can simply use #submit[disabled]
$( "#checkme" ).on( "change", function() {
$('#submit').prop('disabled', !this.checked);
}).change(); // use this to run change event on load
#submit{
transition-duration : 0.5s;
}
#submit[disabled]{
opacity : 0.5;
transition-duration : 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkme"/>
<p class="label-text"><b>By checking this, you agree to our <a href="terms.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Terms & <br>Conditions</a> and <a href="privacy.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Privacy Policy</a></b></p>
<input class="formBtn" type="submit" id="submit" value="Submit"/>
To simplify your code you can use $('#submit').prop('disabled', !this.checked); this.checked will return true when checked and false when unchecked so you can use ! before it to reverse it
Note: be sure you include jquery
To add an effect to the input while disabled true/false you can add something like transition-duration : 0.5s;
Javascript Solution
I just kept it simple with regular javascript. I added an onclick function to the checkbox that enables the submit when the checkbox is checked.
Hope it helps.
function checkA(){
if(document.getElementById('checkme').checked == true){
document.getElementById('submit').disabled = "";
} else {
document.getElementById('submit').disabled = "disabled";}}
<input onclick="checkA();" type="checkbox" id="checkme">
<p class="label-text"><b>By checking this, you agree to our <a href="terms.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Terms & <br>Conditions</a> and <a href="privacy.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Privacy Policy</a></b></p>
<input class="formBtn" type="submit" id="submit" value="Submit" disabled="disabled">

validate hyperlink and checkbox before submit

For eaxmple in case the checkbox is not checked and the user hits the submit we need to show the error message "please check the checkbox". in case if the checkbox is checked and the hyper link is not clicked by the user we need to show the error message "Please click the link".
My Code
<script>
var state = 0;
$("#AcceptMe").click(function()
{
state=1;
});
if(state == 0)
{
alert("please click");
}
</script>
</head>
<body>
<form>
<a id="Link1" href="#">click</a>
<input type="checkbox" id="AcceptMe">
<input type="submit" name="submit">
</form>
This is not a good solution, because when the user clicks twice, he/she unchecks the checkbox, but the "state" would still be 1.
Check if the checkbox is checked like this:
var isChecked = $('#AcceptMe').is(':checked')?true:false;
Now the "isChecked" variable will contain true or false so you should first give the submit button an ID and type="button" (otherwise it will try to submit):
<input type="button" value="submit" name="submit" id="submitForm"/>
Add a clickHandler for the link like this:
var linkClicked = false;
$('#Link1').click(function(){
linkClicked = true;
});
Then under that function your javascript add a clickhandler to the submitbutton:
$('#submitForm').click(function(){
var isChecked = $('#AcceptMe').attr('checked')?true:false;
if(isChecked){
alert('checked!');
if(linkClicked){
alert('Link clicked!');
}
else{
alert('Click link first!');
}
else{
alert('please check the checkbox!');
}
});
JSFiddle here: http://jsfiddle.net/8o4an9xf/
Please note that you should add target="_blank", because the link will otherwise override the document.location. Or you could open the content you want to show in a modal window (which is nicer).
I think you must use "return false"
My code is clear and simple.
If its not matter for you to have in-line code try below:
<body>
<form>
<a id="Link1" href="#" onclick="$('#Link1').addClass('visited');
alert('add \'visited\' class to \'#Link1\'');">
</a>
<input type="checkbox" id="AcceptMe" />
<input type="submit" name="submit" onclick="
if( $('#AcceptMe').is(':checked')){
alert('checkbox is :' + $('#AcceptMe').is(':checked'));
if(!$('#Link1').hasClass('visited')){
alert('please visit link1');
return false;
};
}else{
return false;
}
" />
</form>
</body>

How to submit a form when a checkbox is checked?

I want to submit a form only when a check box is checked, or display "Please check the check box", is there any way to do that? Can any one guide me ?
thanks
<form name="myForm" action="mailsent.php" method="post">
<input type="checkbox" class="chk_row" name="chk1[]"" value=" '.$rows["id"].'"/>
<input type="submit" value="" style="margin:7px 26px -27px 1424px;background-image: url(/image/exporttt.png);background-repeat: no-repeat;cursor:pointer;" >
</form>
Edited code:
<form name="myForm" action="mailsent.php" method="post">
<input type="checkbox" class="chk_row" id="chk1" name="chk1[]"" value=" '.$rows["id"].'"/>
<input type="submit" value="" style="margin:7px 26px -27px 1424px;background-image: url(/image/exporttt.png);background-repeat: no-repeat;cursor:pointer;" >
</form>
<script>
$('form').submit(function(){
if(!$('#chk1').is(':checked')){
alert("Please Check ");
return false;
}
});
</script>
Using JQuery
You should give your checkbox unique ID
$('form').submit(function(){
var flag=0;
$('.chk_row').each(function(){
if(($(this).is(':checked'))){
flag=1
return false;
}
});
if(flag==0){
alert("Please Check Checkbox");
return false
}
});
Your your_checkboxId is what you give id in your input chekcbox
eg.
<input type="checkbox" id="your_checkboxId" name="chk_name" value="some" / >
You can validate using jquery, give your submit button with id 'submit', and then use this code
$('#submit').click(function(e){
e.preventDefault();
if( $("[name='chk1[]']").is( ':checked')){
return true;
} else {
// your custom code here
return false;
}
})
try this
$("#submit").click(function(e)
{
if($("#check").is(':checked'))
{
$("#form").prop("action","mailsent.php");
}else
{
e.preventDefault();
}
});
And you need not specify the action in form tag. #form is id of form, #check is id of checkbox.
assuming there is only one checkbox here, and I am selecting it using the class name. You may modify the selector as per the implementation to pick the desired one.
$(document).ready(function(){
$('.chk_row').change(function(e){
if($(this).attr('checked') === 'checked')
{
$('form[name="myForm"]').submit();
}
});
});

Check box and text field validation javascript

I have a text field and a checkbox on a mobile website that needs to be required before submitting the form. One is a zip code search that needs to be required to go on, and also a check box for a terms and conditions.
Right now i have the textfield validation working...
<script>
function validateForm() {
var x=document.forms["searchform"]["fromAddress"].value;
if (x==null || x=="") {
alert("Oops! You forgot to enter a location.");
return false;
}
}
</script>
but i cant figure out how to add in the checkbox...
below is the code for the form:
<form name="searchform" method="post" action="list.php" onsubmit="return validateForm()">
<input type="hidden" name="search" value="1" />
<input class="txtfield" type="search" id="search" name="fromAddress" onfocus="this.value=''" />
<div class="terms-container">
<div class="terms-checkbox-container">
<input class="acceptterms" type="checkbox" name="agree" value="agree_terms">
</div>
<div class="terms-text-container">
I Agree to the Terms and Conditions
</div>
</div>
<input class="btn-submit" type="submit" id="submit" value="Go!"/>
</form>
any help would be great. Thanks!
I believe you can check the checkbox's checked property:
var checked = document.forms["searchform"]["agree"].checked;
if (!checked) {
alert("Oops! Please check the checkbox!");
return false;
}
You can get the state of the checkbox using checked attribute. So, you can do something like this.
<script>
function validateForm() {
var x=document.forms["searchform"]["fromAddress"].value;
var y=document.forms["searchform"]["agree"].checked;
if (x==null || x=="") {
alert("Oops! You forgot to enter a location.");
return false;
}
if (y === false) {
alert("Oops! You forgot to agree to the terms and Conditions");
return false;
}
}
</script>
Use below code:
var agreeCheckbox = document.forms["searchform"]["agree"];
if(!agreeCheckbox.checked) {
alert('You need to accept terms to submit');
return false;
}
return true;
You can use that
function validateForm()
{
var x=document.forms["searchform"]["fromAddress"].value;
if (x==null || x=="")
{
alert("Oops! You forgot to enter a location.");
return false;
}
var checkbox = document.forms['searchform']['agree'];
if (!checkbox.checked) {
alert('Oops! You must agree with Terms');
return false;
}
return true;
}
http://jsfiddle.net/KkYmX/5/
you can use this answer for form validation in the checkbox
//checkbox
var m=document.getElementById("client");
console.log(m)
if(!m.checked){
document.getElementById("bekar").innerHTML="please agree term & condition ";
document.getElementById("bekar").style="color:red";
return false;
}
else{
document.getElementById("bekar").innerHTML="";
}
<input type="checkbox" class="form-check-input" id="isclient" required>
<label class="form-check-label" for="isclient"> I want you to work on a project with me</label><br><span id="bekar"></span>

Checkboxes with anchors

I have a ton of check-box's that are linked to anchors. When a check-box is clicked it goes to that anchor which is in the same page. Is there a better way to code this? I have about 50 check-box's so this function is packed with if statements.This is the working code for 2 of them:
<input type="checkbox" id="1" value="1" onclick="return send();"/>
<input type="checkbox" id="2" value="2" onclick="return send();"/>
<script>
function send(){
if(document.getElementById('1').checked){
window.location='#buy';
return false;
}
if(document.getElementById('2').checked){
window.location='#order';
return false;
}
//and this function goes on and on and on...
return true;
}
</script>
And then in the page where I want it to go has
<a name="buy"></a>
<a name="order"></a>
jQuery will save your nerves here:
$('input:checkbox').click(function () {
windows.location = $(this).attr('value');
});
Simply make sure you change the anchors to match the checkboxes.
If you added the hash into the value of the input like so:
<input type="checkbox" id="2" value="buy" onclick="return send(this);"/>
You could do it like so
<script>
function send(input)
{
if(input.checked)
{
window.location = input.value;
return true;
}
return true;
}
</script>
If that doesn't work you could also switch out the value to use ID or even a custom attribute. Whatever suits your fancy.
HTML:
<input type="checkbox" id="checkbox1" value="1" data-target="buy" onclick=" send(this)">
<input type="checkbox" id="checkbox2" value="2" data-target="order" onclick="send(this)">
Javscript:
function send(el){
var target = '#' + el.getAttribute('data-target');
window.location = target ;
}

Categories

Resources