Adding error with php in option list - php

Question

Code below is part of cart66 WordPress plugin's php file. When I list options of my items for example,
T-shirt
Quantity: 1
Option: Red, Yellow, Blue
First option is always what I put first in the list. Therefore, when my customers don't pay an attention and add to cart without looking at the list they order red. I added "Please choose a pattern" option at the top but they still add that to cart and checkout. Is there a way of adding an option and making it give an error in case that option is selected ?
private function _buildOptionList($optNumber) {
$select = '';
$optionName = "options_$optNumber";
if(strlen($this->$optionName) > 1) {
$select = "\n<select name=\"options_$optNumber\" id=\"options_$optNumber\" class=\"cart66Options options_$optNumber\">";
$opts = split(',', $this->$optionName);
foreach($opts as $opt) {
$opt = str_replace('+$', '+ $', $opt);
$opt = trim($opt);
$optDisplay = str_replace('$', CART66_CURRENCY_SYMBOL, $opt);
$select .= "\n\t<option value=\"" . htmlentities($opt) . "\">$optDisplay</option>";
}
$select .= "\n</select>";
}
return $select;
}

Answer 1

You could use jQuery and Javascript to show an alert box.
<script type="text/javascript">
$(function() {
$('#options').change(function() {
if ($(this).attr('value') == "Please choose a pattern") {
alert("Please pick a color!");
}
});
});
</script>
Make sure to include a recent copy of jQuery in your page, and change the id="" value of the selectbox to options (without any PHP variable).
Also, don't forget to still check in PHP if the user submitted a valid color. Do this because if the user has Javascript disabled, he will still be able to choose the 'please choose a pattern' item.

Answer 2

That is a commercial plugin (albeit with a free "lite" version). I would first suggest checking out their support forums:
http://cart66.com/support/
If you don't mind editing the PHP yourself, then perhaps I can offer some suggestions.
E.g. you could have a blank option come first, then have the validation code reject adding the item to card when a blank item is selected. The code you pasted in looks like it takes a list of options as a comma-separated string. So you can have a blank option by starting the string with "," e.g. ",Red,Yellow,Blue". But that won't be very user-friendly, it would be better to have the first one named "Select Option" and have a value of "". Since the above code does not allow this, you could alter that code, e.g. like this:
private function _buildOptionList($optNumber) {
$select = '';
$optionName = "options_$optNumber";
if(strlen($this->$optionName) > 1) {
$select = "\n<select name=\"options_$optNumber\" id=\"options_$optNumber\" class=\"cart66Options options_$optNumber\">";
$opts = split(',', $this->$optionName);
foreach($opts as $opt) {
if($opt == "<blank>") {
$opt = "";
$optDisplay = "Select One";
} else {
$opt = str_replace('+$', '+ $', $opt);
$opt = trim($opt);
$optDisplay = str_replace('$', CART66_CURRENCY_SYMBOL, $opt);
}
$select .= "\n\t<option value=\"" . htmlentities($opt) . "\">$optDisplay</option>";
}
$select .= "\n</select>";
}
return $select;
}
Then you could have your options list be ",Red,Yellow,Blue".
You may also need to modify cart66's verification code to make sure it rejects blank selections. I don't know if it does just by looking at the above code snippet.

Answer 3

There are a few ways to do this. Most simply, using plain Javascript, add this to the <form> element: <form onsubmit="if ( this.options_1.selectedIndex() == 0 ) { alert( 'Please select a colour' ); return false; >
(options_1 will need to match the $optNumber used to generate the drop-down. The return false; will prevent the form from submitting)
You could use jQuery to make this neater and more flexible; for instance, give your options a special value like "_NOT_SELECTED_", and use something like
<script type="text/javascript">
jQuery(function($) {
$('form.cart66Form').bind('submit', function()
{
$('select.cart66Options').each( function()
{
if ( $(this).val() == '_NOT_SELECTED_' )
{
$('#incorrect_submission_message').show();
return false;
}
}
return true;
}
});
</script>
Finally, of course, validation is always better done on the server side, in this case meaning in the PHP, so you'll need to find where the "add to basket" action happens in the plugin (or where you can add some actions to it) and add something that checks if your special value ("_NOT_SELECTED_", or perhaps just "-") has been submitted.