Solved

Set focus on input form

Posted on 2003-11-12
11
16,069 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

U.S. Department of Agriculture and Acronis Access

With the new era of mobile computing, smartphones and tablets, wireless communications and cloud services, the USDA sought to take advantage of a mobilized workforce and the blurring lines between personal and corporate computing resources.

Question has a verified solution.

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

Article by: kevp75
Hey folks, 'bout time for me to come around with a little tip. Thanks to IIS 7.5 Extensions and Microsoft (well... really Windows 8, and IIS 8 I guess...), we can now prime our Application Pools, when IIS starts. Now, though it would be nice t…
Periodically we have to update or add SSL certificates for customers. Depending upon your hosting plan you may be responsible for the installation and/or key generation. In the wake of Heartbleed many sites were forced to re-key. We will concen…
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…

752 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