...

View Full Version : Need Help dynamic select menu



mthierfelder
12-21-2006, 03:45 AM
Ok, here's the deal...I have two select menus, the second's options are contingent upon the selection in the first. Ok, I have this part covered.

The second part is that the value of the selection in select#2 gets split up and dropped into two hidden inputs via an onchange event in the menu...probably best to illustrate with actual code for the second select menu in the list (suppose that the "small" option is chosen):


..from head:
<script type="text/javascript">

function updateFields(nVal){

if (nVal == ""){return}
var nForm = document.forms[0];
var info = nVal.split(",")
nForm['Item'].value = info[0];
nForm['Partno'].value = info[1];
}

</script>

...end head
...here's the form

<select name="p2" size="1" id="combo_1" class="product_opt1" onchange="updateFields(this)">
<option value="">-select-</option>
<option value="Parie Hoodie,4047">small</option>
</select>
<input type="hidden" name="t2" value="d-size;small;medium;large;xlarge">
<input type="hidden" name="Item" >
<input type="hidden" name="Partno" >

This code actually works, however* I need the option chosen in select2 to submit the value of "small" not "Prarie Hoodie,4047" and that's the rub.

The function of this script is for a shopping cart (cart32) to effectively change the product name, and sku based on the product options chosen (red shirt, size: large). Cart32 has no inventory management for individual options so the solution is to create a sku for each size/color of shirt in your inventory. The problem is, how to get the form to pass this info properly.

Its a real mess, sorry if this seems unclear, its basically a plate of spaghetti...any help or suggestions appreciated.

Mike

david_kw
12-21-2006, 05:07 AM
I need the option chosen in select2 to submit the value of "small" not "Prarie Hoodie,4047" and that's the rub.

I'm not sure I know your answer but I do have a question. What do you mean by submit? You have a form and are hitting the submit button to load a new page and want the "small" passed instead of the description? Or do you mean some other form of submit like a javascript submit?

david_kw

mthierfelder
12-21-2006, 07:12 PM
Mike,

Thanks for pointing out that typo, I've been rehashing this script so many ways I guess I posted the non-working version..you're right it needed the ".value" there.

I think I'm using your original script, and I really appreciate you making it available. I'd be sunk without help from guys like you. Anyway, I tried the script you provided above but it is not working yet. I think the problem is my dnaymic select boxes are getting the value, and text portions populated but I don't know how to get it to populate the class part too. Here's the javascript I use to populate the 2nd select menu (see below).

Sorry about the long code, its a long wade through...I really appreciate any help. I'm sure its just something small but I'm missing it.

Dynamic select boxes javascript:


// first combo box

data_1 = new Option("felt (brown)", "felt (brown)");
data_2 = new Option("midnight blue", "midnight blue");

// second combo box

data_1_1 = new Option("small", "Prarie Hoodie-4047");
data_1_2 = new Option("medium", "Prarie Hoodie-4048");

data_2_1 = new Option("large", "Prarie Hoodie-4049");
data_2_2 = new Option("xlarge", "Prarie Hoodie-4050");

// functions

displaywhenempty="-select-"
valuewhenempty=-1

displaywhennotempty="-select-"
valuewhennotempty=0


function change(currentbox) {
numb = currentbox.id.split("_");
currentbox = numb[1];

i=parseInt(currentbox)+1

// I empty all combo boxes following the current one

while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
son = document.getElementById("combo_"+i);
// I empty all options except the first one (it isn't allowed)
for (m=son.options.length-1;m>0;m--) son.options[m]=null;
// I reset the first option
son.options[0]=new Option(displaywhenempty,valuewhenempty)
i=i+1
}


// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill

stringa='data'
i=0
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
if (i==currentbox) break;
i=i+1
}


// filling the "son" combo (if exists)

following=parseInt(currentbox)+1

if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
(document.getElementById("combo_"+following)!=null)) {
son = document.getElementById("combo_"+following);
stringa=stringa+"_"
i=0
while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {

// if there are no options, I empty the first option of the "son" combo
// otherwise I put "-select-" in it

if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
if (eval("typeof("+stringa+"1)=='undefined'"))
eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
else
eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
else
eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
i=i+1
}
//son.focus()
i=1
combostatus=''
cstatus=stringa.split("_")
while (cstatus[i]!=null) {
combostatus=combostatus+cstatus[i]
i=i+1
}
return combostatus;
}
}



Head code:

<script type="text/javascript">

function updateFields(nList){

if (nList.value == ""){return}
var nForm = document.forms[0];
var info = nList[nList.selectedIndex].className.split("-")
nForm['Item'].value = info[0];
nForm['Partno'].value = info[1];
}

</script>

HTML Form:


<form method="post" action="http://www.cart32hosting.com/cgi-bin/cart32.exe/candystore-AddItem">

<select name="p1" size="1" id="combo_0" class="product_opt2" onchange="change(this)">
<option value="">-select-</option>
<option value="felt (brown)" >felt (brown)</option>
<option value="midnight blue" >midnight blue</option>
</select>
<input type="hidden" name="t1" value="d-color;felt (brown);midnight blue">
<select name="p2" size="1" id="combo_1" class="product_opt1" onchange="updateFields(this)">
<option value="">-select-</option>
</select>
<input type="hidden" name="t2" value="d-size;small;medium;large;xlarge">
<input type="hidden" name="Item">
<input type="hidden" name="Partno" >
<input type="hidden" name="Price" value="168" >
<input type="hidden" name="Category" value="womens tops" >
<input name="Qty" type="text" value="1" size="1" maxlength="2" class="product_qty">
<input name="submit" type="image" value="add to bag" src="/images/main_add_03.png" alt="add to bag" hspace="0" vspace="0" border="0" class="product_addtobag">

</form>

dumpfi
12-21-2006, 07:46 PM
Another way to do what you want:


-- in script tag
function updateFields(sel)
{
var
option = sel.options[sel.selectedIndex],
value = option.value.split(','),
text = option.text;

alert('Option text: ' + text + '\nOption value: ' + value);
}

-- in body tag
<select name="p2" size="1" id="combo_1" class="product_opt1" onchange="updateFields(this)">
<option value="">-select-</option>
<option value="Parie Hoodie,4047">small</option>
</select>dumpfi

mthierfelder
12-21-2006, 08:31 PM
Yes, I agree it is complex. However, my limited understanding of js doesn't allow me to rewrite it like you can. The one thing that concerns me about your code is this: The product in question is a hooded sweatshirt, it is available in blue and brown. Blue shirts are only available in L and XL, brown in S and M. Each product option must have its own sku (4047, 4048, etc). So, the question is, with your script, does it allow for this? IE, if I choose brown will my only size options be S and M? or would I be presented with all size options there?

mthierfelder
12-21-2006, 09:10 PM
I understand, my approach was confusing maybe because I myself am confused about how to approach it. In the future I will be upfront with my problems.

I really appreciate your help with this. That being said I do have a solution that works for my needs and does what it needs to do, however unelegant it may be by your standards. Please don't bother yourself with trying to come up with more solutions, I really think I've got something here.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum