Parent | Child | Previous | Next
 

Setting Focus to a Control on a Dialog

Description

It is a common requirement, after opening a dialog box, to set focus to a specific control. You can add Javascript to your A5W page to move the focus to any of its controls.

  1. Create the dialog component.

  2. While in the Dialog Builder switch to the HTML tab. You will see code that looks something like this:

    </head>
<BODYclass="ArizonaModifiedPageBODY" >
<form name="Set_Field_Focus" style="margin: 0px;"method="POST" action="">
...
<tr>
     <td class="ArizonaModifiedColumnTD"><label for="TELEPHONE" >Telephone</label></td> 
     <td class="ArizonaModifiedDataTD"><input id="TELEPHONE" size="20" maxlength="20"class="ArizonaModifiedInput" type="TEXT" name="TELEPHONE" value="" ></td> 
</tr>

  3. The name of the form follows the name= parameter of the <form> tag. In this case the form's name is "Set_Field_Focus". The name of the field (that is to receive focus) follows the name= parameter of the <input> tag. In this case the field's name is "TELEPHONE".

    Names are case sensitive.

  4. Save the dialog component and place it on an A5W page.

  5. Open the new page in the HTML Editor.

  6. Switch to the Source tab.

  7. Modify the <body> tag to include something like: 

    <body onload="document.form.field.focus();">

  8. Change "form" to the name of your form (in this case "Set_Field_Focus"). Change "field" to the name of the field that is to receive focus (in this case "TELEPHONE").