PDA

Click to See Complete Forum and Search --> : Forms and CheckBox

Slytherine
10-19-2003, 06:55 AM
Hi all!

I am a High School student now involving in a mini project with SHOPPING CARTS.

Some Questions :

<html>
<head>
<script language="JavaScript">


function anyCheck(form) {

var total = 0;
var max = form.ckbox.length;
for (var check = 0; check < max; check++) {
if (eval("document.Feedback.ckbox[" + check + "].checked") == true) {
total += 1;
}

}
var txt = total ;
document.forms[0].haha.value = txt
}

</script>
</head>
<body>
<form name="Feedback" action="formSent.html" method="post"
>
<input type=checkbox name=ckbox onClick="anyCheck(this.form)">

<input type=checkbox name=ckbox onClick="anyCheck(this.form)">

<input type=checkbox name=ckbox onClick="anyCheck(this.form)">

<input type=text name=haha size=1>
<input type="submit" name="Submit" onClick="anyCheck(this.form)" value="Buy"></td>
</form>
</body>
</html>

These are the codes in my document, currently

QS: How do i stop the user from submitting the form when he does not check on the checkbox.

One hint is that: When the user check on one box, the textbox will show "1". Similarly for 2 and 3 boxes.
Charles
10-19-2003, 07:30 AM
1) Lets start with valid HTML.

2) You almost never need to use the "eval()" function. If you do find yourself using it then you are doing something wrong.

3) In JavaScript, every line of code and every variable come with a huge overhead. It is important, and good programming, to conserve.

4) The total field will be useless for the 13% of users who do not use JavaScript so it would be better to draw that field with JavaScript. I haven't done so, though, for clarity.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>

<style type="text/css">
<!--
label {display:block; margin:1em 0em}
input {display:block}
-->
</style>

<script type="text/javascript">
<!--
function anyCheck(element) {
var total = 0;
for (var check = 0; check < element.form.chkbox.length; check++) {if (element.form.chkbox[check].checked == true) total ++};
element.form.total.value = total;
}
// -->
</script>

<form name="Feedback" action="formSent.html" method="post" >
<div>
<label><input type="checkbox" name="chkbox" onclick="anyCheck(this)">Fee</label>
<label><input type="checkbox" name="chkbox" onclick="anyCheck(this)">Fie</label>
<label><input type="checkbox" name="chkbox" onclick="anyCheck(this)">Foe</label>
<label><input type="checkbox" name="chkbox" onclick="anyCheck(this)">Fum</label>
<label>Number selected<input type="text" name="total" disabled></label>
<button type="submit">Submit</button>
</div>
</form>

All you need to add now is an "onsubmit" handler for the FORM element. The handler should return false (you should call it from the FORM element's start tag thusly, onsubmit="return require(this)") to keep the form from submitting. And note, your JavaScript variable "total" will be destroyed each time its function returns, so just check the "total" form field instead.