html form change Input value based on drop-down selected

Discussion in 'Javascript' started by RCGUA, Oct 2, 2009.

  1. RCGUA

    RCGUA Guest

    First of all I should warn all those who may be thinking of responding
    to this post that the html below is for -demonstration purposes only-,
    it is meant to be simple and easy to read, it -will not validate- at
    http://validator.w3.org/, if that is important to you, please move on
    to the next post.

    I would like the value of
    <input type="text" name="TypeOfCarChosen" value="?????"
    size="20">
    to change when the user selects something in the drop down.
    Does anybody know how to do this?

    <html>
    <body>

    <form name="input" action="html_form_action.asp" method="get">
    <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
    </select>

    <input type="text" name="TypeOfCarChosen" value="?????" size="20">

    <input type="submit" value="Submit">

    </form>

    </body>
    </html>
     
    RCGUA, Oct 2, 2009
    #1
    1. Advertising

  2. RCGUA wrote:
    > First of all I should warn all those who may be thinking of responding
    > to this post that the html below is for -demonstration purposes only-,
    > it is meant to be simple and easy to read, it -will not validate- at
    > http://validator.w3.org/, if that is important to you, please move on
    > to the next post.


    OK. <http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you>

    > I would like the value of
    > <input type="text" name="TypeOfCarChosen" value="?????"
    > size="20">
    > to change when the user selects something in the drop down.
    > Does anybody know how to do this?


    Yes. What are your attempts so far?

    <http://jibbering.com/faq/#posting>
    <http://www.catb.org/~esr/faqs/smart-questions.html>


    PointedEars
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
     
    Thomas 'PointedEars' Lahn, Oct 2, 2009
    #2
    1. Advertising

  3. RCGUA

    RCGUA Guest

    On Oct 2, 4:39 am, Thomas 'PointedEars' Lahn <>
    wrote:
    > RCGUA wrote:
    > > First of all I should warn all those who may be thinking of responding
    > > to this post that the html below is for -demonstration purposes only-,
    > > it is meant to be simple and easy to read, it -will not validate- at
    > >http://validator.w3.org/,  if that is important to you, please move on
    > > to the next post.

    >
    > OK.  <http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you>
    >
    > > I would like the value of
    > >      <input type="text" name="TypeOfCarChosen" value="?????"
    > > size="20">
    > > to change when the user selects something in the drop down.
    > > Does anybody know how to do this?

    >
    > Yes.  What are your attempts so far?
    >
    > <http://jibbering.com/faq/#posting>
    > <http://www.catb.org/~esr/faqs/smart-questions.html>
    >
    > PointedEars
    > --
    > Anyone who slaps a 'this page is best viewed with Browser X' label on
    > a Web page appears to be yearning for the bad old days, before the Web,
    > when you had very little chance of reading a document written on another
    > computer, another word processor, or another network. -- Tim Berners-Lee


    Funny, this code below doesn't validate but it works perfectly and it
    is simple and easy to read and demonstrates the concept without
    cluttering the code with garbage like:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
    www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    If it makes you feel better, please add the above two line to the code
    below -- OR -- put on your big girl panties and deal with it!

    <html>

    <head>
    <script type="text/javascript">
    function changeValue(dropdown)
    {
    document.Test.TypeOfCarChosen.value = dropdown.value;
    }
    </script>
    </head>

    <form name="Test" method="post" action="mailto:">
    <select name="cars" onchange="changeValue(this)">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="audi">Audi</option>
    </select>

    <input type=hidden name="TypeOfCarChosen" value="?????" size="20">

    <INPUT TYPE=submit VALUE="Validate it!">
    </form>

    </body>
    </html>
     
    RCGUA, Oct 2, 2009
    #3
  4. RCGUA

    Evertjan. Guest

    RCGUA wrote on 02 okt 2009 in comp.lang.javascript:

    > Funny, this code below doesn't validate but it works perfectly and it
    > is simple and easy to read
    > <script type="text/javascript">
    > function changeValue(dropdown)
    > {
    > document.Test.TypeOfCarChosen.value = dropdown.value;
    >}
    > </script>
    > </head>
    >
    > <form name="Test" method="post" action="mailto:">
    > <select name="cars" onchange="changeValue(this)">



    This cannot work "perfectly",
    as the default use of a name as a document child is bound to fail
    often.

    Try:

    function changeValue(x) {
    x.form.TypeOfCarChosen.value = x.value;
    };

    > <input type=hidden name="TypeOfCarChosen" value="?????" size="20">


    What is the sense of giving a size to a hidden type input?

    > <INPUT TYPE=submit VALUE="Validate it!">


    Why the sudden capitals? "simple and easy to read" ?

    However, wouldn't this work as well, and no need for JS?:

    <select name="TypeOfCarChosen">
    <option value='?????'>---</option>
    <option value='volvo'>Volvo</option>
    <option value='saab'>Saab</option>
    <option value='audi'>Audi</option>
    </select>



    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Oct 2, 2009
    #4
  5. RCGUA wrote:
    > Thomas 'PointedEars' Lahn wrote:
    >> RCGUA wrote:
    >>> First of all I should warn all those who may be thinking of responding
    >>> to this post that the html below is for -demonstration purposes only-,
    >>> it is meant to be simple and easy to read, it -will not validate- at
    >>> http://validator.w3.org/, if that is important to you, please move on
    >>> to the next post.

    >> OK. <http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you>
    >>
    >>> I would like the value of
    >>> <input type="text" name="TypeOfCarChosen" value="?????"
    >>> size="20">
    >>> to change when the user selects something in the drop down.
    >>> Does anybody know how to do this?

    >> Yes. What are your attempts so far?
    >>
    >> <http://jibbering.com/faq/#posting>
    >> <http://www.catb.org/~esr/faqs/smart-questions.html>
    >> [...]


    Please trim your quotes to the relevant parts, usually don't quote signatures.

    > Funny, this code below doesn't validate


    That's unsurprising. You don't know what you are doing.

    > but it works perfectly


    Because Web browsers have built-in error correction. If you serve them
    invalid markup or markup is a language they do not support, they will try to
    use error correction to make some sense of it (unless you trigger a
    validating parser, they you'll get an error message). However, error
    correction is not universally defined or even formally specified (the
    Specifications only make recommendations in that sense), so it is nothing
    that you should rely on. Especially not if you attempt to script the DOM
    which is a representation of its result.

    > and it is simple and easy to read


    For fitting values.

    > and demonstrates the concept without
    > cluttering the code with garbage like:
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
    > www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    > <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


    Nobody suggested you declared XHTML.

    > If it makes you feel better, please add the above two line to the code
    > below -- OR -- put on your big girl panties and deal with it! [...]


    FOAD.


    PointedEars
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
     
    Thomas 'PointedEars' Lahn, Oct 2, 2009
    #5
  6. RCGUA

    GTalbot Guest

    On 2 oct, 10:24, RCGUA <> wrote:


    > Funny, this code below doesn't validate but it works perfectly


    It may not work perfectly in all browsers and browser versions. To
    make sure of that, you would have to use valid markup code, css code,
    etc.

    > and it
    > is simple and easy to read and demonstrates the concept without
    > cluttering the code with garbage like:
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    > <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


    Whenever there is a problem (layout, style, behavior, etc.) with a
    webpage, rational, reasonable and experienced web developers first
    start checking the validity of the markup code. Simply, there is
    nothing better to do first. Then, they check the validity of the CSS
    code. Then javascript errors, if any, in the console. It's best to
    trigger stnadards compliant rendering mode in all browsers: you do not
    do this. Instead, you say "cluttering the code with garbage like ..".

    Even javascript debugging tools work as expected, accordingly when the
    markup code and CSS code are valid.

    "It is useless to start debugging a page when the HTML is not valid."
    http://css.tests.free.fr/en/html_validation.php

    "Validation may reveal your problem. Many cases of 'it works in one
    browser but not another' are caused by silly author errors."
    http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you


    > <script type="text/javascript">
    > function changeValue(dropdown)
    > {
    > document.Test.TypeOfCarChosen.value = dropdown.value;}
    >
    > </script>


    Did you read the comp.lang.javascript FAQ on how to get the value of a
    form control?

    comp.lang.javascript FAQ
    8.1 How do I get the value of a form control?
    http://jibbering.com/faq/#formControlAccess

    How to reference form and form controls:
    http://www.javascripttoolbox.com/bestpractices/#forms

    > </head>
    >
    > <form name="Test" method="post" action="mailto:">
    > <select name="cars" onchange="changeValue(this)">
    > <option value="volvo">Volvo</option>
    > <option value="saab">Saab</option>
    > <option value="audi">Audi</option>
    > </select>
    >
    > <input type=hidden name="TypeOfCarChosen" value="?????" size="20">


    Why is that input hidden? Just asking.

    >
    > <INPUT TYPE=submit VALUE="Validate it!">
    > </form>
    >
    > </body>
    > </html>


    Gérard
     
    GTalbot, Oct 3, 2009
    #6
  7. [In order not to be misunderstood:]

    Thomas 'PointedEars' Lahn wrote:

    > RCGUA wrote:
    >> Funny, this code below doesn't validate

    >
    > That's unsurprising. You don't know what you are doing.
    >
    >> but it works perfectly

    >
    > Because Web browsers have built-in error correction. If you serve them
    > invalid markup or markup is a language they do not support, they will try

    ^^ _in_; but `is' might have been understood, too
    > to use error correction to make some sense of it (unless you trigger a
    > validating parser, they you'll get an error message). However, error

    ^^^^ _then_
    > correction is not universally defined or even formally specified (the
    > Specifications only make recommendations in that sense), so it is nothing
    > that you should rely on. Especially not if you attempt to script the DOM
    > which is a representation of its result.



    PointedEars
    --
    realism: HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness: XHTML 1.1 as application/xhtml+xml
    -- Bjoern Hoehrmann
     
    Thomas 'PointedEars' Lahn, Oct 3, 2009
    #7
    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. weiwei
    Replies:
    0
    Views:
    1,049
    weiwei
    Jan 5, 2007
  2. jaysch
    Replies:
    0
    Views:
    1,259
    jaysch
    Apr 30, 2011
  3. shikarishambu

    Changing text on a label based on drop down selected value

    shikarishambu, Dec 16, 2006, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    187
    shikarishambu
    Dec 16, 2006
  4. Replies:
    0
    Views:
    184
  5. RCGUA
    Replies:
    0
    Views:
    214
    RCGUA
    Oct 2, 2009
Loading...

Share This Page