close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 or 2018 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

What pattern do I need to jQuery Validate a value less than a particular number?

Thread began 5/23/2014 12:59 pm by Nathon Jones Web Design | Last modified 5/30/2014 3:18 am by Nathon Jones Web Design | 1701 views | 26 replies |

Nathon Jones Web Design

What pattern do I need to jQuery Validate a value less than a particular number?

I have two options in a drop-down menu with corresponding numeric values on my product detail page:
Dimmable (1)
Non-Dimmable (2)

When the user first opens the product detail page I want the drop down menu to say "Please select". I initially set this to have a blank value and for the jQuery Validation to require a value - so it would fail if the user left if on "Please select". However, I have an onchange function on the page that HAS to have a value in order to carry out a lookup for a product code so that it can display the correct price. So, it occurred to me that since "Non-dimmable" is the default value for any product I could use "2" for the value of the "Please select" option but, of course, the jQuery Validation accepts it as a value.

So, my solution (and please let me know if you think this is nuts!), is to set the value of the Please select option to a 3 and make the jQuery Validation check for a value less than 3.

What pattern do I need to achieve this? I don't see an option, in the list of validations, for "is less than".
Thank you
NJ

Sign in to reply to this post

Jason ByrnesWebAssist

This cant be done with jquery validation, you would need to use server validation.

When the page loads, you already know the default price, so just show the default price.

the on change wont take effect on page load, it will only trigger when the selection is changed. on page load show the default price, then when a selection is made, let the onChange event look up the price to change what is displayed based on the selection.

Sign in to reply to this post

Nathon Jones Web Design

Originally Said By: Jason Byrnes
  the on change wont take effect on page load, it will only trigger when the selection is changed. on page load show the default price, then when a selection is made, let the onChange event look up the price to change what is displayed based on the selection.  



Problem is Jason, there are up to three drop down menu's...Colour (which doesn't affect price), Dimmable (which does) and Sensor (which does).

When the page initially loads I can show the default price, sure, but the customers first choice is colour therefore they'll have, for example...

Colour Drop-Down - Warm White
Dimmable Drop-Down - Please select
Sensor Drop-Down - Please select

This combination isn't available as a product so what's happening is that the price disappears, as does the lookup product code (because there isn't a product with this combination).

That was why I was trying to provide some kind of value for the Dimmable and Sensor drop downs, even though they're sat on "Please select", because the page will assume that those values are the default and, therefore, won't try to change the price or product code?

Does that sound sensible?
Thank you
NJ

Sign in to reply to this post

Jason ByrnesWebAssist

no, that does not sound sensible.

all options should be left at make a selection.

Sign in to reply to this post

Nathon Jones Web Design

When the page initially loads they are all left at make a selection. What I'm saying is that if a customer first chooses colour (they can't select them all at once), then the onchange event gets messed up because there is no "Blue / Please Select / Please Select" combination so the price and product lookup code disappears.

The Dimmable and Sensor options are either Yes or No - Dimmable or Non-Dimmable and Sensor or No Sensor. So...I felt that if I made the "Please select" value the same as "No" for both dimmable and sensor, albeit with a different value for "no" (ie. 3) then I could validate against those fields being less than a value of 3 and, therefore, the user would have to make a selection but, at the same time, the default fee and product code would be listed because, using the above example, their choice would be "Blue / Non-Dimmable / No Sensor".

Am I approaching this wrong?
Thank you
NJ

Sign in to reply to this post

Jason ByrnesWebAssist

instead of using onchange for the select lists, add a calculate price button, and run the look up on the calculate price button so that the look up only occurs once the user has made all selections and presses the calculate price option.

Sign in to reply to this post

Nathon Jones Web Design

onchange is what Ray has put in place for us Jason so we're sticking with it because it cost us $198 in a Premier Support ticket! :(

Regardless though, adding a calculate price button seems, to me, to be adding another level of complication/choice/click for the customer. They want to see the price and add to basket, not to have to calculate it themselves, no?

Do you feel that my solution, as described above, will cause problems?
Thank you
NJ

Sign in to reply to this post

Jason ByrnesWebAssist

I had no way of knowing this was implemented in a premier appointment as you did not specify this in your initial question.

as I have already said, the numeric range validation you are asking about cannot be done with jquery.

so to answer your question;

"Do you feel that my solution, as described above, will cause problems?"

Yes, because it cant be done that way.

Let me check with Ray to see what he would suggest, I don't know how he implemented the lookup, so I need to check with him. I'll let you know when I have more details.

Sign in to reply to this post

Jason ByrnesWebAssist

looking at the source code for your page, it looks like the code that updates the price is:

function updatePriceDisplay() {
var priceInfo = (silent_form[1]).split(":");
document.getElementById("productCode").innerHTML = priceInfo[1];
document.getElementById("productPrice").innerHTML = "£" + priceInfo[0] + " inc. vat";
}




I Would change that to:

function updatePriceDisplay() {
var priceInfo = (silent_form[1]).split(":");
if(priceInfo[1] !="") { document.getElementById("productCode").innerHTML = priceInfo[1]; }
if(priceInfo[0] !="") { document.getElementById("productPrice").innerHTML = "£" + priceInfo[0] + " inc. vat"; }
}



so that the price displayed is only updated if a price is returned by the lookup.

Sign in to reply to this post

Nathon Jones Web Design

Originally Said By: Jason Byrnes
  looking at the source code for your page, it looks like the code that updates the price is:

function updatePriceDisplay() {
var priceInfo = (silent_form[1]).split(":");
document.getElementById("productCode").innerHTML = priceInfo[1];
document.getElementById("productPrice").innerHTML = "£" + priceInfo[0] + " inc. vat";
}



I Would change that to:
function updatePriceDisplay() {
var priceInfo = (silent_form[1]).split(":");
if(priceInfo[1] !="") { document.getElementById("productCode").innerHTML = priceInfo[1]; }
if(priceInfo[0] !="") { document.getElementById("productPrice").innerHTML = "£" + priceInfo[0] + " inc. vat"; }
}


so that the price displayed is only updated if a price is returned by the lookup.  



That has resolved the issue with the product code and price disappearing, thank you. I'm still left with a problem though...

I have had to create "Parent" products in the products table so that users can view a product detail page but then HAVE to make selection from the variables menu in order to Add to Cart. Making a selection in the variables tables changes the product code and, if applicable, price so that the real product (not the parent) is added to basket.

This works fine for products that are available in all variations...
Cool White / Non-Dimmable
Warm White / Non-Dimmable
Cool White / Dimmable
Warm White / Dimmable

...however if a product isn't available in one of these combinations - lets say that it's not available in Cool White / Dimmable but is available in the other three variations - the user can still select Cool White / Dimmable because Cool White is available in the colour menu and Dimmable is available in the dimmable menu.

Here's an example of that in action:
http://www.ledwarehouseuk.com/LED-Lights-Bulbs.php?lbid=701

How do I prevent this as it is allowing the customer to add the parent product to the cart, which just doesn't work.
Thank you.
NJ

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...