Custom Code That Updates Price on Product Page with Quantity and Option Change

[Odanrotolleh]

Hello,

I've spent a bit customizing my product pages to update the price displayed on the page with a quantity change even with options that have values. It works beautifully when you select your size and then the quantity you want. The problem I'm having is when you select your size, then quantity and then go back and change the size again. It doesn't change the price. I'm wondering if someone can help. Before I post the code I'd like you all to know that I do not know what I'm doing when it comes to writing jQuery. I just piece together and modify what I can find online. I can't write from scratch. Also, the website I'm working on is pretty far from being finished, so don't laugh at how bad it looks. I've spent probably too much time trying to get this price thing working, but I just get kinda obsessed with things like this.

Anywho, here's the code and stuff. I haven't had a chance to clean out the tables. If it makes it easier for any of you to help I can. Just let me know:

Test product: Black Flexible Silicone Tunnels with Flared Ends

<!--START: PRODUCT_OPTIONS_BLOCK-->
<div id="divOptionsBlock"> 
 <!--START: divOptionsBlock-->
 <table cellpadding="0" cellspacing="0" width="100%">
  <tr>
   <td>
    <table cellpadding="0" cellspacing="0">
     <tr>
      <td align="center">
       <!--START: optionstemplate--> 
       <!--START: dropdown-format-->
       <select name="[oname]" onchange="validateValues(document.add,1);selectOption(this);" class="txtBoxStyle" id="dropdowntest">
        <!--START: option-->
        <option value="[value]" [selected]>[feature] [oprice]</option>
        <!--END: option-->
       </select>
       <!--END: dropdown-format-->
      </td>
     </tr>
     <tr>
      <td align="center"><!--START: dropdownimage-format-->
       <table border="0" cellpadding="0" cellspacing="0">
        <tr>
         <td valign="middle">
	  <select name="[oname]" onchange="validateValues(document.add,1);" class="txtBoxStyle">
           <!--START: option-->
           <option value="[value]" [selected]>[feature] [oprice]</option>
           <!--END: option-->
          </select>
	 </td>
         <td> </td>
         <td><img name="img_[oname]" src="assets/templates/common/images/spacer.gif" alt="" border="0"></td>
        </tr>
       </table>
      <!--END: dropdownimage-format--> 
      <!--END: optionstemplate--></td>
      </tr>
      <tr>
       <td><!--START: options--> 
        <!--START: opt-title-->
        <table width="100%" cellpadding="0" cellspacing="0">
         <tr>
          <td class="options-titles" align="center" valign="top">[OPTIONLABEL]  [OPTIONFIELD]</td>
         </tr>
        </table>
       <!--END: opt-title-->
      </td>
     </tr>
     <tr>
      <td valign="middle"><!--START: opt-regular-->
       <table cellspacing="10" cellpadding="0" border="0">
        <tr>
         <td align="left" class="item" valign="middle">[OPTIONFIELD]</td>
        </tr>
       </table>
       <!--END: opt-regular--> 
       <!--END: options-->
      </td>
     </tr>
    </table>
   </td>
  </tr>
 </table>
 <!--END: divOptionsBlock--> 
</div>
<!--END: PRODUCT_OPTIONS_BLOCK--> 
<!--START: addtocart--><!--START: ITEMPRICE-->
<div id="product_qty"><!--START: qtybox-->
 <select id="product_qtydropdown" name="qty-0" onchange="validateValues;">
  <option selected="selected">Choose qty</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
 </select> 
<!--START: pricing-->
<!--END: qtybox-->
</div>
<div id="product_addtocartbutton">
 <div id="price" style="display: none;">[price]</div>
 <div itemprop="price" id="pricetest"></div>
 <input type="button" onclick="check_and_add(document.add);" name="Add" value="[product_addtocart]" class="button addtocart_button" /></div>
</td>
<!--START: pricing-->
<!--END: qtybox-->
</div>
<div id="product_addtocartbutton">
 <div id="price" style="display: none;">[price]</div>
 <div itemprop="price" id="pricetest"></div>
 <input type="button" onclick="check_and_add(document.add);" name="Add" value="[product_addtocart]" class="button addtocart_button" /></div> 
</td>

<script type="text/javascript">
	   $("#product_qtydropdown").change(function () {
               var txt = $('#price').text();
			   var price = parseInt($(this).val(), 10)* txt;
          $("#pricetest").text('$' + price.toFixed(2));
        })
        .change();
	</script>
	<script type="text/javascript">
	 $('select:not("#dropdowntest")').find('option').prop('disabled', true);
$('#pricetest').hide();

$('select').change(function(){   $('#product_qtydropdown').find('option').prop('disabled', false)
})

$('#product_qtydropdown').change(function(){
    $('#pricetest').show();
})
	</script>

Thanks!

Shala

[Pack Secure]

I am not a code writer, but it seems that there needs to be an update button behind the scenes when this change is made.

[jleclair]

im more of a hands on debugger ( i like to see the error messages) but from what i can see, you don't typeconvert txt in that code you posted. you are parsing the other value to int but not the txt value

$("#product_qtydropdown").change(function () {
               var txt = $('#price').text();
			   var price = parseInt($(this).val(), 10)* txt;

[Odanrotolleh]

Hi! Thank you all so much for taking the time to reply to my post.

Pack Secure: I was thinking the same thing, I just don't know how to accomplish it.

jleclair: I'm not receiving any errors, and I'm not sure what you're talking about, but my guess is I should have something like

var txt = $('#price').integer();

Instead of

var txt = $('#price').text();

Am I close? Anywho, it's all working as it should, (I think) I just need the price to update when I choose a size after I've selected a quantity. Like an onchange update price of some sort. Sorry I can't be more clear. jQuery is not my forte :/

Thanks again for your time!

Shala