copy text/value from one drop down to another 2

ttuser4 · Feb 11, 2009

hi,
i am looking for help with script which would take 'text' and 'value' from one drop down and put '(text * 3.2808399)' and 'value' to another drop down on onClick event.
the reason for this is to convert meters to feet as an input for php/mysql.

i did it for text boxes (see code below) but have no clue how to achieve the same for drop downs.

script for text boxes:

function m2f(form) {
var m = parseFloat(form.lm.value);
var f = "";
if (!isNaN(m)) f = Math.round(m * 3.2808399 * 100)/100;
form.tlength.value = f;
}

function f2m(form) {
var f = parseFloat(form.tlength.value);
var m = "";
if (!isNaN(f)) m = Math.round(f * 0.3048* 100)/100;
form.lm.value = m;
}

ScottPrelewicz · Feb 11, 2009

To get the value of a select box, you need to get the index of the <option> element selected, like:

Code:

var indexOfSelect = document.getElementById('yourOptionTagID').selectedIndex;
var selectedValue = document.getElementById('yourOptionTagID')[indexOfSelect].value;

Scott Prelewicz
Web Developer
COMAND Solutions

ttuser4 · Feb 11, 2009

well, i put together this script:

function sm2f(field) {
var indexOfSelect = document.getElementById('select04').selectedIndex;
var selectedValue = document.getElementById('select04')[indexOfSelect].value;
var selectedText = parseFloat(document.getElementById('select04')[indexOfSelect].text);
var sm = "";
sm = Math.round(selectedText * 3.2808399 * 1)/1;
document.getElementById('select02')[indexOfSelect].value = selectedValue;
document.getElementById('select02')[indexOfSelect].text = sm;
alert(document.getElementById('select02')[indexOfSelect].value);
alert(document.getElementById('select02')[indexOfSelect].text);
}

html:

<select name="select02" id="select02" onchange="madeSelection(this);">
<option value="--">Select your span [ft]</option>
</select> <div id="select02Container"> or </div>

<select size="1" name="select04" id="select04" onChange="sm2f(this);">
<option value="--">Select your span [m]</option>
</select> <div id="select04Container"> </div>

no error message, alerts show proper values, but drop down 'select02' is not changed - still shows the initial text 'Select your span [ft]'

ScottPrelewicz · Feb 11, 2009

I'm not sure *exactly* what you are trying to do, but the code below takes a value from the Second dropdown, converts it, and adds it as an option to the first dropdown.

Is that on the right track?

Code:

<html>
<head>
<script>

function sm2f(field) {
	var indexOfSelect = document.getElementById('select04').selectedIndex;
	var selectedValue = document.getElementById('select04')[indexOfSelect].value;
	var selectedText = parseFloat(selectedValue);
	var sm;

	sm = Math.round(selectedText * 3.2808399 * 1)/1;
	
	//ADD ELEMENT TO SELECT	
	var newOption = document.createElement('option');
	newOption.text = sm;
	newOption.value = sm;
	var elSel = document.getElementById('select02');

	try {
		elSel.add(newOption, null); 
	}
	catch(ex) {
		elSel.add(newOption); // IE only
	}

	//alert(document.getElementById('select02')[indexOfSelect].value);
	//alert(document.getElementById('select02')[indexOfSelect].text);
}    

</script>
       
</head>
<body>
<form>
<select name="select02" id="select02" onchange="madeSelection(this);">
       <option value="--">Select your span [ft]</option>
</select> <div id="select02Container">  or   </div>
     
 <select size="1" name="select04"  id="select04" onChange="sm2f(this);">
        <option value="--">Select your span [m]</option>
		<option value="32">32</option>
		<option value="40">40</option>
		<option value="50">50</option>
</select> 
</form>
<div id="select04Container"> </div>
</body>
</html>

Scott Prelewicz
Web Developer
COMAND Solutions

ttuser4 · Feb 11, 2009

well, i have working php/mysql application which calculates price of an enclosure based on data submitted through input form. it works fine, but it works using imperial measurements.
what i want to do is to enable user to enter metric data, convert it to imperial and feed the original php code.

input data are - total length (text box), frame (drop down select01), span (drop down select02), model (drop down select03).

select02 is populated by javascript based on select01 selection, select03 is populated by javascript based on select02 selection.

beside other parameters, php code reads 'total length' from text box, 'span' from selection02 and 'model' from selection03.

i already added text box for converting total length (code in previous post). now i want to add selection04 for selection of span in metric ([m]). selection04 is populated by javascrip based on selection01 (together with selection02). i want an user to be able use any span selection (feet or meters).

if an user uses ft (imperial), php already reads values from select02 so i just want to show converted value in select04 (not just add, but show it).

if an user uses m (metric), i need to change select02 so php code can read proper values as if select02 was used.

hope this helps to explain what i want to do.

ScottPrelewicz · Feb 11, 2009

Okay, I think I have it figured out, my question is why use a select box for 04. Why not just display it? Do you think its just more user-friendly that way? It may well be. If you want it to be a select, I'll show you how to make it happen.

Scott Prelewicz
Web Developer
COMAND Solutions

ttuser4 · Feb 11, 2009

there are three select boxes in the original version - frame (select01), span (select02), model (select03). as i said before, span is populated based on frame selection in order to use only existing combination (avoid not matching combination, empty database recordset).

since the current version works with span (selection2) in [ft], adding selection04 and populating it with metric values i wanted to enable user selection in [m] and then convert user's input to selection02 as selection03 is populated according to selection02 and php reads values from selection02.

probably they are other ways how to enable input in both imperial and metric systems, i wanted to keep server side (php) unchanged and do the conversion in javascript.

ScottPrelewicz · Feb 11, 2009

Okay, just to clear it up before I do any code samples to make sure we're on the same page now.

The user selects something from select01. This populates select02 [ft]. At this point, you want to create *on-the-fly* select04, with the values converted to [m]. If the user makes a selection from select04, you want to auto-select the corresponding value from select02 for transfer to the form processor, and at the same time populate/repopulate select03. Correct?

Scott Prelewicz
Web Developer
COMAND Solutions

ttuser4 · Feb 11, 2009

1) User types value for total length (either [ft] or [m]) into proper textbox (already done).
2) The user selects something from select01.
3) This populates select02 [ft] and select04 [m] (already done).

Then user has two options:

4a) Selects something from select02 (imperial).
5a) This populates select03 and shows corresponding value in [m] on select04.
6a) User clicks submit to send data to php (php reads values from proper text box, select02 and select03 - already done).

or:

4b) Selects something from select04 (metric).
5b) It auto-selects corresponding values in select02, this value from select02 populates select03.
6b) User clicks submit to send data to php (php reads values from proper text box, select02 and select03 - already done).

Thank you for bearing with me.

ScottPrelewicz · Feb 11, 2009

Ahhh, okay, I think I got it. I will try to get to this tonight, if not I'll have an answer for you tomorrow.

Scott Prelewicz
Web Developer
COMAND Solutions

ScottPrelewicz · Feb 11, 2009

Okay, here's hoping that we finally have it

The following will take whatever is selected in one select, and select the corresponding value (by index) in the other. Have we finally found a solution?

Code:

<html>
<head>
<script>

function sm2f(id) {
	var indexOfSelect = document.getElementById(id).selectedIndex;

	var other = (id == 'select02') ? 'select04' : 'select02';
    document.getElementById(other)[indexOfSelect].selected = "1";
}    

</script>
       
</head>
<body>
<form>
 <select size="1" name="select02"  id="select02" onChange="sm2f('select02');">
        <option value="--">Select your span [m]</option>
		<option value="32">option 1</option>
		<option value="40">option 2</option>
		<option value="50">option 3</option>
</select>  

<div id="select02Container">  or   </div>     
 <select size="1" name="select04"  id="select04" onChange="sm2f('select04');">
        <option value="--">Select your span [m]</option>
		<option value="32">option 1</option>
		<option value="40">option 2</option>
		<option value="50">option 3</option>
</select> 
</form>
</body>
</html>

Scott Prelewicz
Web Developer
COMAND Solutions

ttuser4 · Feb 12, 2009

thank you very much for your help; it almost works as i want except when user select span using select04 - it shows corresponding value in select02, but this change doesn't populate select03. everything else works just fine.

my javascript code (part):

function loadSelectElement(selObjId, options) {
var selObj = document.getElementById(selObjId);
selObj.options.length = 1;
if (typeof(window.clientInformation) != 'undefined') {
for (var loop=0; loop<options.length; loop++) selObj.add(new Option(options[loop][1], options[loop][0]));
} else {
for (var loop=0; loop<options.length; loop++) selObj.add(new Option(options[loop][1], options[loop][0]), null);
}
}

function madeSelection(selObj) {
var selectedValue = selObj.options[selObj.selectedIndex].value;
var selectedText = selObj.options[selObj.selectedIndex].text;
if (selectedValue == '--') return;
if (selObj.name == 'select01') {
document.getElementById('select02Container').style.display = 'block';
document.getElementById('select04Container').style.display = 'block';

switch(selectedValue) {

case 'lt':
loadSelectElement('select02', [
['l08', '8'],
['l09', '9'],
['l10', '10'],
['l11', '11'],
['l12', '12'],
['l13', '13'],
['l14', '14'],
['l15', '15'],
['l16', '16'],
['l17', '17'],
['l18', '18'],
['l19', '19'],
['l20', '20'],
['l21', '21'],
['l22', '22'],
['l23', '23'],
['l24', '24']
]);
loadSelectElement('select04', [
['l08', '2.4'],
['l09', '2.7'],
['l10', '3.0'],
['l11', '3.4'],
['l12', '3.7'],
['l13', '4.0'],
['l14', '4.3'],
['l15', '4.6'],
['l16', '4.9'],
['l17', '5.2'],
['l18', '5.5'],
['l19', '5.8'],
['l20', '6.1'],
['l21', '6.4'],
['l22', '6.7'],
['l23', '7.0'],
['l24', '7.3']
]);

... continues for other combinations

return;

}
} // select01

if (selObj.name == 'select02') {
document.getElementById('select03Container').style.display = 'block';
// document.getElementById('select03').options[0].text = 'Select the model of your ' + selectedText;

switch(selectedValue) {

case 'l08':
loadSelectElement('select03', [
['CELG', 'CELG'],
['CELS', 'CELS']
]);
return;

case 'l09':
loadSelectElement('select03', [
['CELG', 'CELG'],
['CELS', 'CELS']
]);
return;

case 'l10':
loadSelectElement('select03', [
['CELG', 'CELG'],
['CELS', 'CELS']
]);
return;

... continues for other combinations

}
} // select02
}

function sm2f(id) {
var indexOfSelect = document.getElementById(id).selectedIndex;

var other = (id == 'select02') ? 'select04' : 'select02';
document.getElementById(other)[indexOfSelect].selected = "1";
}

function m2f(form) {
var m = parseFloat(form.lm.value);
var f = "";
if (!isNaN(m)) f = Math.round(m * 3.2808399 * 100)/100;
form.tlength.value = f;
}

function f2m(form) {
var f = parseFloat(form.tlength.value);
var m = "";
if (!isNaN(f)) m = Math.round(f * 0.3048* 100)/100;
form.lm.value = m;
}

function data_change(field)
{
var check = true;
var value = field.value; //get characters
//check that all characters are digits, ., -, or ""
for(var i=0;i < field.value.length; ++i)
{
var new_key = value.charAt(i); //cycle through characters
if(((new_key < "0") || (new_key > "9")) &&
!(new_key == ""))
{
check = false;
break;
}
}
//apply appropriate colour based on value
if(!check)
{
field.style.backgroundColor = "red";
}
else
{
field.style.backgroundColor = "white";
}
}

html:
...
<table border="1" width="100%" height="54">
<tr>
<td width="28%" height="24">
Length  (total length of enclosure)</td>
<td width="21%" height="24"><input type="text" name="tlength" size="20" onkeyup="data_change(this);f2m(this.form);">
[ft] </td>
<td width="51%" height="24"> or <input type="text" name="lm" size="20" onkeyup="m2f(this.form);">
[m]</td>
</tr>
<tr>
<td width="28%" height="18">
<select name="select01" id="select01" onfocus="validateEmpty(tlength);" onchange="madeSelection(this);">
<option value="--">Select your frame</option>
<option value="fs">FS</option>
<option value="lt">LT</option>
</select><div id="select01Container">

</div>
</td>
<td width="21%" height="18">
<select name="select02" id="select02" onchange="madeSelection(this);sm2f('select02');">
<option value="--">Select your span [ft]</option>
</select> <div id="select02Container"> or </div>

<select size="1" name="select04" id="select04" onChange="sm2f('select04');">
<option value="--">Select your span [m]</option>
</select> <div id="select04Container"> </div>

</td>
<td width="51%" height="18"> <select name="select03" id="select03" onchange="madeSelection(this);">
<option value="--">Select your model</option>
</select> <div id="select03Container"> </div>

</td>
</tr>
</table>
...

just to fix populating select03 on change select02 and it should be done...

ScottPrelewicz · Feb 12, 2009

Oh yeah, forgot about that part

I dont have time right now to look to deep into it, but at a quick glance I think that if in this:

Code:

function sm2f(id) {
    var indexOfSelect = document.getElementById(id).selectedIndex;

    var other = (id == 'select02') ? 'select04' : 'select02';
    document.getElementById(other)[indexOfSelect].selected = "1";
    [COLOR=red]madeSelection(document.getElementById('select02'));[/color]
}

Should work

Scott Prelewicz
Web Developer
COMAND Solutions

ttuser4 · Feb 12, 2009

excellent, thank you very much!

ScottPrelewicz · Feb 12, 2009

You're very welcome, glad we funf a solution.

Scott Prelewicz
Web Developer
COMAND Solutions

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!

copy text/value from one drop down to another 2

ttuser4

MIS

ScottPrelewicz

IS-IT--Management

ttuser4

MIS

ScottPrelewicz

IS-IT--Management

ttuser4

MIS

ScottPrelewicz

IS-IT--Management

ttuser4

MIS

ScottPrelewicz

IS-IT--Management

ttuser4

MIS

ScottPrelewicz

IS-IT--Management

ScottPrelewicz

IS-IT--Management

ttuser4

MIS

ScottPrelewicz

IS-IT--Management

ttuser4

MIS

ScottPrelewicz

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor