Solved

Set focus on input form

Posted on 2003-11-12
11
16,031 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
Comment Utility
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
Comment Utility
can u post your form?

Is the selection of add or edit client side?

CJ
0
 

Author Comment

by:swartout
Comment Utility
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
 
LVL 25

Expert Comment

by:James Rodgers
Comment Utility
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
Comment Utility
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:swartout
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
<script language="javascript">
<cfif editing>
document.getElementById('fieldname1').focus();
<cfelse>
document.getElementById('fieldname2').focus();
</cfif>
</script>
0
 
LVL 25

Expert Comment

by:James Rodgers
Comment Utility
thanks for teh points, but a B?
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

Most ColdFusion developers get confused between the CFSet, Duplicate, and Structcopy methods of copying a Structure, especially which one to use when. This Article will explain the differences in the approaches with examples; therefore, after readin…
If you don't have the right permissions set for your WordPress location in IIS, you won't be able to perform automatic updates. Here's how to fix the problem.
This video discusses moving either the default database or any database to a new volume.
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…

763 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now