...

View Full Version : passing values from arrays to forms



vittel
01-31-2007, 11:06 PM
I am going to try and make this Simple as I can.

I have an array of fruit names
e.g.



var FruitNames = new Array ()
FruitNames[0] = "Peach"
FruitNames[1] = "Pear"
FruitNames[2] = "Plum"
FruitNames[3] = "Pomegranate"
FruitNames[4] = "Pineapple"

Simple so far?

Now I also have a Select Form, which contains the fruitnames options
e.g.



<form>
<table>
<tr>
<td align="right">Select Fruit<br>
<select name="Fruit Names">
<option value="Plum">Plum </option>

etc, etc, etc, etc, You get the point!

I can easily add all the options using the method above...

BUT...what I want to do is , when the page loads, the option values are automatically present in the select box, when i load the page.

Also if I change the names in the FruitNames array, then the options in the select form will update automatically. Using JavaScript off course.

Simple huh?

Can anybody help? Any suggestions?
Thanks in advance!!

coothead
02-01-2007, 08:39 AM
Hi there vittel,

have a look at this example, it may suit your requirements...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>create options</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">

var frt=new Array()
frt[0]='peach';
frt[1]='pear';
frt[2]='plum';
frt[3]='pomegranate';
frt[4]='pineapple';

var ops=new Array();

window.onload=function() {
createOptions();
}
function createOptions() {
for(c=0;c<frt.length;c++) {
ops[c]=document.createElement('option');
frt[c]=document.createTextNode(frt[c]);
ops[c].appendChild(frt[c]);
document.forms[0][0].appendChild(ops[c]);
}
}

</script>

</head>
<body>

<form action="#">
<div>

<select>
<option>---the fruits---</option>
</select>

</div>
</form>

</body>
</html>
coothead

vittel
02-01-2007, 09:47 AM
wow!!!
thats some hardcore coding!!!
brilliant!!!

just one more teensy weensy question :D

if i want to have TWO select boxes, with the same options.
it sound a bit silly I know but I am think about the future and it may come down to that!!!

I tried to make changes to your code to get two select boxes but the second select box doesnt contain the fruitnames options :confused: ???

thanks coothead!!!

coothead
02-01-2007, 10:42 AM
Hi there vittel,

here is the modified script...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>create options</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">

var frt=new Array()
frt[0]='peach';
frt[1]='pear';
frt[2]='plum';
frt[3]='pomegranate';
frt[4]='pineapple';

var frt1=new Array();

var ops=new Array();
var ops1=new Array();

window.onload=function() {
createOptions();
}

function createOptions() {
for(c=0;c<frt.length;c++) {

frt1[c]=frt[c]

ops[c]=document.createElement('option');
ops1[c]=document.createElement('option');

frt[c]=document.createTextNode(frt[c]);
frt1[c]=document.createTextNode(frt1[c]);

ops[c].appendChild(frt[c]);
ops1[c].appendChild(frt1[c])

document.forms[0][0].appendChild(ops[c]);
document.forms[0][1].appendChild(ops1[c]);
}
}

</script>

</head>
<body>

<form action="#">
<div>

<select>
<option>---the fruits---</option>
</select>
<select>
<option>---the fruits---</option>
</select>
</div>
</form>

</body>
</html>
coothead

Ancora
02-01-2007, 12:29 PM
vittel:

Another way...



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var FruitNames = [];
FruitNames[0] = "Peach";
FruitNames[1] = "Pear";
FruitNames[2] = "Plum";
FruitNames[3] = "Pomegranate";
FruitNames[4] = "Pineapple";

var VegetableNames = [];
VegetableNames[0] = "Lettuce";
VegetableNames[1] = "Carrot";
VegetableNames[2] = "Celery";
VegetableNames[3] = "Onion";

function fillSelect(isList,nArray){

for (i=0; i<nArray.length; i++)
{
var nOption = document.createElement('option');
var isText = document.createTextNode(nArray[i]);
nOption.setAttribute('value',nArray[i]);
nOption.appendChild(isText);
document.forms[0][isList].appendChild(nOption);
}
}

function init(){

fillSelect('fruit1',FruitNames);
fillSelect('vegetable1',VegetableNames);
}

onload=init;

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}
form {width:300px;margin:auto}
fieldset {width:280px;background-color:#f0fff0;border:1px solid #87ceeb}
legend {font-family:tahoma;font-size:10pt;font-weight:bold;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px;letter-spacing:+1px}
label {font-family:times;font-size:12pt;color:#00008b;padding:5px}
select {font-family;tahoma;font-size:10pt;width:150px;display:block;margin-left:auto;margin-right:auto;margin-bottom:10px}
.submitBtn {font-family:tahoma;font-size:10pt;display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}

</style>
</head>
<body>
<form method="post" action="">
<fieldset>
<legend>Form</legend>
<select name='fruit1'>
<option value="">Make a selection</option>
<select>
<select name='vegetable1'>
<option value="">Make a selection</option>
<select>
<input type='submit' name='submit' value="Submit" class='submitBtn'>
</fieldset>
</form>

</body>
</html>

vittel
02-01-2007, 12:38 PM
That is just perfect!!!:thumbsup:

I am just trying to finish it off the 'icing' on the cake.

I want to make a submit button, which when clicked on it, loads up another page that displays what fruits I selected.

I know i have to make an an onSubmit/Click button that call up another function, that takes the values selected and displays it.

I got the onSubmit working and it does open up another page, but no fruitnames :confused:

Any suggestions?

Muchos Thanks!!

coothead
02-01-2007, 05:27 PM
Hi there vittel,

here are my two pages...

createOptions.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>create options</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">

var frt=new Array()
frt[0]='peach';
frt[1]='pear';
frt[2]='plum';
frt[3]='pomegranate';
frt[4]='pineapple';

var frt1=new Array();

var ops=new Array();
var ops1=new Array();

window.onload=function() {
createOptions();
}

function createOptions() {
for(c=0;c<frt.length;c++) {

frt1[c]=frt[c]

ops[c]=document.createElement('option');
ops1[c]=document.createElement('option');

ops[c].setAttribute('value',frt[c]);
ops1[c].setAttribute('value',frt1[c]);

frt[c]=document.createTextNode(frt[c]);
frt1[c]=document.createTextNode(frt1[c]);

ops[c].appendChild(frt[c]);
ops1[c].appendChild(frt1[c])

document.forms[0][0].appendChild(ops[c]);
document.forms[0][1].appendChild(ops1[c]);
}
}
function newPage() {

document.forms[0].action='myfruits.html?'+
document.forms[0][0].value+','+
document.forms[0][1].value;
}
</script>

</head>
<body>

<form action="#" method="post" onsubmit="return newPage()">
<div>

<select>
<option value="">---the fruits---</option>
</select>
<select>
<option value="">---the fruits---</option>
</select>
<input type="submit" value="view selection"/>
</div>
</form>

</body>
</html>
myfruits.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>fruit selection</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#fruits {
width:460px;
line-height:32px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
text-align:center;
border:3px double #999;
margin:40px auto;
}
#fruits span {
color:#800000;
background-color:#fff;
}
</style>

<script type="text/javascript">

window.onload=function() {
fruits1=location.href.split('?')[1].split(',')[0];
fruits2=location.href.split('?')[1].split(',')[1];
text1='you have selected a ';
text2=' and a ';
if(fruits1=='') {
text1='you have selected nothing ';
}
if(fruits2=='') {
text2=' and nothing ';
}
document.getElementById('fruits').innerHTML=text1+'<span>'+fruits1+'<\/span>'+text2+'<span>'+fruits2+'<\/span>';
}

</script>

</head>
<body>

<div id="fruits"></div>

</body>
</html>
coothead

vittel
02-01-2007, 05:49 PM
This is just brilliant!!!:thumbsup: :thumbsup:

It would ahve taken me weeks to merely get the select values in place, let alone the whole diaplaying it in a new page!!!

A Thousand Thanks to both Coothead:cool: and Ancora:cool: !!!

Vittel
:D :p :D :p :D :p

coothead
02-01-2007, 06:05 PM
No problem, you're very welcome. ;)

coothead
02-08-2007, 04:32 PM
Hi there vittel,

In response to your PM, please check out the attachment. ;)

coothead

kamila
02-13-2007, 02:24 AM
Hi there vittel,

here are my two pages...

createOptions.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>create options</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">

var frt=new Array()
frt[0]='peach';
frt[1]='pear';
frt[2]='plum';
frt[3]='pomegranate';
frt[4]='pineapple';

var frt1=new Array();

var ops=new Array();
var ops1=new Array();

window.onload=function() {
createOptions();
}

function createOptions() {
for(c=0;c<frt.length;c++) {

frt1[c]=frt[c]

ops[c]=document.createElement('option');
ops1[c]=document.createElement('option');

ops[c].setAttribute('value',frt[c]);
ops1[c].setAttribute('value',frt1[c]);

frt[c]=document.createTextNode(frt[c]);
frt1[c]=document.createTextNode(frt1[c]);

ops[c].appendChild(frt[c]);
ops1[c].appendChild(frt1[c])

document.forms[0][0].appendChild(ops[c]);
document.forms[0][1].appendChild(ops1[c]);
}
}
function newPage() {

document.forms[0].action='myfruits.html?'+
document.forms[0][0].value+','+
document.forms[0][1].value;
}
</script>

</head>
<body>

<form action="#" method="post" onsubmit="return newPage()">
<div>

<select>
<option value="">---the fruits---</option>
</select>
<select>
<option value="">---the fruits---</option>
</select>
<input type="submit" value="view selection"/>
</div>
</form>

</body>
</html>
myfruits.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>fruit selection</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#fruits {
width:460px;
line-height:32px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
text-align:center;
border:3px double #999;
margin:40px auto;
}
#fruits span {
color:#800000;
background-color:#fff;
}
</style>

<script type="text/javascript">

window.onload=function() {
fruits1=location.href.split('?')[1].split(',')[0];
fruits2=location.href.split('?')[1].split(',')[1];
text1='you have selected a ';
text2=' and a ';
if(fruits1=='') {
text1='you have selected nothing ';
}
if(fruits2=='') {
text2=' and nothing ';
}
document.getElementById('fruits').innerHTML=text1+'<span>'+fruits1+'<\/span>'+text2+'<span>'+fruits2+'<\/span>';
}

</script>

</head>
<body>

<div id="fruits"></div>

</body>
</html>
coothead
Thanks for your reply. Sorry i was ill and could not read messages.
But i want to get values from database. how can i get values from database and pass through from functions?

best regards,



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum