Youssef DRISSI Youssef DRISSI - 6 months ago 8
Javascript Question

Verify values of selctbox using jquery

i'm new to this. I'm using in a html page with 2 selctboxs, one for min price and the other for max price and a hidden input to put on it the combination of the two values of the selectboxs.

<div class="option-bar mini first">
<label><?=__("Min Price")?></label>
<span class="selectwrap">
<select name="min-price" id="pmin" class="search-select">
<option value=""></option>
<option value="1000">$1000</option>
<option value="2000">$2000</option>
<option value="3000">$3000</option>
<option value="4000">$4000</option>
<option value="5000">$5000</option>
<option value="6000">$6000</option>
<option value="7000">$7000</option>
<option value="8000">$8000</option>
<option value="9000">$9000</option>

</select>
</span>
</div>

<div class="option-bar mini">
<label><?=__("Max Price")?></label>
<span class="selectwrap">
<select name="max-price" id="pmax" class="search-select">
<option></option>
<option value="2000">$2000</option>
<option value="3000">$3000</option>
<option value="4000">$4000</option>
<option value="5000">$5000</option>
<option value="6000">$6000</option>
<option value="7000">$7000</option>
<option value="8000">$8000</option>
<option value="9000">$9000</option>
<option value="10000">$10,000</option>

</select>
</span>
</div>

<input type="hidden" id="prix" name="prix" class="sel2" value="" />


and i got this jquery code :

$("#pmin, #pmax").change(function(){
update();
});

function update() {
$("#prix").val($('#pmin').val() + "-" + $('#pmax').val());
}


So what i want to do is when the user select options in the two selectbox, verify if the min price value is lower than the max price value and if not show a message.

Thnx a lot guys.

Answer
$("#pmin, #pmax").change(function() {
  if ($("#pmin").val() && $("#pmax").val()) { //check if both have values
    if (parseFloat($("#pmin").val()) > parseFloat($("#pmax").val())) { //check if valid range
      alert('invalid range')
      return;
    }
  }
  update();
});