SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alternative to onClick

    Greetings all! So I'm using this:

    Code:
    <script language=JavaScript>
    function Array1() {
    this.length = Array1.arguments.length;
    for(var i = 0; i < this.length; i++) {
    this[i+1] = Array1.arguments[i];
    }
    }
    var engines = new Array1 (
    "http://www.google.com/search?q=",
    "http://www.altavista.com/cgi-bin/query?q="
    );
    function search(form) {
    var term = escape(form.query.value);
    var eng = parseInt(form.engine.selectedIndex);
    window.location.href = engines[eng+1] + term;
    }
    </script>
    <form method=POST action="">
    <input type=text name=query value="" size=20><BR>
    <select name=engine>
    <option>Google
    <option>Altavista
    </select>
    <input type=button value=Search onClick="search(this.form)">
    </form>
    Found at http://www.sitepoint.com/forums/show...n+search+sites

    It's perfect except I want to get rid of the search button. Is there a Javascript alternative to onClick; something like when a person types what they are looking for and just presses Return it acts like onClick? Thanks!

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    What if they don't have a keyboard (for whatever reason)? More importantly, the user might have just used their mouse to select the search engine from the <select> dropdown, so it makes sense that they will want to use their mouse to click a button after that.

    That said, the user can use Return anyway. When the focus is on the text box, pressing Return submits the form. The user can also use the tab key to switch focus to the button, which can be "pressed" using Return as well.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,799
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    For those with JavaScript enabled you can use an onchange on the select to test when a value has been selected and do away with the need for the button. You will still want the button there along with some server side code for when JavaScript is disabled.

    I have a series of tutorials at http://javascript.about.com/od/dropd...Navigation.htm that covers all the alternative ways to set up a drop down list or combo box for navigation.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    What if they don't have a keyboard (for whatever reason)? More importantly, the user might have just used their mouse to select the search engine from the <select> dropdown, so it makes sense that they will want to use their mouse to click a button after that.

    That said, the user can use Return anyway. When the focus is on the text box, pressing Return submits the form. The user can also use the tab key to switch focus to the button, which can be "pressed" using Return as well.
    Excellent points! The site I'll be using this on is an internal intranet where the browser used is tightly controlled. I'm for usability, but my manager would perfer the "cleaner" look of no submit button. I've tried various method to appease him without losing the accessibility, but in the end...

    For some reason, I must have an error in my javascript. After you enter text in the field box and press Return, it reloads the page instead of taking you to the search page.

  5. #5
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    For those with JavaScript enabled you can use an onchange on the select to test when a value has been selected and do away with the need for the button. You will still want the button there along with some server side code for when JavaScript is disabled.

    I have a series of tutorials at http://javascript.about.com/od/dropd...Navigation.htm that covers all the alternative ways to set up a drop down list or combo box for navigation.
    Hrmm, I'll take a look and post back. Thanks!

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It reloads the page because you haven't got anything for the "action" attribute. The value for that needs to be the path to the script that will handle the form submission (your search page).

  7. #7
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    It reloads the page because you haven't got anything for the "action" attribute. The value for that needs to be the path to the script that will handle the form submission (your search page).
    Raffles,

    I'm assuming I can't just put search(this.form) as an action? Since it's using an array to pull two separate URLs, what can I put in the action that will allow it to redirect it properly?

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I don't understand what you mean. In any case, the action attribute has to point to a script that will process the form submission on the server using a server-side language like PHP.

  9. #9
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Somebody here hinted at the solution, but then narrowly missed it...
    The code should be in an onSubmit handler for the form, not on the onClick handler for the button (which should be a "submit" button, not a "button" button).
    Once it's set up like this, hitting return in the textbox will submit the form, and your desired result will happen. You probably will also want to end your search function with return false, to make sure the form doesn't actually submit, but i'm not sure it's necessary.

  10. #10
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ablock View Post
    Somebody here hinted at the solution, but then narrowly missed it...
    The code should be in an onSubmit handler for the form, not on the onClick handler for the button (which should be a "submit" button, not a "button" button).
    Once it's set up like this, hitting return in the textbox will submit the form, and your desired result will happen. You probably will also want to end your search function with return false, to make sure the form doesn't actually submit, but i'm not sure it's necessary.
    Thanks for the reply! I'm sorry if this seems so elementary. I'm still trying to learn all this. So I did:

    Code:
    <form method=post onSubmit="search(this.form)" action="">
    Unfortunately it didn't work, unless I'm doing it wrong. But I think like Raffles had said earlier, the problem lies in the fact that my action is blank.

  11. #11
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, you don't want or need an action in this case...
    try the following <form onSubmit="search(this.form); return false">
    This is what I said I wasn't sure about before. You have to stop the form from submitting, so you the onSubmit function has to return false. This should work.

  12. #12
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ablock View Post
    Actually, you don't want or need an action in this case...
    try the following <form onSubmit="search(this.form); return false">
    This is what I said I wasn't sure about before. You have to stop the form from submitting, so you the onSubmit function has to return false. This should work.
    Very close! It seems now, instead of using the array, it's appending: "?engine=Phone+List&query=" to my url. Oh so close...

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    You'll need to change the form method. Right now it's using get, which is why you're seeing the querystring. You want it to use the post method instead, so that you don't see the values.

    Code Javascript:
    <form method="post" onSubmit="search(this.form); return false">
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    You'll need to change the form method. Right now it's using get, which is why you're seeing the querystring. You want it to use the post method instead, so that you don't see the values.

    Code Javascript:
    <form method="post" onSubmit="search(this.form); return false">
    I must be tripping or something because I've been using post...

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    There's only two ways that forms are submitted, get and post.
    The get method uses the querystring, which is your current stated problem.
    That means that your form is currently using the get method, whereas you are wanting it to use the post method.

    Anyhow, it is a good idea to use the get method when making requests of the database, and leaving the post method for making changes to the database.
    Last edited by paul_wilkins; Jan 18, 2008 at 15:31.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •