PDA

View Full Version : onsubmit and setting focus

Vermelh0
08-27-2002, 09:13 PM
I have an onsubmit function that validates all the page's controls. My problem is that if the page fails validation, that the focus should be returned to the control that caused the submit event and I can't figure out how to do that.
event.fromElement returns null, so how do I get the control responsible for the event????
Thanks guys,
V
D2K2
08-27-2002, 09:58 PM
could you use an IF and a FOCUS?

if (Blagh != Blagh2){
document.form1.text1.focus()
}
Vermelh0
08-27-2002, 11:00 PM
Hum, did you mean, something like, setting up a global variable with the control's id and then checking that variable when the validation failed?
I've had thought of this, but it sounds too messy, because I would have to override the enter key on the textfields to set the variable.
I was hoping for something simpler.......:)
V
adios
08-27-2002, 11:03 PM
Just curious - it's customary, when client-side validation fails, to set focus on the offending field(s) so it can be corrected. Why set focus back on the submitter that just failed? Hmm..:confused:
Vermelh0
08-27-2002, 11:17 PM
Hum... I don't think I explained myself properly.... (I don't really have a good grasp on how javascript interacts overall on a page, so bear with me...
But in my case, the submitter can be a textfield.... (i.e. someone presses enter on a textfield and the onsubmit form validator kicks in.) If validation fails, then I want that invalid textfield to have focus not the button.
V
adios
08-27-2002, 11:32 PM
Gotcha. Why not consider this: validate the entire form as a unit, regardless of how it was submitted. You can easily set focus on the first field that the validator finds invalid, after prompting the user accordingly. Some prefer a prompt that notes all the errors; I've always found these confusing and prefer individual prompts for each error, as detected. Matter of taste.

The programming problem here is that a form submission is an event of the Form object, not the particular element that triggers it. Probably a low-overhead way of finding out but, over my head...
Vermelh0
08-27-2002, 11:48 PM
I see....
Sounds easy to implement.... I'll try that, thanks again....
V
adios
08-28-2002, 12:07 AM
Just a simple example:

<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

var msg = Object; //prompts, indexed by field name
msg['sample1'] = 'Please fill in "Sample 1".';
msg['sample2'] = 'Please fill in "Sample 2".';
msg['more'] = 'Please select one of the "more" buttons.';
msg['other'] = 'Please select one of the "other" boxes.';
msg['extra'] = 'Type in something extra, please.';

function checkform(f) {
var el, e = 0;
while (el = f.elements[e++]) { //iterate
if (el.required) { //assigned in the onsubmit
switch (el.type) {
case 'text' :
case 'textarea' :
if (!el.value) { //empty
alert(msg[el.name]);
el.focus();
return false;
}
break;
case 'radio' :
case 'checkbox' :
var rad, r = -1, grp = f[el.name]; //get array
while (rad = grp[++r]) if (rad.checked) break; //end loop if one is checked
if (r == grp.length) { //loop ran fully without finding checked box
alert(msg[el.name]);
el.focus();
return false;
}
else e += grp.length-1; //one checked - increment & resume
break;
}
}
}
return true;
}

</script>
</head>
<body>
<font color=red>*</font> is required!
<form action="javascript:alert('Submitted !')" method="post"
onsubmit="sample1.required=true;
more[0].required=true;
other[0].required=true;
extra.required=true;
return checkform(this)">
<input name="sample1" type="text"><font color=red>*</font> sample 1<br>
<input name="sample2" type="text"> sample 2<br><br>
<input name="more" type="radio"><font color=red>*</font> more<br>
<input name="more" type="radio"><font color=red>*</font> lots more<br><br>
<input name="other" type="checkbox"><font color=red>*</font> other<br>
<input name="other" type="checkbox"><font color=red>*</font> other<br><br>
<input name="extra" type="text"><font color=red>*</font> extra<br><br>
<input type="submit" value="DONE">
</form>
</body>
</html>

cheers, adios