Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > html form change Input value based on drop-down selected

Reply
Thread Tools

html form change Input value based on drop-down selected

 
 
RCGUA
Guest
Posts: n/a
 
      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>
 
Reply With Quote
 
 
 
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      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
 
Reply With Quote
 
 
 
 
RCGUA
Guest
Posts: n/a
 
      10-02-2009
On Oct 2, 4:39*am, Thomas 'PointedEars' Lahn <(E-Mail Removed)>
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="(E-Mail Removed)">
<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>
 
Reply With Quote
 
Evertjan.
Guest
Posts: n/a
 
      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="(E-Mail Removed)">
> <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)
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      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
 
Reply With Quote
 
GTalbot
Guest
Posts: n/a
 
      10-03-2009
On 2 oct, 10:24, RCGUA <(E-Mail Removed)> 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="(E-Mail Removed)">
> <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
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


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 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



Advertisments