Using SELECT value with onClick event

Discussion in 'Javascript' started by yankee, Jan 13, 2005.

  1. yankee

    yankee Guest

    Hi all,

    I have the following HTML code:

    <form>
    <table border=1 cellspacing=0 cellpadding=3>
    <tr>
    <td>Select a Document:</td>
    <td><SELECT name="type" id="type">
    <OPTION
    VALUE="/cgi-bin/doctrack.cgi?update_doc=1&doc_id=27&version=1&revision=0&no_sop=SOP1435">SOP1435
    <OPTION
    VALUE="/cgi-bin/doctrack.cgi?update_doc=1&doc_id=3&version=1&revision=0&no_sop=SOP2223">SOP2223
    <OPTION
    VALUE="/cgi-bin/doctrack.cgi?update_doc=1&doc_id=5&version=1&revision=0&no_sop=SOP2224">SOP2224
    <OPTION
    VALUE="/cgi-bin/doctrack.cgi?update_doc=1&doc_id=33&version=1&revision=0&no_sop=SOP2225">SOP2225
    </SELECT></td>
    </tr>
    </table></form>
    <BR>
    <input type="button" value="Next -->"
    onClick="document.forms[0].type.submit();">

    When I click on the button, I have a javascript error. I just want to
    execute the command into the "VALUE" argument when I click on the
    button. How I can do that?

    Thank you

    Regards,
    Yanick Quirion
     
    yankee, Jan 13, 2005
    #1
    1. Advertising

  2. yankee

    Grant Wagner Guest

    "yankee" <> wrote in message
    news:...

    > When I click on the button, I have a javascript error. I just want to
    > execute the command into the "VALUE" argument when I click on the
    > button. How I can do that?


    Give your <form> a default action:

    <form action="noJS.html" method="GET">

    Change the name and id of your <select> to something other than "type"
    (a Select object has a "type" property which you are overriding by
    naming it that). Also the name and the id should not be the same:

    <select name="myType" id="myTypeId">

    Then have a submit button as follows:

    <input type="submit"
    value="Next -->"
    onclick="
    var s = this.form.elements['myType'];
    this.form.action = s.options[s.selectedIndex].value;
    "
    >


    This way, if JavaScript is available, the -action- of the form will
    change and the form will do a GET to the value of the currently selected
    Optioin. If JavaScript is disabled or unavailable, the form will submit
    to the default action you specified display a page telling the user the
    form only works if they have JavaScript enabled.

    --
    Grant Wagner <>
    comp.lang.javascript FAQ - http://jibbering.com/faq
     
    Grant Wagner, Jan 13, 2005
    #2
    1. Advertising

  3. yankee

    RobG Guest

    Grant Wagner wrote:
    [...]
    > ... Also the name and the id should not be the same:
    >
    > <select name="myType" id="myTypeId">


    I thought id and name should be the same because of the way IE seems to
    treat them as equals (in IE, getElementById('x') will get a named form
    element named x even if it has no id, where as other browsers will only
    get it if it has an id x).

    Can you elaborate?

    >
    > Then have a submit button as follows:
    >
    > <input type="submit"
    > value="Next -->"
    > onclick="
    > var s = this.form.elements['myType'];
    > this.form.action = s.options[s.selectedIndex].value;
    > "


    Would this be better as an onsubmit on the form, rather than on onclick
    on the submit button? To me that seems better from a maintenance point
    of view, so the action, onsubmit, etc. are all coded in the same place
    but there may be other issues to consider.

    The OP has put the "submit" outside the form, will this.form... still
    work? I think you are suggesting the submit be *in* the form, I'm not
    sure the OP will realise that.

    If the submit is to be triggered from outside the form, then that may
    be an argument for including any actions in the form's onsubmit, rather
    than on the button (though there are likely arguments both ways). I'd
    be more curious as to why the submit is not in the form.

    > This way, if JavaScript is available, the -action- of the form will
    > change and the form will do a GET to the value of the currently selected
    > Optioin. If JavaScript is disabled or unavailable, the form will submit
    > to the default action you specified display a page telling the user the
    > form only works if they have JavaScript enabled.
    >


    Or do the required function on the server?


    --
    Rob
     
    RobG, Jan 13, 2005
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. JerryG
    Replies:
    0
    Views:
    436
    JerryG
    Dec 20, 2005
  2. palmiere
    Replies:
    1
    Views:
    431
    Erwin Moller
    Feb 9, 2004
  3. DarkkSide

    onClick event on a multiple select[]

    DarkkSide, May 7, 2004, in forum: Javascript
    Replies:
    1
    Views:
    117
  4. Replies:
    0
    Views:
    108
  5. Replies:
    7
    Views:
    232
Loading...

Share This Page