PDA

View Full Version : 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


<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.


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).
<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>


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



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


<!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
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


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


and received another error


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
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...