Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Populate multiple text fields from a list menu

Status
Not open for further replies.
Killborg

Killborg

Technical User
Jul 16, 2007
46
US
Hello
Need help.

I have a from with a dropdown list of all the states.
When the user selects a state from the dropdown list the values will populate the 7 different fields. I comma separated the values and each value will go into a different div and has a View Map that will link to a web site.

I am looking for a javascript that can do this.
Or can any one help.

I have seen scripts that will do this into a text field. But I do not want to use a text field.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Shipping Days</title>
<script language="javascript"><!--
function showimage()
{
if (!document.images)
return
document.images.panta_pics.src=
document.CanadaGallery.CanPantas.options[document.CanadaGallery.CanPantas.selectedIndex].value
}
//--></script>
<style type="text/css">
<!--
body {
margin: 0px;
}
#Shipping_Container {
width: 650px;
margin: auto;
height: auto;
}
#LeftHeader {
float: left;
width: 213px;
height: 40px;
background-color: #6E7970;
display: block;
}
#RightHeader {
height: 40px;
width: 437px;
background-color: #474F49;
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
line-height: 50px;
font-weight: bold;
color: #FFFFFF;
text-align: left;
vertical-align: middle;
text-indent: 10px;
}
#BodyContainer {
height: auto;
width: 646px;
border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
}
#Map {
width: 650px;
text-align: center;
vertical-align: top;
height: 360px;
display: block;
float: left;
margin-top: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
}
#NavContainer {
width: 250px;
margin-top: 10px;
display: block;
float: left;
height: 430px;
}
.NavHeader {
float: left;
width: 250px;
height: 25px;
background-color: #474F49;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 25px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
margin-bottom: 5px;
}
.NavSelection {
float: left;
width: 250px;
height: 30px;
text-align: center;
vertical-align: middle;
}
.NavListMenu {
float: left;
width: 230px;
height: 25px;
text-align: center;
vertical-align: middle;
margin-left: 10px;
}
#InfoContainer {
width: 386px;
margin-top: 10px;
display: block;
float: left;
height: auto;
margin-left: 10px;
}
.InfoHeader {
float: left;
width: 386px;
height: 25px;
background-color: #474F49;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 25px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
}
.InfoSubHeader {
float: left;
width: 386px;
height: 25px;
background-color: #6E7970;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
font-weight: bold;
color: #FFFFFF;
text-align: left;
vertical-align: middle;
margin-top: 3px;
margin-bottom: 3px;
text-indent: 5px;
letter-spacing: 2px;
}
.InfoImage {
float: left;
width: 25px;
height: 25px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 25px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
margin-right: 5px;
}
.InfoContent {
float: left;
width: 376px;
height: 25px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 25px;
font-weight: bold;
color: #9A1B1F;
text-align: left;
vertical-align: middle;
text-indent: 5px;
}
#Spacer {
height: 20px;
width: 646px;
display: block;
line-height: 20px;
float: left;
}
#Footer {
height: 20px;
width: 646px;
background-color: #6E7970;
border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-right-color: #6E7970;
border-left-color: #6E7970;
display: block;
line-height: 20px;
float: left;
}
-->
</style></head>

<body>
<form action="" method="get">
<!--------------------------------------Container-------------------------------------->
<div id="Shipping_Container">

<!--------------------------------------Header-------------------------------------->
<div id="LeftHeader"></div>
<div id="RightHeader"></div>

<!--------------------------------------Body-------------------------------------->
<div id="BodyContainer">

<!--------------------------------------Map-------------------------------------->
<div id="Map"></div>

<!--------------------------------------Start Navigation Container-------------------------------------->
<div id="NavContainer">
<div class="NavHeader">Select a State </div>
<div class="NavSelection">
<select name="CanPantas" size="1" id="CanGallDropdown" onchange="showimage();displaydesc(document.CanadaGallery.CanPantas, thetext2, 'textcontainer2');">
<option value="1 Day - View Map, 2 Day - View Map, 3 Day - View Map, 4 Day - View Map, 5 Day - View Map, 6 Day - View Map, 7 Day - View Map">SELECT A STATE</option>
<option value="PantaImg/LinenPB.png">Alabama</option>
<option value="PantaImg/LinenRB.png">Alaska</option>
<option value="PantaImg/Linen347.png">Arizona</option>
<option value="PantaImg/Linen464.png">Arkansas</option>
<option value="PantaImg/Linen431.png">California</option>
<option value="PantaImg/Linen696.png">Colorado</option>
<option value="PantaImg/MarbleRB.png">Connecticut</option>
<option value="PantaImg/Marble696.png">Delaware</option>
<option value="PantaImg/Marble328.png">Florida</option>
<option value="PantaImg/GradRB.png">Georgia</option>
<option value="PantaImg/SepSec281.png">Hawaii</option>
<option value="PantaImg/SepSec328.png">Idaho</option>
<option value="PantaImg/SepSec209.png">Illinois</option>
<option value="PantaImg/SepSec464.png">Indiana</option>
<option value="PantaImg/SepSec2597.png">Iowa</option>
<option value="PantaImg/Suede281.png">Kansas</option>
<option value="PantaImg/Suede328.png">Kentucky</option>
<option value="PantaImg/Suede209.png">Louisiana</option>
<option value="PantaImg/Suede464.png">Maine</option>
<option value="PantaImg/Suede2597.png">Maryland</option>
<option value="PantaImg/BankerPC.png">Massachusetts</option>
<option value="PantaImg/Banker328.png">Michigan</option>
<option value="PantaImg/Banker209.png">Minnesota</option>
<option value="PantaImg/Banker464.png">Mississippi</option>
<option value="PantaImg/Banker2597.png">Missouri</option>
<option value="PantaImg/Banker2597.png">Montana</option>
<option value="PantaImg/Banker2597.png">Nebraska</option>
<option value="PantaImg/Banker2597.png">Nevada</option>
<option value="PantaImg/Banker2597.png">New Hampshire</option>
<option value="PantaImg/Banker2597.png">New Jersey</option>
<option value="PantaImg/Banker2597.png">New Mexico</option>
<option value="PantaImg/Banker2597.png">New York</option>
<option value="PantaImg/Banker2597.png">North Carolina</option>
<option value="PantaImg/Banker2597.png">North Dakota</option>
<option value="PantaImg/Banker2597.png">Ohio</option>
<option value="PantaImg/Banker2597.png">Oklahoma</option>
<option value="PantaImg/Banker2597.png">Oregon</option>
<option value="PantaImg/Banker2597.png">Pennsylvania</option>
<option value="PantaImg/Banker2597.png">Rhode Island</option>
<option value="PantaImg/Banker2597.png">South Carolina</option>
<option value="PantaImg/Banker2597.png">South Dakota</option>
<option value="PantaImg/Banker2597.png">Tennessee</option>
<option value="PantaImg/Banker2597.png">Texas</option>
<option value="PantaImg/Banker2597.png">Utah</option>
<option value="PantaImg/Banker2597.png">Vermont</option>
<option value="PantaImg/Banker2597.png">Virginia</option>
<option value="PantaImg/Banker2597.png">Washington</option>
<option value="PantaImg/Banker2597.png">West Virginia</option>
<option value="PantaImg/Banker2597.png">Wisconsin</option>
<option value="PantaImg/Banker2597.png">Wyoming</option>
</select>
</div>
</div>
<!--------------------------------------End Navigation Container-------------------------------------->

<!--------------------------------------Start Information Container-------------------------------------->
<div id="InfoContainer">
<div class="InfoHeader">Outbound Location </div>
<div class="InfoSubHeader">ANTELOPE VALLEY</div>
<div class="InfoContent" id="AV"></div>
<div class="InfoSubHeader">FCA</div>
<div class="InfoContent" id="fca"></div>
<div class="InfoSubHeader">LITHO SPRINGS</div>
<div class="InfoContent" id="ls"></div>
<div class="InfoSubHeader">MARYVILLE</div>
<div class="InfoContent" id="mv"></div>
<div class="InfoSubHeader">SALT LAKE CITY</div>
<div class="InfoContent" id="slc"></div>
<div class="InfoSubHeader">STREETSBRO</div>
<div class="InfoContent" id="st"></div>
<div class="InfoSubHeader">TOWNSEND</div>
<div class="InfoContent" id="ts"></div>
</div>
</div>
<!--------------------------------------End Information Container-------------------------------------->

<div id="Footer"></div>
</div>
</form>
</body>
</html>



Thanks
Art
 
Sort by date Sort by votes
Hello Dan
There was some misc stuff left over. As i was trying different ways to display the information.

Cleaned up code.
Also I did not list all the states to keep it short.


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Shipping Days</title>
<style type="text/css">
<!--
body {
margin: 0px;
}
#Shipping_Container {
width: 650px;
margin: auto;
height: auto;
}
#LeftHeader {
float: left;
width: 213px;
height: 40px;
background-color: #6E7970;
display: block;
}
#RightHeader {
height: 40px;
width: 437px;
background-color: #474F49;
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
line-height: 50px;
font-weight: bold;
color: #FFFFFF;
text-align: left;
vertical-align: middle;
text-indent: 10px;
}
#BodyContainer {
height: auto;
width: 646px;
border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
}
#Map {
width: 650px;
text-align: center;
vertical-align: top;
height: 360px;
display: block;
float: left;
margin-top: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
}
#NavContainer {
width: 250px;
margin-top: 10px;
display: block;
float: left;
height: 430px;
}
.NavHeader {
float: left;
width: 250px;
height: 25px;
background-color: #474F49;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 25px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
margin-bottom: 5px;
}
.NavSelection {
float: left;
width: 250px;
height: 30px;
text-align: center;

vertical-align: middle;
}
.NavListMenu {
float: left;
width: 230px;
height: 25px;
text-align: center;
vertical-align: middle;
margin-left: 10px;
}
#InfoContainer {
width: 386px;
margin-top: 10px;
display: block;
float: left;
height: auto;
margin-left: 10px;
}
.InfoHeader {
float: left;
width: 386px;
height: 25px;
background-color: #474F49;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 25px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
}
.InfoSubHeader {
float: left;
width: 386px;
height: 25px;
background-color: #6E7970;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
font-weight: bold;
color: #FFFFFF;
text-align: left;
vertical-align: middle;
margin-top: 3px;
margin-bottom: 3px;
text-indent: 5px;
letter-spacing: 2px;
}
.InfoImage {
float: left;
width: 25px;
height: 25px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 25px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
margin-right: 5px;
}
.InfoContent {
float: left;
width: 376px;
height: 25px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 25px;
font-weight: bold;
color: #9A1B1F;
text-align: left;
vertical-align: middle;
text-indent: 5px;
}
#Spacer {
height: 20px;
width: 646px;
display: block;
line-height: 20px;
float: left;
}
#Footer {
height: 20px;
width: 646px;
background-color: #6E7970;
border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-right-color: #6E7970;
border-left-color: #6E7970;
display: block;
line-height: 20px;
float: left;
}
-->
</style></head>

<body>
<form action="" method="get">
<!--------------------------------------Container-------------------------------------->
<div id="Shipping_Container">

<!--------------------------------------Header-------------------------------------->
<div id="LeftHeader"></div>
<div id="RightHeader"></div>

<!--------------------------------------Body-------------------------------------->
<div id="BodyContainer">

<!--------------------------------------Map-------------------------------------->
<div id="Map"></div>

<!--------------------------------------Start Navigation Container-------------------------------------->
<div id="NavContainer">
<div class="NavHeader">Select a State </div>
<div class="NavSelection">
<select name="State" size="1">
<option value="">SELECT A STATE</option>
<option value="1 Day - View Map, 2 Day - View Map, 3 Day - View Map, 4 Day - View Map, 5 Day - View Map, 6 Day - View Map, 7 Day - View Map">Alabama</option>
<option value="1 Day - View Map, 2 Day - View Map, 3 Day - View Map, 4 Day - View Map, 5 Day - View Map, 6 Day - View Map, 7 Day - View Map">Alaska</option>
<option value="1 Day - View Map, 2 Day - View Map, 3 Day - View Map, 4 Day - View Map, 5 Day - View Map, 6 Day - View Map, 7 Day - View Map">Arizona</option>
<option value="1 Day - View Map, 2 Day - View Map, 3 Day - View Map, 4 Day - View Map, 5 Day - View Map, 6 Day - View Map, 7 Day - View Map">Arkansas</option>
<option value="1 Day - View Map, 2 Day - View Map, 3 Day - View Map, 4 Day - View Map, 5 Day - View Map, 6 Day - View Map, 7 Day - View Map">California</option>
<option value="1 Day - View Map, 2 Day - View Map, 3 Day - View Map, 4 Day - View Map, 5 Day - View Map, 6 Day - View Map, 7 Day - View Map">Colorado</option>
<option value="1 Day - View Map, 2 Day - View Map, 3 Day - View Map, 4 Day - View Map, 5 Day - View Map, 6 Day - View Map, 7 Day - View Map">Connecticut</option>
<option value="1 Day - View Map, 2 Day - View Map, 3 Day - View Map, 4 Day - View Map, 5 Day - View Map, 6 Day - View Map, 7 Day - View Map">Delaware</option>
<option value="1 Day - View Map, 2 Day - View Map, 3 Day - View Map, 4 Day - View Map, 5 Day - View Map, 6 Day - View Map, 7 Day - View Map">Florida</option>
<option value="1 Day - View Map, 2 Day - View Map, 3 Day - View Map, 4 Day - View Map, 5 Day - View Map, 6 Day - View Map, 7 Day - View Map">Georgia</option>
</select>
</div>
</div>
<!--------------------------------------End Navigation Container-------------------------------------->

<!--------------------------------------Start Information Container-------------------------------------->
<div id="InfoContainer">
<div class="InfoHeader">Outbound Location </div>
<div class="InfoSubHeader">ANTELOPE VALLEY</div>
<div class="InfoContent" id="AV"></div>
<div class="InfoSubHeader">FCA</div>
<div class="InfoContent" id="fca"></div>
<div class="InfoSubHeader">LITHO SPRINGS</div>
<div class="InfoContent" id="ls"></div>
<div class="InfoSubHeader">MARYVILLE</div>
<div class="InfoContent" id="mv"></div>
<div class="InfoSubHeader">SALT LAKE CITY</div>
<div class="InfoContent" id="slc"></div>
<div class="InfoSubHeader">STREETSBRO</div>
<div class="InfoContent" id="st"></div>
<div class="InfoSubHeader">TOWNSEND</div>
<div class="InfoContent" id="ts"></div>
</div>
</div>
<!--------------------------------------End Information Container-------------------------------------->

<div id="Footer"></div>
</div>
</form>
</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
307
lexer
lexer
trevil620
  • Locked
  • Question
SoThink DHTML Menu Conversion
Replies
0
Views
278
trevil620
trevil620
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
709
Mike Lewis
Mike Lewis
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
317
malpa
malpa
keisha1
  • Locked
  • Question
How can I append/insert multiple text files into one .dbf file using java script /html command
Replies
1
Views
107
Samthyr
Samthyr

Part and Inventory Search

Sponsor

Back
Top