Link to home
Start Free TrialLog in
Avatar of swartout
swartout

asked on

Set focus on input form

I have a form that the user can add or edit criteria.  I would like the cursor to be in a certain input field when the focus is on adding or editing.  How can I do this?  

Thanks.
ASKER CERTIFIED SOLUTION
Avatar of James Rodgers
James Rodgers
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
can u post your form?

Is the selection of add or edit client side?

CJ
Avatar of swartout
swartout

ASKER

Here is the portion of my form that I am talking about.

<cfif can_edit>
   <table width="100%"  border="1" bordercolor="##669955" cellpadding="0" cellspacing="0">
   <tr>
     <td>&nbsp;</td>
       <td valign="top">
         <table>
         <tr><td><strong>Address:</strong></td></tr>
         <tr><td><input type="text" value="#address#" name="address" style="width:280px"></td></tr>
         <tr><td><input type="text" value="#address2#" name="address2" style="width:280px"></td></tr>
         <tr><td><input type="text" value="#city#" name="city" style="width:150px">, <input type="text" value="#state#" name="state" style="width:30px"> <input type="text" value="#zip#" name="zip" style="width:45px">-<input type="text" value="#zip2#" name="zip2" style="width:45px"></td></tr>
         </table>
       </td>
       <td valign="top">
         <table>
         <tr><td width="125"><strong>Telephone:</strong></td></tr>
         <tr><td>
           <table><tr>
               <td><input type="text" value="#areacode#" name="areacode" style="width:30px" size="3" maxlength="3"
               onClick="this.value='';" onKeyUp="if(this.value.length==3) this.form.prefix.focus()" onFocus="this.value='';"></td>
               <td><input type="text" value="#prefix#" name="prefix" style="width:30px" size="3" maxlength="3"
               onClick="this.value='';" onKeyUp="if(this.value.length==3) this.form.number.focus()" onFocus="this.value='';"></td>
               <td><input type="text" value="#number#" name="number" style="width:50px" size="4" maxlength="4"
               onClick="this.value='';" onFocus="this.value='';"></td>
             </tr></table>
         </td></tr>
         </table>
       </td>
       <td valign="top">
         <table>
         <tr><td width="125"><strong>Fax:</strong></td></tr>
         <tr><td>
           <table><tr>
               <td><input type="text" value="#faxareacode#" name="faxareacode" style="width:30px" size="3" maxlength="3"
               onClick="this.value='';" onKeyUp="if(this.value.length==3) this.form.faxprefix.focus()" onFocus="this.value='';"></td>
               <td><input type="text" value="#faxprefix#" name="faxprefix" style="width:30px" size="3" maxlength="3"
               onClick="this.value='';" onKeyUp="if(this.value.length==3) this.form.faxnumber.focus()" onFocus="this.value='';"></td>
               <td><input type="text" value="#faxnumber#" name="faxnumber" style="width:50px" size="4" maxlength="4"
               onClick="this.value='';" onFocus="this.value='';"></td>
             </tr></table>
         </td></tr>
         </table>
       </td>
       <td valign="top">
         <table>
         <tr><td><strong>Support Systems:</strong></td></tr>
         <tr><td>Compease:  <select name="compease" style="width:50px">
                      <option value="yes" <cfif #compease# eq 'yes'>selected</cfif>>Yes</option>
                      <option value="no" <cfif #compease# eq 'no'>selected</cfif>>No</option>
                              </select></td></tr>
         <tr><td>Performease:  <select name="performease" style="width:50px">
                      <option value="yes" <cfif #compease# eq 'yes'>selected</cfif>>Yes</option>
                      <option value="no" <cfif #compease# eq 'no'>selected</cfif>>No</option>
                              </select></td></tr>
         </table>
       </td>
       </tr>
   </table>
<cfelse>
   <table width="100%"  border="1" bordercolor="##669955" cellpadding="0" cellspacing="0">
   <tr>
     <td>&nbsp;</td>
       <td valign="top">
         <table>
         <tr><td><strong>Address:</strong></td></tr>
         <tr><td>#address#</td></tr>
         <tr><td>#address2#</td></tr>
         <tr><td>#city#<cfif #city# neq "">, #state# #zip#<cfif #zip2# neq "">-#zip2#<cfelse></cfif><cfelse></cfif></td></tr>
         </table>
       </td>
       <td valign="top">
         <table>
         <tr><td width="125"><strong>Telephone:</strong></td></tr>
         <tr><td>#areacode#-#prefix#-#number#</td></tr>
         </table>
       </td>
       <td valign="top">
         <table>
         <tr><td width="125"><strong>Fax:</strong></td></tr>
         <tr><td>#faxareacode#-#faxprefix#-#faxnumber#</td></tr>
         </table>
       </td>
       <td valign="top">
         <table>
         <tr><td><strong>Support Systems:</strong></td></tr>
         <tr><td>Compease:  #compease#</td></tr>
         <tr><td>Performease:  #performease#</td></tr>
         </table>
       </td>
       </tr>
   </table>
   </cfif>
which field get the focus in each instance?

if it is the first form field in each case

<bocy onload="document.forms[0].element[0].focus();">
just out of curiosity, why use two forms?

i code one form for both add and edit with a flag set as a hidden field in the form so that in a the action page i either insert (add new record) or update (edit existing record)
I have not had any prior programming experience and have been working with coldfusion for about 6 months.  I am trying to put together a web site and I do so much by trial and error.  The reason I use the two forms is because that is how I got it to do what I wanted.  If there is a better way please share.  do I need to change what you provided to be

<body onload="documnet.accountform[0].element[0].focus();">

I replaced forms with accountform(the name of my form), do I need to replace element with anything?
I did try this and it seems to work. it is a variation of what you posted earlier.

<cfif can_edit>
<script language="JavaScript">
 document.accountform.address.focus();
</script>
<cfelseif can_editcontact>
<script language="JavaScript">
 document.accountform.firstname.focus();
</script>
<cfelseif can_addcontact>
<script language="JavaScript">
 document.accountform.firstname.focus();
</script>
</cfif>
typo

<body onload="documnet.accountform[0].elements[0].focus();">

should have been elements, but the above will only set the focust on the first form element


>>I have not had any prior programming experience and have been working with coldfusion for about 6 months

been there ... and still learning

>>I do so much by trial and error

been there too... wish i had forund EE from the begining, would have made things so  much easier
i did this in asp and it woked fine, should be transferable to CF

pseudocode - for a members page


run query
select*
from memebers
if url.memberid
where id= url.memberid
else
where id= null // if memeber.id is pk then no member will have a a null id

create form
if query has a record set edit=true else edit =false
output query to populate form fields
let user add/ edit as required, validate as necessary
submit form

on action page

if edit
update query
else
insert query

process as required

<script language="javascript">
<cfif editing>
document.getElementById('fieldname1').focus();
<cfelse>
document.getElementById('fieldname2').focus();
</cfif>
</script>
thanks for teh points, but a B?