Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    passing values from arrays to forms

    I am going to try and make this Simple as I can.

    I have an array of fruit names
    e.g.

    PHP Code:
    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.

    PHP Code:
    <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!!

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there vittel,

    have a look at this example, it may suit your requirements...
    Code:
    <!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

  • #3
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    wow!!!
    thats some hardcore coding!!!
    brilliant!!!

    just one more teensy weensy question

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

    thanks coothead!!!

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there vittel,

    here is the modified script...
    Code:
    <!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

  • #5
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    vittel:

    Another way...

    Code:
    <!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>

  • #6
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That is just perfect!!!

    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

    Any suggestions?

    Muchos Thanks!!

  • #7
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there vittel,

    here are my two pages...

    createOptions.html
    Code:
    <!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
    Code:
    <!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

  • #8
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    brilliant!

    This is just brilliant!!!

    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 and Ancora !!!

    Vittel

  • #9
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    No problem, you're very welcome.

  • #10
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there vittel,

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

    coothead
    Attached Files Attached Files

  • #11
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by coothead View Post
    Hi there vittel,

    here are my two pages...

    createOptions.html
    Code:
    <!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
    Code:
    <!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,


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •