Jump to content

checkbox validation on click

vinpkl

By vinpkl
in Javascript Help

Recommended Posts

vinpkl Regular Member

vinpkl

Posted
Posted

Hi all

 

The below validation code works fine when the form gets submit.

 

But i want to apply validation "onclick" of button instead of "onsubmit"

 

How can i apply validation "onclick" of button instead of "onsubmit"

 

 

<html>
<head>
<script language="javascript">
function checkForm(frm){
var destCount = frm.elements['dest[]'].length;
var destSel   = false;
for(i = 0; i < destCount; i++){
if(frm.elements['dest[]'][i].checked){
destSel = true;
break;
}
}

if(!destSel){
alert('Select one or more destinations');
}
return destSel;
}
</script>
</head>
<body>
Select at least one destination
<form action="" method="post" onSubmit="return checkForm(this);">
<input id="cx" type="checkbox" name="dest[]" value="CX" />   <label for="cx">Cox's Bazar</label><br />
<input id="su" type="checkbox" name="dest[]" value="SU" />   <label for="su">Sundarban</label><br />
<input id="sy" type="checkbox" name="dest[]" value="SY" />   <label for="sy">Sylhet</label><br />
<input id="ch" type="checkbox" name="dest[]" value="CH" />   <label for="ch">Chittagong</label><br />
<br />
<input type="submit" name="Go" value="  Go  " />
</form>
</body>
</html>
 

 

Thanks

Vineet

 

Link to comment
https://forums.phpfreaks.com/topic/288646-checkbox-validation-on-click/
Share on other sites
PravinS Member

PravinS

Posted
Posted

Just remove  onsubmit="return checkForm(this);" from form tag and add it to button as  onclick="return checkForm(this);"

 

Use this

<form action="" method="post">
<input id="cx" type="checkbox" name="dest[]" value="CX" />   <label for="cx">Cox's Bazar</label><br />
<input id="su" type="checkbox" name="dest[]" value="SU" />   <label for="su">Sundarban</label><br />
<input id="sy" type="checkbox" name="dest[]" value="SY" />   <label for="sy">Sylhet</label><br />
<input id="ch" type="checkbox" name="dest[]" value="CH" />   <label for="ch">Chittagong</label><br />
<br />
<input type="submit" name="Go" value="  Go  "  onclick="return checkForm(this);"/>
</form>
vinpkl Regular Member

vinpkl

Posted
  • Author
Posted

Hi Pravin

 

I just tested your code but it doesnt show alert.

 

it doesnt works

 

vineet

 

 

<html>
<head>
<script language="javascript">
function checkForm(frm){
var destCount = frm.elements['dest[]'].length;
var destSel   = false;
for(i = 0; i < destCount; i++){
if(frm.elements['dest[]'][i].checked){
destSel = true;
break;
}
}

if(!destSel){
alert('Select one or more destinations');
}
return destSel;
}
</script>
</head>
<body>
Select at least one destination
<form action="" method="post">
<input id="cx" type="checkbox" name="dest[]" value="CX" />   <label for="cx">Cox's Bazar</label><br />
<input id="su" type="checkbox" name="dest[]" value="SU" />   <label for="su">Sundarban</label><br />
<input id="sy" type="checkbox" name="dest[]" value="SY" />   <label for="sy">Sylhet</label><br />
<input id="ch" type="checkbox" name="dest[]" value="CH" />   <label for="ch">Chittagong</label><br />
<br />
<input type="submit" name="Go" value="  Go  "  onclick="return checkForm(this);"/>
</form>
</body>
</html>
 
PravinS Member

PravinS

Posted
Posted

use this code


<html>
<head>
<script language="javascript">
function checkForm(){
var obj = document.getElementsByName('dest[]');
var destCount = obj.length;
var destSel   = false;
for(i = 0; i < destCount; i++){
if(obj.checked == false){
destSel = true;
break;
}
}

if(!destSel){
alert('Select one or more destinations');
}
return destSel;
}
</script>
</head>
<body>
Select at least one destination
<form action="" method="post">
<input id="cx" type="checkbox" name="dest[]" value="CX" />   <label for="cx">Cox's Bazar</label><br />
<input id="su" type="checkbox" name="dest[]" value="SU" />   <label for="su">Sundarban</label><br />
<input id="sy" type="checkbox" name="dest[]" value="SY" />   <label for="sy">Sylhet</label><br />
<input id="ch" type="checkbox" name="dest[]" value="CH" />   <label for="ch">Chittagong</label><br />
<br />
<input type="submit" name="Go" value="  Go  "  onclick="return checkForm();"/>
</form>
</body>
</html>

also check the jsfiddle

vinpkl Regular Member

vinpkl

Posted
  • Author
Posted

Hi Pravin

 

I tried your code.

 

It is showing the alert even if i have checked 2 checkboxes.

 

I dont want to show alert if the checkboxes have been checked.

 

Vineet

 

 

<html>
<head>
<script language="javascript">
function checkForm(){
var obj = document.getElementsByName('dest[]');
var destCount = obj.length;
var destSel   = false;
for(i = 0; i < destCount; i++){
if(obj.checked == false){
destSel = true;
break;
}
}
if(!destSel){
alert('Select one or more destinations');
}
return destSel;
}
</script>
</head>
<body>
Select at least one destination
<form action="" method="post">
<input id="cx" type="checkbox" name="dest[]" value="CX" />   <label for="cx">Cox's Bazar</label><br />
<input id="su" type="checkbox" name="dest[]" value="SU" />   <label for="su">Sundarban</label><br />
<input id="sy" type="checkbox" name="dest[]" value="SY" />   <label for="sy">Sylhet</label><br />
<input id="ch" type="checkbox" name="dest[]" value="CH" />   <label for="ch">Chittagong</label><br />
<br />
<input type="submit" name="Go" value="  Go  "  onclick="return checkForm();"/>
</form>
</body>
</html>

 

 

PravinS Member

PravinS

Posted
Posted

use this updated javascript function

function checkForm()
{
	var obj = document.getElementsByName('dest[]');
	var destCount = obj.length;
	var destSel   = false;
	for(var i = 0; i < destCount; i++)
	{
		if(obj[i].checked == true)
			destSel = true;
	}
	if(destSel == false)
	{
		alert('Select one or more destinations');
	}
	return destSel;
}
vinpkl Regular Member

vinpkl

Posted
  • Author
Posted

Hi Pravin

 

This code works perfect.

 

Thanks a lot

 

Vineet

 

 

use this updated javascript function

function checkForm()
{
	var obj = document.getElementsByName('dest[]');
	var destCount = obj.length;
	var destSel   = false;
	for(var i = 0; i < destCount; i++)
	{
		if(obj[i].checked == true)
			destSel = true;
	}
	if(destSel == false)
	{
		alert('Select one or more destinations');
	}
	return destSel;
}

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.