How Can I Use Two Data-min And Data-max Attribute In Single Tag

I want to validate the width and thickness of the product on a selected product I am done with width but confuse with the thickness. like, I want to validate the width between 10 t

Solution 1:

You can just add more specific data attributes:

data-min-width, data-max-width, data-min-thickness, data-max-thickness

Solution 2:

By looking at your code, it seems that you are trying to read max and min width as well as thickness data attributes from the selected option but you are just reading 'min' and 'max' instead of 'min-width', 'min-thickness' etc.

See below code

$(function() {
  var $width = $('#width');
  var $thickness = $('#thickness');

  $('#product').change(function() {
    var $selected = $(this).find('option:selected');
    $width.prop({
      min: $selected.data('min-width'),
      max: $selected.data('max-width')
    });
    $thickness.prop({
      min: $selected.data('min-thickness'),
      max: $selected.data('max-thickness')
    });
  });
});

Solution 3:

use data attribute like data-min-width, data-max-width, data-min-thickness, data-max-thickness, and get this using attr property of jquery.

$(function() {
  var $width = $('#width');
  var $thickness = $('#thickness');

  $('#product').change(function() {
    var $selected = $(this).find('option:selected');
    $width.prop({
      min: $selected.attr('data-min-width'),
      max: $selected.attr('data-max-width')
    });
    $thickness.prop({
       min: $selected.attr('data-min-thickness'),
       max: $selected.attr('data-max-thickness')
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
  <select name="product" id="product" class="form-control">
    <option selected="selected" value="">Product type</option>
    <option value="Copper flat" data-min-width="10" data-max-width="200" data-min-thickness="1" data-max-thickness="20">Copper flat</option>
    <option value="Fabricated Copper Busbar" data-min-width="40" data-max-width="150" data-min-thickness="2" data-max-thickness="5">Fabricated Copper Busbar</option>
    <option value="Fabricated aluminium Busbar" data-min-width="3" data-max-width="20" data-min-thickness="1" data-max-thickness="9">Fabricated aluminium Busbar</option>
  </select>

  Width: <input type="number" id="width" required />
  
  thickness: <input type="number" id="thickness" required />
  <button>Submit</button>
</form>