Multiple Selectors with options combination limited

4jd · 09-16-2011, 09: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).

Code:

<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

vwphillips · 09-16-2011, 02:42 PM

Code:

<!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, 03: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, 04: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:

Code:

<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