javascript - JS 没有控制 HTML 输入表单的最小 step 属性值

Question

我有一个包含两个字段 stationerytype 和 stationeryrqstqty 的表单。表单的 stationeryrqstqty 字段接受数字。可在此字段中输入的最小数量（数量）取决于 stationerytype 字段的值，即如果 stationerytype 字段值为“铅笔”，则 stationeryrqstqty 字段的最小值属性应为 5，如果为“记事本”那么 stationeryrqstqty 字段的最小属性应该是 10。我是按照给定的代码来做的，但它不起作用。它总是给出 1,2,3.......

<td><input type="text"  name="slno" value= "<?php echo $i; ?>" class="form-control " readonly ></td>
    
    <td><input  type="text" name="stationerytype[]" id="stationerytype" class="option1 form-control" autocomplete="off"  required>
            <datalist id="datalist1" >
            <option value=""></option>
            <option value="MEETING PEN">MEETING PEN</option>
            <option value="NOTEPAD">NOTEPAD</option>
            <option value="PLASTIC FOLDER">PLASTIC FOLDER</option>
            <option value="PENCIL">PENCIL</option>
            </datalist> 
            
            <datalist id="datalist2" >
            <option value=""></option>
            <option value="A4 GREEN REAM">A4 GREEN REAM</option>
            <option value="A4 WHITE REAM">A4 WHITE REAM</option>
            <option value="BMO LETTER HEAD">BMO LETTER HEAD</option>
            </datalist>
      </td>
                        
                
                        
    <td><input type="NUMBER" name="stationeryqtyrqst[]" id="stationeryqtyrqst" class="form-control" required ></td>
    <script>
    var options = document.querySelectorAll(".option1");
        options.forEach(function(option) {
          option.addEventListener("keyup", function() {
            calculatingMinimunQuantity(option);
          });
          option.nextElementSibling.addEventListener('change', evt => {
            if (+evt.target.value < +evt.target.min) evt.target.value = evt.target.min
          });
        });
        
        function calculatingMinimunQuantity(option) {
          var minimum = 0, step1 = 0;
          var value = option.value;
          if (value === "PENCIL") {
            minimum = "5";
            step1="5";
          } else if (value === "NOTEPAD") {
            minimum = "10";
            step1="10";
          }
          //   getting the quantity input field
          option.nextElementSibling.setAttribute("min", minimum);
          option.nextElementSibling.setAttribute("step", step1);
          
    }
    </script>

标签： javascriptphphtmlcss