homepage Welcome to WebmasterWorld Guest from 54.227.77.237
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
changing text field based on dropdown? (switch case statement)
trying to use javascript case statement correctly
tokey666




msg:3865664
 12:59 pm on Mar 8, 2009 (gmt 0)

Hey everybody. Got a simple problem.... but yet.... I am no programmer. I know I am doing something wrong here, so please tell me.

All I want to do is use a javascript switch statement to display something in a text field box based on the selection of a dropdown.

Here is the code I have, and I KNOW I am probably passing a variable or something wrong. Please help! :)

<script type="text/javascript">

function switchme(SNewSel) {

var sNewSel = document.getElementById("selection");
switch (sNewSel)
{
case "1": // car purchase
document.myform.TextField1.value = "Basic features:- frame- wheels glass";
break;

case "2": // other purchase
TextField1.value = "Basic features..."
break;

case "3": // other purchase
TextField1.text = "Basic features..."
break;

default: // unknown value -- do nothing
break;
}
}
</script>
</head>

<body>
<form action="" method="get" id="myform">

<select name="selection" id="selection" onchange="switchme(this.value)">
<option value="Choose One" selected="selected" >Choose One</option>
<option value="1" >asdf1</option>
<option value="2" >asdf2</option>
<option value="3" >asdf3</option>
</select>
<br />
<input id="TextField1" name="TextField1" type="text" />

</form>


 

birdbrain




msg:3865725
 3:21 pm on Mar 8, 2009 (gmt 0)

Hi there tokey666,

try it like this...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
input {
width:240px;
margin-top:10px;
}
</style>

<script type="text/javascript">
if(window.addEventListener){
window.addEventListener('load',switchme,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',switchme);
}
}

function switchme(){

df=document.forms[0];

df[0].onchange=function(){

switch(this.value) {
case '1':
df[1].value='Basic features:- frame- wheels glass';
break;

case '2':
df[1].value='Basic features:- for asdf2';
break;

case '3':
df[1].value='Basic features:- for asdf3';
break;

default:
df[1].value='';
break;
}
}
}
</script>

</head>
<body>

<form action="#" method="get">
<div>
<select name="selection">
<option value="Choose One" selected="selected">Choose One</option>
<option value="1">asdf1</option>
<option value="2">asdf2</option>
<option value="3">asdf3</option>
</select>
</div><div>
<input name="TextField1" type="text">
</div>
</form>

</body>
</html>


birdbrain

rocknbil




msg:3865726
 3:22 pm on Mar 8, 2009 (gmt 0)

birdbrain what are you doing beating me to the punch so early on a Sunday? LOL! Goes to show, there's more than one way to do . . . anything!

You refer to the index of a select list by .selectedIndex.

You don't need to quote numeric indices for your cases.

Set a text field by .value, not .text (that's VB/VBscript or Flash. :-) )

removed the onchange to an external attachment.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype on one line, no need for XHTML on an HTML page -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript">
window.onload=function() {
if (document.getElementById) {
document.getElementById("selection").onchange=function() { switchme(this); }
}
}
function switchme(SNewSel) {
var ind = SNewSel.selectedIndex;
var txt = document.getElementById('TextField1');
switch (ind) {
case 1: // car purchase
txt.value = "1- Basic features:- frame- wheels glass";
break;
case 2: // other purchase
txt.value = "2- Basic features..."
break;
case 3: // other purchase
txt.value = "3- Basic features..."
break;
default:
txt.value='';
break;
}
}
</script>
</head>
<body>
<form action="" method="get" id="myform">
<select name="selection" id="selection">
<option value="Choose One">Choose One</option>
<option value="1" >asdf1</option>
<option value="2" >asdf2</option>
<option value="3" >asdf3</option>
</select>
<br>
<input id="TextField1" name="TextField1" type="text" value="">
</form>
</body>
</html>

tokey666




msg:3865912
 10:40 pm on Mar 8, 2009 (gmt 0)

Kudos to you both! Two excellent ways of doing it! Thanks for helping a learner out :)

Birdman.
These lines confuse me...just because I am not sure what they are...

df=document.forms[0];

df[0].onchange=function()

Is that an array of sorts?

tokey666




msg:3865920
 11:13 pm on Mar 8, 2009 (gmt 0)

Hmm interesting.... IE6 gives me an information bar whenever I run either one of these scripts....

"To help protect your security, Internet Explorer has restricted this file from showing active content that could access your computer. Click here for options..."

Making them not work. Of course, firefox is fine... but stupid IE still has the problem.

Any suggestions on that one?

------------
UPDATE
------------

Ok now I feel like an idiot. I was running the file locally, which sparks the stupid infobar. However when it is run from a server, it works fine. Live and learn! Thanks!

birdbrain




msg:3866096
 8:39 am on Mar 9, 2009 (gmt 0)

Hi there tokey666,

document.forms[0] refers to the first form in the document, document.forms[1] would refer to the second.
To refer to the first element in the first form we use document.forms[0][0]
and the nth element would be document.forms[0][
n-1].

As for the IE problem, you have already discovered that this only happens locally.
To effect a cure for the page add this snippet of code directly after the DOCTYPE...

[blue]
<!-- saved from url=(0014)about:internet -->

[/blue]


To permanently disable this information do this...

  1. open IE.
  2. click 'Tools'.
  3. click 'Internet Options'.
  4. click 'Advanced' tab.
  5. scroll down to 'Security'.
  6. check 'Allow active content to run on My Computer'.
  7. click 'Apply'.
  8. click 'OK'
  9. have a beer. ;)

Further reading:-
[msdn.microsoft.com ]

birdbrain

tokey666




msg:3867088
 11:58 am on Mar 10, 2009 (gmt 0)

Birdbrain,
Thanks again for the reply! I get ya. :)

birdbrain




msg:3867093
 12:07 pm on Mar 10, 2009 (gmt 0)

No problem, you're very welcome. ;)

tokey666




msg:3867325
 5:33 pm on Mar 10, 2009 (gmt 0)

Ok, now I am trying to understand rocknbil's.

So rocknbil, you there? :)

I completely understand how it works, however, I would rather use the selectedIndex's VALUE. There will be numerous dropdown options that apply to the same case.

SO, I have attempted to edit this line:
var ind = SNewSel.selectedIndex;

but with no success.

from what I have read, I should only have to change it to

var ind = SNewSel.options[SNewSel.selectedIndex].value;

but it doesn't work. And I don't understand why.... whud I do? :( Or NOT do, I'm sure is the better questions...

rocknbil




msg:3867415
 7:30 pm on Mar 10, 2009 (gmt 0)

I was wondering why you did what you did. :-) This allows you to eliminate the switch entirely.

To access value, you reference by index:
SNewSel.options[ind].value;

To access the option text you also reference by index:
SNewSel.options[ind].text;

Seeing where you're going with this, you don't even have to use "1,2,3" - you can do something like

<option value="Bucket Seats and Leather">Package 1</option>
<option value="Toneau Top" >Package 2</option>
<option value="Metalflake Paint">Package 3</option>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype on one line, no need for XHTML on an HTML page -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript">
window.onload=function() {
if (document.getElementById) {
document.getElementById("selection").onchange=function() { switchme(this); }
}
}
function switchme(SNewSel) {
var ind = SNewSel.selectedIndex;
var txt = document.getElementById('TextField1');
if (ind == 0) { txt.value = ''; }
else {
txt.value = SNewSel.options[ind].value;
// or this, for the text, but that's redundant
// as it's already in the option list
//txt.value = SNewSel.options[ind].text;
}
}
</script>
</head>
<body>
<form action="" method="get" id="myform">
<select name="selection" id="selection">
<option value="Choose One">Choose One</option>
<option value="Bucket Seats and Leather">Package 1</option>
<option value="Toneau Top">Package 2</option>
<option value="Metalflake Paint">Package 3</option>
</select>
<br>
<input style="border:none; width: 400px;" id="TextField1" name="TextField1" type="text" value="">
</form>
</body>
</html>

tokey666




msg:3867497
 8:58 pm on Mar 10, 2009 (gmt 0)

Thanks for the reply! I did the switch because of all the different variables. It would make my code easier to read and understand. hahaha.

Unfortunately, I have pretty much already done all layout and case statements. Please don't make me redo the code.... :) I actually don't just have one text box. I have 8, with about 9 different cases. :) I have done alot of labeling today.

After a bit of tinkering, I am still at a loss. To keep it simple, I think I just want to pass the "value" from the option dropdown back to the ind variable. That way if the value is 1, then it brings up case 1.

I hope that makes sense.

So I tried this....but that didn't work....

var ind = SNewSel.selectedIndex;
var narf = SNewSel.options[ind].value;

Again, thank you!

tokey666




msg:3868479
 12:18 am on Mar 12, 2009 (gmt 0)

Uh oh.... I lost everyone. Come back! :)

rocknbil




msg:3869788
 4:39 pm on Mar 13, 2009 (gmt 0)

Please don't make me redo the code....

Sometimes rethinking an idea is far better than struggling along, sometimes for years, with one that has a poor foundation. Don't ask how I know this . . . .

I actually don't just have one text box. I have 8, with about 9 different cases.

Your answer still likes in a solution that would only require changing one or two values for future updates. In the below, paste in 4 more text fields, add 4 more options with the target text field ID's, change the iterations from 5 to 9 . . . .

Note that the first three options are all "pointed" at txtField1, so each of these will replace any pre selected value. This could be useful in, say, limiting the selections to three options out of 9.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype on one line, no need for XHTML on an HTML page -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
.txtField { border:none; display: none; width: 400px; }
</style>
<script type="text/javascript">
window.onload=function() {
if (document.getElementById) {
document.getElementById("selection").onchange=function() { switchme(this); }
for (i=1;i<=5;i++) {
var nm = 'TextField'+i;
if (document.getElementById(nm)) {
document.getElementById(nm).style.display='none';
}
}
}
}
function switchme(SNewSel) {
var ind = SNewSel.selectedIndex;
pairs = SNewSel.options[ind].value.split(':');
// This creates a "list" of selected options.
// If you want ONLY the selected item to display, you'll have to
// add a loop here that blanks out the other fields and sets
// their display to none, similar to the "else" below.
if (pairs[1]) {
document.getElementById(pairs[1]).style.display='block';
document.getElementById(pairs[1]).value=pairs[0];
}
else {
for (i=1;i<=5;i++) {
var nm = 'TextField'+i;
document.getElementById(nm).value='';
}
}
}
</script>
</head>
<body>
<form action="" method="get" id="myform">
<select name="selection" id="selection">
<option value="Choose One">Choose One/Remove All</option>
<option value="Bucket Seats and Leather:TextField1">Add Package 1</option>
<option value="Toneau Top:TextField1">Add Package 2</option>
<option value="Metalflake Paint:TextField1">Add Package 3</option>
<option value="Custom Carpet:TextField2">Add Package 4</option>
<option value="Chrome Wheels:TextField3">Add Package 5</option>
<option value="Fart Pipe:TextField4">Add Package 6</option>
<option value="Stupid Airfoil on Trunk:TextField5">Add Package 7</option>
</select>
<br>
<input class="txtField" id="TextField1" name="TextField1" type="text" value="">
<input class="txtField" id="TextField2" name="TextField2" type="text" value="">
<input class="txtField" id="TextField3" name="TextField3" type="text" value="">
<input class="txtField" id="TextField4" name="TextField4" type="text" value="">
<input class="txtField" id="TextField5" name="TextField5" type="text" value="">
</form>
</body>
</html>

tokey666




msg:3870106
 1:35 am on Mar 14, 2009 (gmt 0)

HA! I'm loving that. MEGA thanks rocknbill. I have learned so much getting this all together. You have definitely given me so much to go on and I think I am going to go with a combination of stuff here for my application.

I shall quit bothering you know. haha. Thanks for the contributions!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved