Solved

Set focus on input form

Posted on 2003-11-12
11
16,066 Views
Last Modified: 2013-12-24
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.
0
Comment
Question by:swartout
11 Comments
 
LVL 25

Accepted Solution

by:
James Rodgers earned 125 total points
ID: 9732033
if you have a variable to determin the status: add/edit

<script>

function thisOnLoad(){
<cfif var eq 'edit'>

 document.form.element.focus();
<cfelseif var eq 'add'>

 document.form.otherElement.focus();
</cfif>
}
</script>
0
 
LVL 19

Expert Comment

by:cheekycj
ID: 9732150
can u post your form?

Is the selection of add or edit client side?

CJ
0
 

Author Comment

by:swartout
ID: 9733516
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>
0
Enterprise Mobility and BYOD For Dummies

Like “For Dummies” books, you can read this in whatever order you choose and learn about mobility and BYOD; and how to put a competitive mobile infrastructure in place. Developed for SMBs and large enterprises alike, you will find helpful use cases, planning, and implementation.

 
LVL 25

Expert Comment

by:James Rodgers
ID: 9733587
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();">
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 9733635
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)
0
 

Author Comment

by:swartout
ID: 9733699
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?
0
 

Author Comment

by:swartout
ID: 9733706
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>
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 9733783
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
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 9733931
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

0
 

Expert Comment

by:emadsenus
ID: 9743567
<script language="javascript">
<cfif editing>
document.getElementById('fieldname1').focus();
<cfelse>
document.getElementById('fieldname2').focus();
</cfif>
</script>
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 10104975
thanks for teh points, but a B?
0

Featured Post

Building an interactive eFuture classroom

Watch and learn how ATEN provided a total control system solution including seamless switching matrix switch, HDBaseT extenders, PDU, lighting control to build an interactive eFuture classroom.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In our day to day coding, how many times have we come across a necessity to check whether a URL is a broken link or not? For those of you that answered countless and are using ColdFusion like myself, then this article is for you.  It will show yo…
Have you ever sent email via ColdFusion and thought of tracking this mail to capture the exact date and time when the message was opened ?  If yes, then this article is for you ! First we need a table user_email with columns user_id , email , sub…

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question