CODEWITHSUNDEEP
jqueryhtml
always-a-learner
always-a-learner

Reputation: 3794

Jquery didn't identify the min max float number

I am Working on Two Select Box In which User Simply select Min & Max Value from Dropdown.

I am Simply Preventing a User to select Max Value which is less than Min Value.

I am Using Jquery to Prevent the user to select the "Max Value Which is Less then Min Value"

Case 1: Example If the user selects 4.6 from Min Select Box and If select option less then 4.6 then it gives an error message. But Problem is that if User Select options 10, 11, 12+ then it gives an error.

$('body').on('change', '#exp_max', function() {

  var min_exp = $('#exp_min').val();
  var max_exp = $(this).val();
  if (max_exp < min_exp) {
    console.log('Max Experience Cannot be Less then Min Experience');
    // $.Notification.autoHideNotify('error', 'top right', 'Max Experience Cannot be Less then Min Experience.','Experience');
    $(this).prop('selectedIndex', 0);
  }
});
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="col-lg-5">
  <select class="form-control" required data-parsley-minlength="1" id="exp_min" name="exp_min">
				<option value="">Min</option>
				<option value="-1">Last Year Student</option>
				<option value="0">Fresher</option>
				<option value="0.6" >0.6</option>
				<option value="1">1</option>
				<option value="1.6" >1.6</option>
				<option value="2">2</option>
				<option value="2.6">2.6</option>
				<option value="3">3</option>
				<option value="3.6">3.6</option>
				<option value="4">4</option>
				<option value="4.6">4.6</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12+</option>
			</select>
</div>
<div class="col-lg-5">
  <select class="form-control" data-parsley-type="number" id="exp_max" name="exp_max">
				<option value="">Max</option>
				<option value="1">1</option>
				<option value="1.6">1.6</option>
				<option value="2">2</option>
				<option value="2.6">2.6</option>
				<option value="3">3</option>
				<option value="3.6">3.6</option>
				<option value="4">4</option>
				<option value="4.6">4.6</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12+</option>
			</select>
</div>

Upvotes: 2

Views: 484

Answers (2)

Milan Chheda
Milan Chheda

Reputation: 8249

You can use parseFloat, below is the updated code:

$('body').on('change', '#exp_max', function() {

  var min_exp = $('#exp_min').val();
  var max_exp = $(this).val();
  if (parseFloat(max_exp) < parseFloat(min_exp)) {
   console.log('Max Experience Cannot be Less then Min Experience');
    //$.Notification.autoHideNotify('error', 'top right', 'Max Experience Cannot be Less then Min Experience.', 'Experience');
    $(this).prop('selectedIndex', 0);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-lg-5">
  <select class="form-control" required data-parsley-minlength="1" id="exp_min" name="exp_min">
			<option value="">Min</option>
			<option value="-1">Last Year Student</option>
			<option value="0">Fresher</option>
			<option value="0.6" >0.6</option>
			<option value="1">1</option>
			<option value="1.6" >1.6</option>
			<option value="2">2</option>
			<option value="2.6">2.6</option>
			<option value="3">3</option>
			<option value="3.6">3.6</option>
			<option value="4">4</option>
			<option value="4.6">4.6</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12+</option>
		</select>
</div>
<div class="col-lg-5">
  <select class="form-control" data-parsley-type="number" id="exp_max" name="exp_max">
			<option value="">Max</option>
			<option value="1">1</option>
			<option value="1.6">1.6</option>
			<option value="2">2</option>
			<option value="2.6">2.6</option>
			<option value="3">3</option>
			<option value="3.6">3.6</option>
			<option value="4">4</option>
			<option value="4.6">4.6</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12+</option>
		</select>
</div>

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You need to hide the options when you select a value for the min select dropdown. This code will be really helpful to you .

$(document).ready(function(){
 $('#exp_min').change(function(){
    var selectedValue = parseFloat($(this).val());
    $('#exp_max option').each(function(){
       if(parseFloat($(this).val()) > selectedValue) {
          $(this).css('display', 'block' );
       }else{
          $(this).css('display', 'none' );
       }
    });
    $('#exp_max').val('');
    $('#exp_max').prop('disabled', false);
 })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" required data-parsley-minlength="1" id="exp_min"  name="exp_min">
			<option value="">Min</option>
			<option value="-1">Last Year Student</option>
			<option value="0">Fresher</option>
			<option value="0.6" >0.6</option>
			<option value="1">1</option>
			<option value="1.6" >1.6</option>
			<option value="2">2</option>
			<option value="2.6">2.6</option>
			<option value="3">3</option>
			<option value="3.6">3.6</option>
			<option value="4">4</option>
			<option value="4.6">4.6</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12+</option>
		</select>

    <select class="form-control" data-parsley-type="number" id="exp_max"  name="exp_max" disabled>
			<option value="">Max</option>
			<option value="1">1</option>
			<option value="1.6">1.6</option>
			<option value="2">2</option>
			<option value="2.6">2.6</option>
			<option value="3">3</option>
			<option value="3.6">3.6</option>
			<option value="4">4</option>
			<option value="4.6">4.6</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12+</option>
		</select>

Upvotes: 1

Related Questions