Validate ddslick drop down value was selected

Question

I have a page I am working on which requires the value of a ddslick created drop down box be chosen in order to submit. The drop down is functioning, the value when selected passes to the target page which I am parsing the POST values with PHP. However, I am having a issue validating this ddslick drop down box. To make sure a value was chosen before submitting.

Here is the select box that I have:

<select name="backing" id="backing" class="ddslick-select">
<option value="">Select Back Style</option>
<option value="red">Red</option>
<option value="orange">Orange</option>
</select>

I am using this code to get the backing value:

<script type="text/javascript">
$('#backing').ddslick({
  showSelectedHTML: false,
  onSelected: function(data){
      alert(data.selectedData.value);
  }
});
</script>

When I submit it, the $_POST value of #backing is passing. However I am having a issue validating it to make sure a value was selected.

In the form I have a submit button, and I validate the Quantity and the Back style via this onsubmit function:

<a href="#" class="btn btn-cart right" onclick="javascript:return validateCart();">Add to cart</a>

Here is the Javascript function, the Qty is validating but the drop down with ddslick is not. If I remove the class="ddslick-select" from the dropdown which turns it to a normal drop down box, the validation works fine.

Here is Javascript function for ValidateCart():

function validateCart(){
var error = "";

if(document.getElementById("qty").value == '') {
    error += "You must select Quantity\n";      
}
if(document.getElementById("backing").value == '') {
    error += "You must select a Backing Design\n";      
}

if(error !== '') {
    alert(error);
    return false;
} else {
    document.productorder.submit();
}

}

My question is, how can I modify what I have now to validate the drop down box?

Thanks!

It looks like when you instantiate ddslick it completely removes your — James, Mar 06 '13 at 00:57
James, could you show me a example of how this would be implemented with the code that I have? — John, Mar 06 '13 at 02:18

score 0 · Accepted Answer · answered Mar 07 '13 at 03:55

0

I was able to validate the ddslick using this code:

if($('.dd-selected-value').val() == "") {
  error += "You must select a Backing\n";       
}

answered Mar 07 '13 at 03:55

John

351
1
7
18

Validate ddslick drop down value was selected

1 Answers1