selectedIndex].options.TEXT!<

[ecco loco]

I have a simple order form page that I've hacked together

I have Items in one drop down
I have matching qty's in the second drop down
I have corresponding prices in the third drop down
These are dynamically filled in via which index is selected

I submit the form to a preview/confirm page and if 'submitted' send that to a formmail script.

Works great except that my preview page and confirmation emails are propagated with the index values and not the index text -which makes it rather unreadable as an order form to both me and the person placing the order.

Now I even had a hack for that! I named the indexes the same value as the text being shown --Again worked great until some of my items had the same qty's

var a = new Array( //qty
var b = new Array( //price

a[0]= new Array(1, "");

a[102] = new Array(1,"", 10000,"10,000", 15000,"15,000", 20000,"20,000");

// Pricing #102
b[1] = new Array(1, "");
b[10000] = new Array(237.38, "237.38");
b[15000] = new Array(337.66, "337.66");
b[20000] = new Array(437.93, "437.93");

So this hack let me change my dropdowns and submit the values to preview/confirmation/email and maybe make some money

But then new items had some of the same qty's and my little hack doesn't work anymore because it'll return the 3rd dropdown value based on the last array that got that same value

:( --as it should so I guess I need either a eval() or I need to
define the selectedIndex]options.text and make sure the text NOT the value is sent on it's merry way

Any ideas?

[Kor]

Onsubmit a form will aways send the select value, not the selectedIndex option's text. The select value is the selecetedIndex option value.

I don't get the point...and your expalantion is a litle bit confusing for me. Can you show us the whole code? Can't you dynamically asign the options values to be the same with the options text?

[ecco loco]

Thanks for the reply!

I've included the relevant code below

Ex) I need item 145, I need 10,000, my price is 237.88

These are the values that would be shown in the drop downs

On submit I need to pass the values you see on the screen(text) not the selectedIndex value

What would you suggest?



<script LANGUAGE="JavaScript">
var a = new Array() //quantity
var b = new Array() //pricing
//#145
a[0]= new Array(
1, "");
a[145] = new Array(
1,"",
10000, "10,000",
15000, "15,000",
20000, "20,000");
// Pricing #145
b[0] = new Array(
1, "");
b[10000] = new Array(
237.38, "237.38 --.0237 PER 1,000");
b[15000] = new Array(
337.66, "337.66 --.0225 PER 1,000");
b[20000] = new Array(
437.93, "437.93 --.0218 PER 1,000");

// #151
a[151] = new Array(
101,"",
2000, "2,000",
2500, "2,500",
5000, "5,000");
b[101] = new Array(
1, "");
b[2000] = new Array(
88.87, "88.87");
b[2500] = new Array(
97.31, "97.31");
b[5000] = new Array(
135.71, "135.71");


// #180
a[180] = new Array(
201,"",
2000, "2,000",
2500, "2,500",
3000, "3,000");
b[201] = new Array(
1, "");
b[2000] = new Array(
72.00, "72.00");
b[2500] = new Array(
83.25, "83.25");
b[3000] = new Array(
90.89, "90.89");

// #181
a[181] = new Array(
301, "",
302, "0.00",
303, "0.00",
304, "0.00");
b[301] = new Array(
1, "");
b[302] = new Array(
0, "0.00");
b[303] = new Array(
1, "0.00");
b[304] = new Array(
2, "0.00");

function clearcombo(elem){
var i;
for (i = elem.options.length - 1; i >= 0; i--) elem[i] =null ;
elem.selectedIndex = -1;
}
function populatecombo2(elem, index){
for (var i = 0; i < a[index].length; i= i + 2){
elem.options[elem.options.length] = new Option(a[index][i + 1], a[index][i]);
}
}

function populatecombo3(elem, index){
if (b.length >= index){
if (b[index]){
for (var i = 0; i < b[index].length; i= i + 2){
elem.options[elem.options.length] = new Option(b[index][i + 1], b[index][i]);
}
}
}
}
function clickcombo1(elem){
clearcombo(document.f1.combo2)
clearcombo(document.f1.combo3)
populatecombo2(document.f1.combo2, elem[elem.selectedIndex].value);
return true;
}
function clickcombo2(elem){
clearcombo(document.f1.combo3)
populatecombo3(document.f1.combo3, elem[elem.selectedIndex].value);
return true;

}
</script>
<div class="or_frm">
<form name="f1" method="post" action="preview.php" onsubmit="return formCheck(this);">
<fieldset>
<legend>
<strong>(p>
^{*Item &nbsp;}
<select name="combo1" onchange="return(clickcombo1(this));"/>
<option selected value ="0">&nbsp;</option>
<option value="145">#145</option>
<option value="151">#151</option>
<option value="180">#180</option>
<option value="181">#181 </option>
</select>
</legend>
<legend>
^{*Quantity &nbsp;&nbsp;}

<select name="combo2" size="1" onchange="return(clickcombo2(this));" />
<option value="0"></option>
<option value="1"></option>
<option value=""></option>

</select>
</legend>
<legend>
^{&nbsp; *Price: &nbsp; &nbsp;}<select name="combo3" size="1" onchange="return(clickcombo3(this));" />
<option value="0"></option>
<option value="1"></option>
<option value=""></option>

</select>

[ecco loco]

**bump

Well this thread is getting a lot of views --

I would think this would be standard stuff -something someone would run into all the time.

I guess I'll continue to hack away :: I'll populate text boxes with the selectedIndex.options.text so that when the form is submitted it'll pass on the text box value(text) but it seems like o so much more difficult and time consuming.

Can anyone suggest a quick and easy way to accomplish what I'm trying to do?

Thanks !

[Kor]

I'll populate text boxes with the selectedIndex.options.text so that when the form is submitted it'll pass on the text box value(text) but it seems like o so much more difficult and time consuming.


Not at all. You don't read carefully my previous message. The value send to the CGI is the SELECT value. The SELECT value is always the selectedIndex option value. So, all you have to do is, in function called on onchange, insert something like

elem.value = elem.options[elem.selectedIndex].text

[ecco loco]

Thank you Kor.
Your suggestion led me to a working version.
I ended up populating a hidden field with the selected drop down value and then accessing it for the preview/email pages.


<select name="combo2" size="1" onchange="document.getElementById('qty').value=[this.options[this.selectedIndex].text];return(clickcombo2(this));" />
<option value="0"></option>
<option value="1"></option>
<option value=""></option>
</select>
<input type="hidden" name ="qty" value ="" />


I'm sure there are probably more elegant easily written solutions but today this job is done. NEXT :)
Thank you again !

[LuigiX]

Hi

I struck Kor on a good day and he kindly proferred this script which does the job admirably

Cheers

Luigi


That is what I said, you must replace the values with the text. Now you have to set dynamically the options' values.

insert in your script this kind of function:



PHP:
--------------------------------------------------------------------------------

function setValues(){
d = document.getElementsByTagName('select');
for(var i=0;i<d.length;i++){
d[i].options[d[i].selectedIndex].value = d[i].options[d[i].selectedIndex].text;
}
return true;
}

--------------------------------------------------------------------------------



and in form's tag

<form onsubmit="return setValues()">