html form change Input value based on drop-down selected

10-02-2009

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>

10-02-2009

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

10-02-2009

On Oct 2, 4:39*am, Thomas 'PointedEars' Lahn <PointedE...@web.de>
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="private.php?do=newpm&u=">
<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>

10-02-2009

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="private.php?do=newpm&u=">
> <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)

10-02-2009

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

10-03-2009

On 2 oct, 10:24, RCGUA <stv.nels...@gmail.com> 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/200..._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:m...@mail.com">
> <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

10-03-2009

[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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
html form change Input value based on drop-down selected	RCGUA	Javascript	0	10-02-2009 01:48 AM
Change text of link button based on selected value of dropDownList	Andy B	ASP .Net	3	09-08-2008 06:42 PM
Change text of link button based on selected value of dropDownList	Andy B	ASP .Net	0	09-08-2008 12:02 PM
Change value of one variable based on user input of another value	TeknoShock	Javascript	1	12-01-2006 05:06 PM
Form Input Value to change a later value	Christa Lee	Javascript	2	10-01-2005 07:56 PM