Jump to content

javascript option blocking according to terms


Greywacke
 Share

Recommended Posts

hi again,i've been asked to add a live form validation, disabling and enabling the budget dropdown's options as the user selects the form fields. i don't allow the form to submit if the user chose an option that is later disabled due to the requirements specified. here is what was asked for:

NEW + WHITE + (STYLE="SPACESAVER") --> R10,000+ NEW + WHITE + (MAKE/MODEL CONTAINS "LWB") --> R10,000+ NEW + WHITE + (MAKE/MODEL CONTAINS "CAB") --> R7,500+ (i.e. DCAB/CCAB/KCAB/EXTCAB/SCAB/etc.)NEW + WHITE + (MAKE/MODEL CONTAINS "KIA") --> R10,000+ NEW + WHITE + (MAKE/MODEL CONTAINS "HYUNDAI") --> R10,000+ NEW + WHITE + ALL OTHER --> R5,000+NEW + COLOUR + (STYLE="SPACESAVER") --> R12,500+NEW + COLOUR + (MAKE/MODEL CONTAINS "LWB") --> R12,500+NEW + COLOUR + (MAKE/MODEL CONTAINS "CAB") --> R10,000+ (i.e. DCAB/CCAB/KCAB/EXTCAB/SCAB/etc.)NEW + COLOUR + (MAKE/MODEL CONTAINS "KIA") --> R12,500+ NEW + COLOUR + (MAKE/MODEL CONTAINS "HYUNDAI") --> R12,500+ NEW + COLOUR + ALL OTHER --> R7,500+ALL PRE-OWNED + WHITE --> R3,000+ (i.e. no change/all enabled)ALL PRE-OWNED + COLOUR --> R4,000+ (i.e. only disable R3,000 to R4,000)
now i did the following script at first, but i am thinking now, that it would be better to do nested switch case statements.
function ValidatePrice(form) {	var req = form.canopy_req.options[form.canopy_req.selectedIndex].value.toLowerCase();	var style = form.canopy_style.options[form.canopy_style.selectedIndex].value.toLowerCase();	var make = form.vehicle_make_model.options[form.vehicle_make_model.selectedIndex].value.toLowerCase();	var price = form.budget;	for (var i = 0; i < price.options.length; i++) {		var pval = price.options[i].value;		// enable first element		if (pval.indexOf("select")>-1) {			price.options[i].disabled = false;		// new white		} else if (req.indexOf("new")>-1&&req.indexOf("white")>-1&&style.indexOf("spacesaver")>-1&&(pval.indexOf("R10,000")==0||pval.indexOf("R12,500")==0)) {			price.options[i].disabled = false;		} else if (req.indexOf("new")>-1&&req.indexOf("white")>-1&&style.indexOf("spacesaver")==-1&&make.indexOf("lwb")>-1&&(pval.indexOf("R10,000")==0||pval.indexOf("R12,500")==0)) {			price.options[i].disabled = false;		} else if (req.indexOf("new")>-1&&req.indexOf("white")>-1&&style.indexOf("spacesaver")==-1&&make.indexOf("cab")>-1&&(pval.indexOf("R7,500")==0||pval.indexOf("R10,000")==0||pval.indexOf("R12,500")==0)) {			price.options[i].disabled = false;		} else if (req.indexOf("new")>-1&&req.indexOf("white")>-1&&style.indexOf("spacesaver")==-1&&make.indexOf("kia")>-1&&(pval.indexOf("R10,000")==0||pval.indexOf("R12,500")==0)) {			price.options[i].disabled = false;		} else if (req.indexOf("new")>-1&&req.indexOf("white")>-1&&style.indexOf("spacesaver")==-1&&make.indexOf("hyundai")>-1&&(pval.indexOf("R10,000")==0||pval.indexOf("R12,500")==0)) {			price.options[i].disabled = false;		} else if (req.indexOf("new")>-1&&req.indexOf("white")>-1&&style.indexOf("spacesaver")==-1&&make.indexOf("hyundai")==-1&&make.indexOf("kia")==-1&&make.indexOf("cab")==-1&&make.indexOf("lwb")==-1&&(pval.indexOf("R5,000")==0||pval.indexOf("R7,500")==0||pval.indexOf("R10,000")==0||pval.indexOf("R12,500")==0)) {			price.options[i].disabled = false;		// new colour		} else if (req.indexOf("new")>-1&&req.indexOf("colour")>-1&&style.indexOf("spacesaver")>-1&&(pval.indexOf("R12,500")==0)) {			price.options[i].disabled = false;		} else if (req.indexOf("new")>-1&&req.indexOf("colour")>-1&&style.indexOf("spacesaver")==-1&&make.indexOf("lwb")>-1&&(pval.indexOf("R12,500")==0)) {			price.options[i].disabled = false;		} else if (req.indexOf("new")>-1&&req.indexOf("colour")>-1&&style.indexOf("spacesaver")==-1&&make.indexOf("cab")>-1&&(pval.indexOf("R10,000")==0||pval.indexOf("R12,500")==0)) {			price.options[i].disabled = false;		} else if (req.indexOf("new")>-1&&req.indexOf("colour")>-1&&style.indexOf("spacesaver")==-1&&make.indexOf("kia")>-1&&(pval.indexOf("R12,500")==0)) {			price.options[i].disabled = false;		} else if (req.indexOf("new")>-1&&req.indexOf("colour")>-1&&style.indexOf("spacesaver")==-1&&make.indexOf("hyundai")>-1&&(pval.indexOf("R12,500")==0)) {			price.options[i].disabled = false;		} else if (req.indexOf("new")>-1&&req.indexOf("colour")>-1&&style.indexOf("spacesaver")==-1&&make.indexOf("lwb")==-1&&make.indexOf("cab")==-1&&make.indexOf("kia")==-1&&make.indexOf("hyundai")==-1&&(pval.indexOf("R7,500")==0||pval.indexOf("R10,000")==0||pval.indexOf("R12,500")==0)) {			price.options[i].disabled = false;		// pre-owned white		} else if (req.indexOf("pre-owned")>-1&&req.indexOf("white")>-1) {			price.options[i].disabled = false;		// pre-owned colour		} else if (req.indexOf("pre-owned")>-1&&req.indexOf("colour")>-1&&(pval.indexOf("R4,000")==0||pval.indexOf("R5,000")==0||pval.indexOf("R7,500")==0||pval.indexOf("R10,000")==0||pval.indexOf("R12,500")==0)) {			price.options[i].disabled = false;		} else {			price.options[i].disabled = true;		}	}}

perhaps it would be better to use a combination of select cases with an if statement in between...just need some help clearing the vapour from a hot day under a galvanised iron roof.even nudges in the right direction would be greatly appreciated.it runs the ValidatePrice function on the document onload, canopy_req onchange, canopy_style onchange and vehicle_make_model onchange events.at the moment i am just wondering if there is another way to skin this cat that might be better practise. it's parsing the individual options and checking to see wether they should be enabled or not.the form can be viewed on the production site http://www.quoteme.za.net/canopy/, please do NOT submit dummy leads, though.

Edited by Pierre 'Greywacke' du Toit
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...