Field Focus problem

[Hanzelmans]

I'm trying to force users to provide data in one field if they answer "Yes" to a radio button in a form.

The script does display the message window correctly, however the focus is not sent back to the field that I have selected. Basically, once the user clicks the OK button in the message window it focuses on the field for a split second then submits the form.

Any suggestions?

<script language="JavaScript">
<!--
// Function to validate the form.
function ProcessForm()
{
var Proceed = 1;
var Message;
var FocusField;
while (Proceed == 1)
{
if (document.HPOne.HPMarriedOneYear[0].checked)
{
if (!document.HPOne.HPSpouseName.value)
{
Message = "Please enter the name of your spouse.";
FocusField = "HPSpouseName";
Proceed = 0;
break;
}
}
break;
}
if (Proceed == 0)
{
alert( Message );
if (FocusField != "")
{
eval("document.HPOne." + FocusField + ".focus()");
}
}
}
//-->
</script>

<CFOUTPUT>
<CENTER><span class="bmain3">Houseparent Interview</span></CENTER><br>
<CENTER>
<FORM NAME="HPOne" method="post">
<tr>
<td class="bblackfont" colspan=3>FULL-TIME HOUSEPARENT CANDIDATES
ONLY</td>
</tr>
<tr>
<td class="bblackfont">Have you been married to your current spouse
for at least one year (required for full-time position)? If
Yes,
please provide <strong>your spouse's full name</strong>.</td>
<td class="require">&raquo;</td>
<td class="nblackfont">
<input type="radio" name="HPMarriedOneYear" value="1">
Yes
<input type="radio" name="HPMarriedOneYear" value="0">
No&nbsp;&nbsp;
<input type="radio" name="HPMarriedOneYear" value="2">
N/A&nbsp;&nbsp;
<input type="text" name="HPSpouseName" maxlength="50">
</td>
</tr>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td align=CENTER class="nblackfont"><a href="javascript:document.HPOne.reset()" onClick="myReset()"><img src="/images/form_erase.gif" height=20 width=100 border=0 alt="Erase"></a>
&nbsp;&nbsp;
<input name="image" type=image onClick="ProcessForm()" src="/images/form_next.gif" alt="Next" width=100 height=20 border=0>
</td>
</tr>
</table>
</CENTER>
</form>
</CFOUTPUT>

Steve Hanzelman
Milton Hershey School

http://www.mhs-pa.org

 

[LFI]

When you use an input of type='image', it automatically serves as a 'submit' button. Change the tag to:

<[s]input[/s] [b]img[/b] name="image" [s]type=image[/s] onClick="ProcessForm()" src="/images/form_next.gif" alt="Next" width=100 height=20 border=0>

'hope that helps.

--Dave

 

[Hanzelmans]

Ok Dave, I'm going to sound dumb here. Now the form won't submit. The JavaScript works fine.

Should I just wrap the IMG tag with an HREF?

Thanks for the response,
Steve

Steve Hanzelman
Milton Hershey School

http://www.mhs-pa.org

 

[LFI]

Not necessarily (in re to need for the anchor/HREF tag).

Put a return; after the focus() statement. Then, following the close-curly-brace from the if(Proceed == 0) block, submit the form:

document.HPOne.submit();

This line will only be reached if focus was not sent back to the form.

By the way, eval(...) statements can slow things down sometimes. Consider changing:

eval("document.HPOne." + FocusField + ".focus()");

...to:

document.HPOne.elements[FocusField].focus();

Final function:

function ProcessForm()
{
 var Proceed = 1;
 var Message;
 var FocusField;
 while (Proceed == 1)
 {
  if (document.HPOne.HPMarriedOneYear[0].checked)
  {
   if (!document.HPOne.HPSpouseName.value)
   {
    Message = "Please enter the name of your spouse.";
    FocusField = "HPSpouseName";
    Proceed = 0;
    break;
   }
  }
  break;
 }

 if (Proceed == 0)
 {
  alert( Message );
  if (FocusField != "")
  {
   [b]document.HPOne.elements[FocusField].focus();[/b]
  }

  [b]return; //will return even if focus NOT sent back[/b]
 }

 [b]document.HPOne.submit();[/b]
}

'hope this helps!

--Dave

 

[Hanzelmans]

Dave,
Perfect! That was the answer.

Thanks for the help.

Steve

Steve Hanzelman
Milton Hershey School

http://www.mhs-pa.org