jQuery Forum

Hello,

On page load I want the base price to be shown, the KitFormOptions to be hidden and the customised price to be hidden. This works well with my current code.

However when the user clicks the button it still shows the base price. I need it to hide the base price, display the KitFormOptions and display the customised price.

I have the following HTML code:

1. <div class="body">
       this is the outside
       
       <div class="customise-show-hide-wrapper"><b>Click to customise:</b><input type="button" id="customise-showhide-button" name="customise-showhide-button" class="customise-showhide-button"></div>
       
   <div id="KitFormOptions">
       this is the form
       <br />
   </div>
       
       <div class="KitPriceBox">
       <div class="testing">
           <span class="kitprice1">
               Base Price: £20<br /> <br />
           </span>
           <div class="kitprice2">
               Customised Price: £40 <br />
               (should display when button is clicked)
           </div>
   
       </div>
       </div>
       
   </div>

Here is my jsfiddle: [url=http://jsfiddle.net/FB5MQ/3/]My Current Example[/url]

I have a problem, I have been working on some jquery to set the quantity text box to display 25 or more. It checks if the wording personalisation has an empty string, if it doesnt them apply the 25 quantity as its obviously a kit product and personalised.

The crucial part for kit products is:

1. if (parseInt($("#kitProduct #Quantity").val()) < 25) {
2.     $("#kitProduct #Quantity").attr("value", "25");

It knows its a kit product because i have a div.id wrapped around the page called Kit Product.

My problem is that i need to override this kit product code for certain products. I thought the best way to do this as aquick fix would be to check for the contents of a div, eg:

1. <div class="ProductNameText">Exclusive Handmade Box</div>

If Exclusive Handmade Box is found then allow the user to enter a quantity of 1 or more into the text box.

I have tried the following code:

1. quantity = $('div.ProductNameText').text().match(/Exclusive Handmade Box/g).length;
2.        if(quantity)
3.          {
4.           $("#kitProduct #Quantity").attr("value", quantity);
5.           $("#kitProduct #Quantity").keypress(function(){
6.           var quantity = parseInt($.trim($(this).val()));
7.           if( quantity < 1) {
8.              $(this).val('1');
9.           } else {
10.              $(this).val(quantity);
11.          }

But this will only ever force 1. I am really lost now, ive explained as best as i can and below is a cut down example of the page within a jsfiddle.

Really hope you can help?

[url=http://jsfiddle.net/FB5MQ/3/]My Current Example[/url]