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')
    });
  });
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><formaction="#"><selectname="product"id="product"class="form-control"><optionselected="selected"value="">Product type</option><optionvalue="Copper flat"data-min-width="10"data-max-width="200"data-min-thickness="1"data-max-thickness="20">Copper flat</option><optionvalue="Fabricated Copper Busbar"data-min-width="40"data-max-width="150"data-min-thickness="2"data-max-thickness="5">Fabricated Copper Busbar</option><optionvalue="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: <inputtype="number"id="width"required />
  
  thickness: <inputtype="number"id="thickness"required /><button>Submit</button></form>