html form change Input value based on drop-down selected

RCGUA · Oct 2, 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>

Thomas 'PointedEars' Lahn · Oct 2, 2009

RCGUA said:
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. said:
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

RCGUA · Oct 2, 2009

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:[email protected]">
<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>

Evertjan. · Oct 2, 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="mailto:[email protected]">
<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>

Thomas 'PointedEars' Lahn · Oct 2, 2009

RCGUA said:
Thomas said:

RCGUA said:

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.

Click to expand...

OK. said:

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?

Click to expand...

Yes. What are your attempts so far?

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

Click to expand...

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

GTalbot · Oct 3, 2009

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:[email protected]">
<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

Thomas 'PointedEars' Lahn · Oct 3, 2009

[In order not to be misunderstood:]

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

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

html form change Input value based on drop-down selected	0	Oct 2, 2009
Jquery not triggering / acting as expected.	0	Mar 6, 2022
action_page.php form	2	Oct 25, 2020
Move a Form action="ThatPage.php" to an <input type="??" > inline	1	Oct 15, 2023
Dependent Drop Downs	1	Nov 4, 2023
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
How to display input options only after selecting an option from the 'select class' tag JS?	6	May 12, 2023
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated	1	Aug 29, 2023

html form change Input value based on drop-down selected

RCGUA

Thomas 'PointedEars' Lahn

RCGUA

Evertjan.

Thomas 'PointedEars' Lahn

GTalbot

Thomas 'PointedEars' Lahn

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads