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.
Thanks.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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> </td>
<td valign="top">
<table>
<tr><td><strong>Address:</ strong></t d></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>Teleph one:</stro ng></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.len gth==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.len gth==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></t d></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.len gth==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.len gth==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</o ption>
</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</o ption>
</select></td></tr>
</table>
</td>
</tr>
</table>
<cfelse>
<table width="100%" border="1" bordercolor="##669955" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td valign="top">
<table>
<tr><td><strong>Address:</ strong></t d></tr>
<tr><td>#address#</td></tr >
<tr><td>#address2#</td></t r>
<tr><td>#city#<cfif #city# neq "">, #state# #zip#<cfif #zip2# neq "">-#zip2#<cfelse></cfif>< cfelse></c fif></td>< /tr>
</table>
</td>
<td valign="top">
<table>
<tr><td width="125"><strong>Teleph one:</stro ng></td></ tr>
<tr><td>#areacode#-#prefix #-#number# </td></tr>
</table>
</td>
<td valign="top">
<table>
<tr><td width="125"><strong>Fax:</ strong></t d></tr>
<tr><td>#faxareacode#-#fax prefix#-#f axnumber#< /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>
<cfif can_edit>
<table width="100%" border="1" bordercolor="##669955" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td valign="top">
<table>
<tr><td><strong>Address:</
<tr><td><input type="text" value="#address#" name="address" style="width:280px"></td><
<tr><td><input type="text" value="#address2#" name="address2" style="width:280px"></td><
<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
</table>
</td>
<td valign="top">
<table>
<tr><td width="125"><strong>Teleph
<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.len
<td><input type="text" value="#prefix#" name="prefix" style="width:30px" size="3" maxlength="3"
onClick="this.value='';" onKeyUp="if(this.value.len
<td><input type="text" value="#number#" name="number" style="width:50px" size="4" maxlength="4"
onClick="this.value='';" onFocus="this.value='';"><
</tr></table>
</td></tr>
</table>
</td>
<td valign="top">
<table>
<tr><td width="125"><strong>Fax:</
<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.len
<td><input type="text" value="#faxprefix#" name="faxprefix" style="width:30px" size="3" maxlength="3"
onClick="this.value='';" onKeyUp="if(this.value.len
<td><input type="text" value="#faxnumber#" name="faxnumber" style="width:50px" size="4" maxlength="4"
onClick="this.value='';" onFocus="this.value='';"><
</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 value="no" <cfif #compease# eq 'no'>selected</cfif>>No</o
</select></td></tr>
<tr><td>Performease: <select name="performease" style="width:50px">
<option value="yes" <cfif #compease# eq 'yes'>selected</cfif>>Yes<
<option value="no" <cfif #compease# eq 'no'>selected</cfif>>No</o
</select></td></tr>
</table>
</td>
</tr>
</table>
<cfelse>
<table width="100%" border="1" bordercolor="##669955" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td valign="top">
<table>
<tr><td><strong>Address:</
<tr><td>#address#</td></tr
<tr><td>#address2#</td></t
<tr><td>#city#<cfif #city# neq "">, #state# #zip#<cfif #zip2# neq "">-#zip2#<cfelse></cfif><
</table>
</td>
<td valign="top">
<table>
<tr><td width="125"><strong>Teleph
<tr><td>#areacode#-#prefix
</table>
</td>
<td valign="top">
<table>
<tr><td width="125"><strong>Fax:</
<tr><td>#faxareacode#-#fax
</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();" >
if it is the first form field in each case
<bocy onload="document.forms[0].
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 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)
ASKER
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.accountfo rm[0].elem ent[0].foc us();">
I replaced forms with accountform(the name of my form), do I need to replace element with anything?
<body onload="documnet.accountfo
I replaced forms with accountform(the name of my form), do I need to replace element with anything?
ASKER
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.addre ss.focus() ;
</script>
<cfelseif can_editcontact>
<script language="JavaScript">
document.accountform.first name.focus ();
</script>
<cfelseif can_addcontact>
<script language="JavaScript">
document.accountform.first name.focus ();
</script>
</cfif>
<cfif can_edit>
<script language="JavaScript">
document.accountform.addre
</script>
<cfelseif can_editcontact>
<script language="JavaScript">
document.accountform.first
</script>
<cfelseif can_addcontact>
<script language="JavaScript">
document.accountform.first
</script>
</cfif>
typo
<body onload="documnet.accountfo rm[0].elem ents[0].fo cus();">
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
<body onload="documnet.accountfo
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
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('f ieldname1' ).focus();
<cfelse>
document.getElementById('f ieldname2' ).focus();
</cfif>
</script>
<cfif editing>
document.getElementById('f
<cfelse>
document.getElementById('f
</cfif>
</script>
thanks for teh points, but a B?
Is the selection of add or edit client side?
CJ