checkbox validation and confirm alert

**vineet** · 06-22-2009, 04:19 AM

hi all

i have one form inside other form in which i have delete button and i want to apply validation on it.

This is form code

Code:

<form id="form1" name="form1" method="get" action="" onsubmit='return cbox();'>
<?php
echo "<form name='del_sel' method='post'>"; 
echo "<td valign='top' colspan='9'><input name='submit' type='submit' value='Delete Selected' onClick=\"return confirm('Are you 100% totally certain that you want to DELETE this ?')\"/>";
echo "<input type='hidden' name='checkbox[]' value=".$row2['order_id']." />";
echo "</td>";
echo "</form>";
?>
</form>

this is validation function which checks whether one checkbox is selected or not.

Code:

function cbox()
{
var chks = document.getElementsByName('checkbox[]');
var hasChecked = false;
for (var i = 0; i < chks.length; i++)
{
if (chks[i].checked)
{
hasChecked = true;
break;
}
}
if (hasChecked == false)
{
alert("Please select at least one.");
return false;
}
return true;
}

now the problem is that cbox() function and confirm function both appears one after another. i want that if cbox() returns true means if any one of the chekbox is selected then only the confirm alert should appear otherwise it should not appear.

vineet

**Jesdisciple** · 06-22-2009, 04:48 AM

You're using two functions to do something that one can do by itself. You're also using HTML event attributes, which are poor practice. The below code separates layout and operation in accordance with current best-practices (or at least the strain I agree with - all of them do it but in different ways and to different extents).

Code:

<form id="form1" name="form1" method="get" action="">
<?php
echo "<form name='del_sel' method='post'>"; 
echo "<td valign='top' colspan='9'><input name='submit' type='submit' value='Delete Selected'/>";
echo "<input type='hidden' name='checkbox[]' value=".$row2['order_id']." />";
echo "</td>";
echo "</form>";
?>
</form>

Code:

window.onload = function(){
    document.forms.namedItem('form1').registerEventListener('submit', cbox, false);
};
function cbox(event)
{
event = event || window.event;
var success = true;
var chks = document.getElementsByName('checkbox[]');
var hasChecked = false;
for (var i = 0; i < chks.length; i++)
{
if (chks[i].checked)
{
hasChecked = true;
break;
}
}
if (hasChecked == false)
{
alert("Please select at least one.");
success = false;
}
success = success && confirm('Are you 100% totally certain that you want to DELETE this ?'))
if(!success)
event.preventDefault();
return success;
}
HTMLElement.prototype.registerEventListener = function(type, listener, useCapture){
	if(this.addEventListener)
		this.addEventListener(type, listener, useCapture);
	else if(this.attachEvent)
		this.attachEvent('on' + type, listener);
	else
		this['on' + type] = listener;
};

**vineet** · 06-22-2009, 05:31 AM

hi Jesdisciple

i inserted the script in the <head></head> and got error and it doesnt alert anything

Code:

line : 41
Char: 92
Error: Expected';'
Code:0

From where do we count line 41. From <doc type> or from <script>.

The is <head> part

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" href="includes/styles2.css" />
<script language="javascript">
function chose()
{
if(document.form1.choice.value=='0')
{
alert("choose your option");
return false;
}
}
window.onload = function(){
    document.forms.namedItem('form1').registerEventListener('submit', cbox, false);
};
function cbox(event)
{
event = event || window.event;
var success = true;
var chks = document.getElementsByName('checkbox[]');
var hasChecked = false;
for (var i = 0; i < chks.length; i++)
{
if (chks[i].checked)
{
hasChecked = true;
break;
}
}
if (hasChecked == false)
{
alert("Please select at least one.");
success = false;
}
success = success && confirm('Are you 100% totally certain that you want to DELETE this ?'))
if(!success)
event.preventDefault();
return success;
}
HTMLElement.prototype.registerEventListener = function(type, listener, useCapture){
	if(this.addEventListener)
		this.addEventListener(type, listener, useCapture);
	else if(this.attachEvent)
		this.attachEvent('on' + type, listener);
	else
		this['on' + type] = listener;
};
</script>
</head>

vineet

**Jesdisciple** · 06-22-2009, 06:06 AM

On the line with the call to confirm(), replace the last paren with a semicolon. (The semicolon isn't necessary, but I guess I just like consistency between languages.)

**vineet** · 06-22-2009, 06:18 AM

Originally Posted by Jesdisciple

On the line with the call to confirm(), replace the last paren with a semicolon. (The semicolon isn't necessary, but I guess I just like consistency between languages.)

hi Jesdisciple

with "Last Paren" If u mean the last bracket then i replaced the last bracket with semi colon

Code:

success = success && confirm('Are you 100% totally certain that you want to DELETE this ?');

and received another error

Code:

Line:20
char:5
object doesnt support this property or method

vineet

**Jesdisciple** · 06-22-2009, 06:30 AM

I don't get any error, and the indicated line only contains a curly bracket. What browser are you using (Firefox 3.0.5 here) and what triggered the error?

**vineet** · 06-22-2009, 06:37 AM

Originally Posted by Jesdisciple

I don't get any error, and the indicated line only contains a curly bracket. What browser are you using (Firefox 3.0.5 here) and what triggered the error?

hi Jes

i m using IE 7. Try it in IE 7 it wil show error in status bar.

i just opened the file it showed me this error in the status bar.

Firefox here also doesnt show any error.

vineet

**Jesdisciple** · 06-22-2009, 05:46 PM

I'm running Linux, but I'll try to install ies4linux so I can test in IE7.

In the mean time, when you view the page's source what's on line 20? There should be line numbers somewhere or maybe an option to Edit > Go To Line...

Thread: checkbox validation and confirm alert

Thread Tools

Search Thread

checkbox validation and confirm alert

Bookmarks

Bookmarks

Posting Permissions