How to select 'active' button with onclick event?

**sacksem** · 08-01-2008, 03:11 PM

Not sure exactly how to phrase this using proper html or javascript terminology, but I'd like to know how to have the 'active' button change when the user clicks a certain field. This is for a SharePoint WSS 3.0 page, but I think the concept should be the same for any programming.

As you'll see with the attached screenshot, I would like to have the active button be "look it up" when a user clicks in either the first name or last name boxes, so that they can enter info then just hit enter and that button will activate. Likewise, if they enter a zip code in the dataview webpart below for Weather forecast, i'd like "Go" to be activated when a user clicks in the zip code text field. Sorry for my noobishness!

**rangana** · 08-02-2008, 04:43 AM

HTML Code:

<script type="text/javascript">
window.onload=function(){
var fname=document.getElementById('fname'),
lname=document.getElementById('lname'),
look=document.getElementById('look'),
go=document.getElementById('go'),
zip=document.getElementById('zip'),
def='Default'; // Set the button's default text. Should match on whats on your markup
document.getElementsByTagName('input')[0].focus(); // Set the focus to the first textbox
go.disabled=true;
lname.onfocus=function(){look.disabled=false;go.disabled=true;}
fname.onfocus=function(){look.disabled=false;go.disabled=true;}
zip.onfocus=function(){go.disabled=false;look.disabled=true;}
}
</script>
<form action="http://www.google.com" id="myform">
<label for="fname">First Name: </label><input type="text" id="fname"><br>
<label for="lname">Last Name:  </label><input type="text" id="lname"><br>
<input type="button" value="Look it up" id="look">
<br>
<label for="zip">Zip Code: </label><input type="text" id="zip">
<input type="button" value="Go" id="go">
</form>

**Jesdisciple** · 08-02-2008, 04:52 AM

What you're referring to is "focus." Only one element may have it at a time; when a text-input shows its cursor, it has focus. If you make the text-input automatically pass focus to the button, your visitors can't type anything. However, if your button is an <input type="submit"> then the parent form will automatically "press" it when another element in the form has focus and the user presses Enter.

So the solution is to use <input type="submit"> for submit-buttons. (If a form has multiple submit-buttons I think it "presses" the first one.)

EDIT: Since Rangana gave a JS solution, maybe I didn't understand you...

**jscheuer1** · 08-02-2008, 02:58 PM

The default action of a form is to activate it's submit button when the user hits Enter. So all you need to do is have two forms, one for the name lookup and another for the weather. When a user has focused on either of these forms by entering text into their text inputs, Enter will submit that form. No javascript required.

**mburt** · 08-03-2008, 04:00 AM

Not sure if this is what you mean, but you can give it a shot:

Code:

<form action="formpage.php" method="post">
	First Name:
	<input type="text" onclick="this.parentElement['enter'].value = 'Look it up'">
	<br>Zip Code:
	<input type="text" onclick="this.parentElement['enter'].value = 'Go'">
	<br><input type="submit" name="enter">
</form>

**jscheuer1** · 08-03-2008, 06:10 AM

Originally Posted by mburt

Not sure if this is what you mean, but you can give it a shot:

Code:

<form action="formpage.php" method="post">
	First Name:
	<input type="text" onclick="this.parentElement['enter'].value = 'Look it up'">
	<br>Zip Code:
	<input type="text" onclick="this.parentElement['enter'].value = 'Go'">
	<br><input type="submit" name="enter">
</form>

Nope, that's not what they meant. This would best be done with two separate forms as I stated. That way the default behavior of each form would accomplish what the original poster requested.