use data found in form to populate select options

@inosentApr 04.2011

I have a page that runs a lot of calculations.

The math is computed on the fly using java script

when all the calcs are in, prior to form submission the user needs to evaluate which numbers they prefer, and from there, once they select them, the form, based on those choices, will perform one last calc

lets say we have 3 result fields

r1 = 2000
r2 = 3000
r3 = 4000

what i want to do is have a select field be able to display those values at the bottom of the page;

for example

<select name=”s1″>
<option value=[field contents of r1 above]>[field contents of r1 above]</option>
<option value=[field contents of r2 above]>[field contents of r2 above]</option>
<option value=[field contents of r3 above]>[field contents of r3 above]</option>
</select>

is this possible?

this way all the user has to do is select the number (not type it in) and the form will do the calcs at the last

i tried using a radio button to recall the data, but even though that works, it wont calculate unless some other field on the form is manually tuped into. not sure why that is.

to post a comment

JavaScript

10 Comments(s) _↴

@coldfire421Apr 04.2011 — #You can create your own object that will generate an html element like dropdown list and you can pass the value of it as parameter to the object

ex. myList = new myDropdownList(calculation_1, calculation_2, calculation_3);

@coldfire421Apr 04.2011 — #ok i made this simple javascript class for you

[code=html]
 function myCustomDropdownList(object){
 this.obj = object;
 this.paramElement = [];
 }
 
 myCustomDropdownList.prototype.addList = function(list){
 var i = this.paramElement.length;
 this.paramElement[i] = list;
 }
 
 myCustomDropdownList.prototype.show = function(){
 document.write(this);
 }
 
 myCustomDropdownList.prototype.toString = function(){
 var str = "<select name='" + this.obj + "_list'>"
 
  for(i = 0; i < this.paramElement.length; i++){
   str += "<option value='" + this.paramElement[i] + "'>" + this.paramElement[i] + "</option>";
  }
  str += "</select>";
 
  return str;
 }
 [/code]

if you want to use it you can just make an instance and the property is something like this

[code=html]
 var myList = new myCustomDropdownList("myList"); // Initialization
 
 // To add list in the dropdown list
 myList.addList("x + y");
 myList.addList("z * x");
 myList.addList("y - z");
 
 // draw the html element
 myList.show();
 [/code]

@inosentauthorApr 04.2011 — #thank you for the code ... i'll check it in an hour or so.

all the best

@inosentauthorApr 04.2011 — #

[CODE]
 <html>
 <head>
 
 function myCustomDropdownList(object){
 this.obj = object;
 this.paramElement = [];
 }
 
 myCustomDropdownList.prototype.addList = function(list){
 var i = this.paramElement.length;
 this.paramElement[i] = list;
 }
 
 myCustomDropdownList.prototype.show = function(){
 document.write(this);
 }
 
 myCustomDropdownList.prototype.toString = function(){
 var str = "<select name='" + this.obj + "_list'>"
 
  for(i = 0; i < this.paramElement.length; i++){
   str += "<option value='" + this.paramElement[i] + "'>" + this.paramElement[i] + "</option>";
  }
  str += "</select>";
 
  return str;
 }
 
 var myList = new myCustomDropdownList("myList"); 
 
 // Initialization
 
 // To add list in the dropdown list
 myList.addList("x + y");
 myList.addList("z * x");
 myList.addList("y - z");
 
 // draw the html element
 myList.show();
 
 </head>
 <body>
 <form>
 <table>
 <tr>
 <td>
 <input name="a" value="10>
 <tr>
 <td>
 <input name="b" value="10>
 <tr>
 <td>
 <input name="c" value="10>
 <tr>
 <td>
 
 
 <select name="myList" ???>
 
 <option value=???>???</option> ('want to read field 'a' contents)
 <option value=???>???</option> ('want to read field 'b' contents)
 <option value=???>???</option> ('want to read field 'c' contents)
 
 </select>
 </table>
 </form>
 </body>
 </table>
 
 
 [/CODE]

what is the syntax to create the drop down list? i have all the js in the header ...

thanks again

@coldfire421Apr 05.2011 — #The class that I made you can put it in the head, something like this...

[code=html]
 <head>
 <script type="text/javascript">
 /*
 HERE PUT THE CLASS THAT I MADE
 /*
 </script>
 </head>
 [/code]

and then if you want to make an instance of it you can put it in a separate script tag under the body code something like this...

[code=html]
 <body>
 <script type="text/javascript">
 var yourVariable = new TheClassThatI_Made();
 </script>
 </body>
 [/code]

Its not actually wrong if you put both of them inside the head tag but for a cleaner code purpose that is why I separate it. but if you want to put them both inside the head tag, much better if you put the class that I made in a separate js file just link it something like this

[code=html]
 <head>
 <script type="text/javascript" src="The_URL_Where_You_Save_The_Separate_JS_Class"></script>
 <script type="text/javascript">
 // NOW HERE IS YOUR JAVASCRIPT CODE AND ALSO THE INITIALIZATION OF THE CLASS THAT I MADE
 
 var yourVariable = new TheClassThatI_Made();
 </script>
 </head>
 [/code]

@coldfire421Apr 05.2011 — #The syntax to make the drop-down list is the initialization of javascript object class

[code=html]
 var myList = new myCustomDropdownList("myList");
 [/code]

and if you want to add list of formula just use this syntax

[code=html]
 myList.addList("x + y"); // replace x + y with what ever formula you want to include in your list
 [/code]

and to show it just use this

[code=html]
 myList.show();
 [/code]

also I have notice that you directly put your javascript inside a head tag you should put it inside the script tag and inside the head tag something like this

[code=html]
 <head>
 <script type="text/javascript">
 // ALL THE JAVASCRIPT CODE MUST BE INSIDE THE SCRIPT TAG
 </script>
 </head>
 [/code]

and final things you dont need to be worried on how I construct the javascript object class or how it work, although its good if you want to know, but what you only need to know is how to initialize it, add property like when your adding a list of calcualtion and how to display it. In object oriented programming terms its what you called data encapsulation (no need to worry how the class was made, just know how to modify its property, how to call its method, and how to trigger an events)

@inosentauthorApr 05.2011 — #thank you for your posts. i will go through them carefully and apply the code. i love to see things work, and your help is greatly appreciated!

@inosentauthorApr 05.2011 — #

[code=html]
 <html>
 <head>
 <script type="text/javascript">
 
 function myCustomDropdownList(object){
 this.obj = object;
 this.paramElement = [];
 }
 
 myCustomDropdownList.prototype.addList = function(list){
 var i = this.paramElement.length;
 this.paramElement[i] = list;
 }
 
 myCustomDropdownList.prototype.show = function(){
 document.write(this);
 }
 
 myCustomDropdownList.prototype.toString = function(){
 var str = "<select name='" + this.obj + "_list'>"
 
  for(i = 0; i < this.paramElement.length; i++){
   str += "<option value='" + this.paramElement[i] + "'>" + this.paramElement[i] + "</option>";
  }
  str += "</select>";
 
  return str;
 }
 </script>
 
 
 
 </head>
 <body>
 
 <form>
 <table>
 <tr>
 <td>
 <input type="text" name="a" size="7" value="10"></span>
 <tr>
 <td>
 <input type="text" name="b" size="7" value="10"></span>
 <tr>
 <td>
 <input type="text" name="c" size="7" value="10"></span>
 <tr>
 <td>
 <script type="text/javascript">
 var myList = new myCustomDropdownList("myList");
 // To add list in the dropdown list
 myList.addList('form.a.value');
 myList.addList("form.b.value");
 myList.addList("form.c.value");
 
 // draw the html element
 myList.show();
 </script>
 
 
 </table>
 </form>
 </body>
 </table>
 
 
 
 [/code]

ok, so far so good, but now i want the values inside of fields 'a', 'b', 'c' to show up inside that drop down list if that is possible

@coldfire421Apr 06.2011 — #Okay I revised my class to fit on your code. just check the changes

[code=html]
 <html>
 <head>
 <script type="text/javascript">
 
 function myCustomDropdownList(object){
 this.obj = object;
 this.CtRlArray = [];
 }
 
 myCustomDropdownList.prototype.bindTextCtRl = function(textCtRl){
 for(i = 0; i < this.bindTextCtRl.arguments.length; i++){
 this.CtRlArray[i] = this.bindTextCtRl.arguments[i];
 }
 }
 
 myCustomDropdownList.prototype.updateList = function(i){
 var listId = this.obj + "_List";
 document.getElementById(listId).options[i] = new Option(this.CtRlArray[i].value, this.CtRlArray[i].value);
 document.getElementById(listId).selectedIndex = 0;
 }
 
 myCustomDropdownList.prototype.show = function(){
 document.write(this);
 }
 
 myCustomDropdownList.prototype.toString = function(){
 var str = "<select id='" + this.obj + "_List'>";
 
  for(i = 0; i < this.CtRlArray.length; i++){
   str += "<option value='"; 
   str += this.CtRlArray[i].value;
   str += "'>";
   str += this.CtRlArray[i].value;
   str += "</option>";
  }
 
  return str;
 }
 </script>
 </head>
 <body>
 <script type="text/javascript">
 var myList = new myCustomDropdownList("myList");
 </script>
 
 <form name="myForm">
 <table>
 <tr>
 <td><input type="text" name="a" size="7" value="10" onKeyup="myList.updateList(0);"></td>
 </tr>
 <td><input type="text" name="b" size="7" value="20" onKeyup="myList.updateList(1);"></td>
 <tr>
 <td><input type="text" name="c" size="7" value="30" onKeyup="myList.updateList(2);"></td>
 </tr>
 <td>
 <script type="text/javascript">
 var form = document.myForm;
 myList.bindTextCtRl(form.a, form.b, form.c);
 myList.show();
 </script>
 </td>
 
  </tr>
 </table>
 </form>
 </body>
 </table>
 
 [/code]

Also you can put the class that I made on a separate javascript file but to make it clear I just put them in 1 html file inside a head tag to make it simple

@coldfire421Apr 06.2011 — #Opps I have notice that the order of the table - form and body tag at the bottom of the code is not right, just fix the order of it. but it doesn't really matter if its not ok, it will not get affect on the javascrippt code. but for a cleaner purpose please fix it something like this

[code=html]
 </table>
 </table>
 </form>
 </body>
 </html>
 [/code]

Also in #JavaScript _↴

Stupidest error ever.Code that can Download files on my website [RESOLVED] Little script

Success!

Help @inosent spread the word by sharing this article on Twitter...

Tweet This

use data found in form to populate select options

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

use data found in form to populate select options

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴