Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 16091
  • Last Modified:

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.
0
swartout
Asked:
swartout
1 Solution
 
James RodgersWeb Applications DeveloperCommented:
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
 
cheekycjCommented:
can u post your form?

Is the selection of add or edit client side?

CJ
0
 
swartoutAuthor Commented:
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
[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

 
James RodgersWeb Applications DeveloperCommented:
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
 
James RodgersWeb Applications DeveloperCommented:
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
 
swartoutAuthor Commented:
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
 
swartoutAuthor Commented:
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
 
James RodgersWeb Applications DeveloperCommented:
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
 
James RodgersWeb Applications DeveloperCommented:
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
 
emadsenusCommented:
<script language="javascript">
<cfif editing>
document.getElementById('fieldname1').focus();
<cfelse>
document.getElementById('fieldname2').focus();
</cfif>
</script>
0
 
James RodgersWeb Applications DeveloperCommented:
thanks for teh points, but a B?
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now