...

View Full Version : Multiple Selectors with options combination limited



4jd
09-16-2011, 10:46 AM
Hi All

Not sure if this is the right place to post but could do with some help.

Scenario:

1 Box holds 3 items, Complete box weighs 75g, each item 25g, customer chooses their own 3 combo items. This could be the same all the same item or 3 different items.

I need a script that will require the selections to make up 75g in order to continue the process. i.e customer can only continue when 3 items / 75g worth are selected.



Here is a short version, I have about 12 selectors at the moment and possible more will be created (if that matters).



<form name="cart_quantity" action="myProduct?action=add_product" method="post" enctype="multipart/form-data">
<
<div class="placeholder">
<img src="" alt="Image Placeholder" />
</div>
<label class="attribsSelect" for="attrib-6">Hard Boiled 1</label><br />
<select name="id[6]" id="attrib-6">
<option value="">Select Portion</option>
<option value="24">25g</option>
<option value="25">50g</option>
<option value="26">75g</option>
</select>

<div class="placeholder">
<img src="" alt="Image Placeholder" />
</div>
<label class="attribsSelect" for="attrib-7">Hard Boiled 2</label><br />
<select name="id[7]" id="attrib-7">
<option value="">Select Portion</option>
<option value="27">25g</option>
<option value="28">50g</option>
<option value="29">75g</option>
</select>

<div class="placeholder">
<img src="" alt="Image Placeholder" />
</div>
<label class="attribsSelect" for="attrib-8">Hard Boiled 3</label><br />
<select name="id[8]" id="attrib-8">
<option value="">Select Portion</option>
<option value="30">25g</option>
<option value="31">50g</option>
<option value="32">75g</option>
</select>

<div class="placeholder">
<img src="" alt="Image Placeholder" />
</div>
<label class="attribsSelect" for="attrib-9">Hard Boiled 4</label><br />
<select name="id[9]" id="attrib-9">
<option value="">Select Portion</option>
<option value="33">25g</option>
<option value="34">50g</option>
<option value="35">75g</option>
</select>

</form>


The section of the form is just the portion with selctors, there are other fields with radio buttons for color choice etc.

I have searched for something like this all over but cant find it.
Please please please could some genius out there help.

Thanks in advance :thumbsup:

vwphillips
09-16-2011, 03:42 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Grams(frm,cls,min){
var sels=bycls(cls,frm,'SELECT'),grams=0,z0=0;
for (;z0<sels.length;z0++){
if (isFinite(parseFloat(parseFloat(sels[z0].value)))){
grams+=parseFloat(sels[z0].value);
}
}
alert(grams)
return grams>=min;
}

function bycls(nme,el,nn){
for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(nn),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)){
ary.push(els[z0]);
}
}
return ary;
}

/*]]>*/
</script></head>

<body>
<form name="cart_quantity" action="myProduct?action=add_product" method="post" enctype="multipart/form-data">
<
<div class="placeholder">
<img src="" alt="Image Placeholder" />
</div>
<label class="attribsSelect" for="attrib-6">Hard Boiled 1</label><br />
<select class="grams" name="id[6]" id="attrib-6">
<option value="">Select Portion</option>
<option value="24">25g</option>
<option value="25">50g</option>
<option value="26">75g</option>
</select>

<div class="placeholder">
<img src="" alt="Image Placeholder" />
</div>
<label class="attribsSelect" for="attrib-7">Hard Boiled 2</label><br />
<select class="grams" name="id[7]" id="attrib-7">
<option value="">Select Portion</option>
<option value="27">25g</option>
<option value="28">50g</option>
<option value="29">75g</option>
</select>

<div class="placeholder">
<img src="" alt="Image Placeholder" />
</div>
<label class="attribsSelect" for="attrib-8">Hard Boiled 3</label><br />
<select class="grams" name="id[8]" id="attrib-8">
<option value="">Select Portion</option>
<option value="30">25g</option>
<option value="31">50g</option>
<option value="32">75g</option>
</select>

<div class="placeholder">
<img src="" alt="Image Placeholder" />
</div>
<label class="attribsSelect" for="attrib-9">Hard Boiled 4</label><br />
<select class="grams" name="id[9]" id="attrib-9">
<option value="">Select Portion</option>
<option value="33">25g</option>
<option value="34">50g</option>
<option value="35">75g</option>
</select>
<input type="button" name="" value="Test" onmouseup="Grams(this.form,'grams',75);" />
</form>
</body>

</html>

4jd
09-16-2011, 04:24 PM
Thanks Vic, I will give a go in a couple of hours, Can't believe I already got a answer after search for so long....most likely my brain is fried
will let you know how it goes, cheers again.

jay

4jd
09-16-2011, 05:23 PM
Thanks for that.

Problem I have though is that the value of the options are dynamically created by the cart. Would it be possible to create classes/ids for each option e.g 1,2,3 or 25,50,75 etc. and add those values up?

example:


<label class="attribsSelect" for="attrib-6">Hard Boiled 1</label><br />
<select class="grams" name="id[6]" id="attrib-6">
<option value="">Select Portion</option>
<option class="25" value="24">25g</option>
<option class="50" value="25">50g</option>
<option class="75" value="26">75g</option>
</select>

<div class="placeholder">
<img src="" alt="Image Placeholder" />
</div>
<label class="attribsSelect" for="attrib-7">Hard Boiled 2</label><br />
<select class="grams" name="id[7]" id="attrib-7">
<option value="">Select Portion</option>
<option class="25" value="27">25g</option>
<option class="50" value="28">50g</option>
<option class="75" value="29">75g</option>
</select>

<div class="placeholder">
<img src="" alt="Image Placeholder" />
</div>
<label class="attribsSelect" for="attrib-8">Hard Boiled 3</label><br />
<select class="grams" name="id[8]" id="attrib-8">
<option value="">Select Portion</option>
<option class="25" value="30">25g</option>
<option class="50" value="31">50g</option>
<option class="75" value="32">75g</option>
</select>



And is there a way that i could have the button display:visible only if the total is 3 or 75?

Thanks again,
jay:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum