How to set max or min values based on selected input-CodePudding

I have selected input for set max or min values in another input field.

Selected Input

<select name="SelectedInput" required>
    <option value="a">A</option>
    <option value="b">B</option>
</select>

input field where max value will be set

<input type="number" name="price" id="price_id" min="0" step="0.01" required>

Conditions

If I select A option, I want to set max value in input field < 5000.

If I select B option, I want to set min value in input field >= 5000.

CodePudding user response：

Selected Input :

<select name="SelectedInput" id="prooftype" required>
    <option value="a">A</option>
    <option value="b">B</option>
</select>

Input field where max value will be set :

<input type="number" name="price" id="price_id" min="0" step="0.01" required>

And then include javascript codes :

<script type="text/javascript">
var selectedopt;

$('#prooftype').change(function(){
   selectedopt=  $(this).val();

   //Add your condition here, and  check the selected option value:
  if(selectedopt== "a")
  {
   //Set input min and max value based on the selected option value.
   $('#price_id').attr('maxlength','4999');
  }
  elseif(selectedopt== "b")
  {
   $('#price_id').attr('minlength','5000');
  }
  // And so on........
})

CodePudding user response：

<input type="number" id="Number" 
           name="Number" min="1" max="100">