Results 1 to 10 of 10

Thread: How to select 'active' button with onclick event?

  1. #1
    Join Date
    Aug 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to select 'active' button with onclick event?

    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!


  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    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>
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

    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...
    -- Chris
    informal JavaScript student of Douglas Crockford
    I like wikis - a lot.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    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>
    - Mike

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by mburt View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Okay, so sacksem meant for the submit button to have two seperate "action" attributes?
    - Mike

  8. #8
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

    Quote Originally Posted by mburt View Post
    Okay, so sacksem meant for the submit button to have two seperate "action" attributes?
    His pictures show two separate submit buttons. Two form elements fit the question perfectly.
    -- Chris
    informal JavaScript student of Douglas Crockford
    I like wikis - a lot.

  9. #9
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Two form elements fit the question perfectly.
    Exactly.
    - Mike

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by mburt View Post
    Exactly.
    Hey, that's my line!
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •