Changing the property of HTML input field not taking place using java script

Question

I have a form that has two fields stationery type and stationery request qty. The stationery rqst qty field of the form accepts the number. The minimum number which can be entered in this field(QTY) depends upon the value of the stationery type field i.e. If the stationery type field value is 'pencil' then the minimum value property of the stationery request qty field should be 5 and if it is 'notepad' then the minimum property of the stationery request qty field should be 10. I am doing it by the given code but it's not working.it gives always the qnty for the first stationerytype the jsfiddle is js fiddle

function random() {
                    document.querySelector('[name="stationerytype[]"]').value = ""
  
                    var a = document.getElementById('purpose').value;
                    if (a === "Meeting") {
                    var datalist = "datalist1";
                    } else if (a === "Departmental") {
                    var datalist = "datalist2";
                    }
    
                    document.querySelector('[name="stationerytype[]"]').setAttribute("list", datalist)

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

<div class="col-sm-6">
                    <label for="purpose">Purpose</label>
                    <select type="text" name="purpose" id="purpose" class="form-control" onchange="random()" required />
                    <option ></option>
                    <option value="Meeting">Meeting</option>
                    <option value="Departmental">Departmental</option>
                    </select>
                    </div>
                  
        <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>

score 3 · Answer 1 · answered Aug 20 '21 at 03:45

You are trying to get the nextSibling element of option in the JS function, but the nextSibling element picked is body element. If you are using td element, then you need to properly use the table element for JS to work properly.

Here is the updated HTML and JS to achieve your requirement.

<div class="col-sm-6">
  <label for="purpose">Purpose</label>
  <select type="text" name="purpose" id="purpose" class="form-control" onchange="random()" required />
    <option ></option>
    <option value="Meeting">Meeting</option>
    <option value="Departmental">Departmental</option>
  </select>
</div>
                    
<table>
  <tbody>
    <tr>             
      <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>
    </tr>
  </tbody>
</table>

And here is the update JS

function random() {
                    document.querySelector('[name="stationerytype[]"]').value = ""
  
                    var a = document.getElementById('purpose').value;
                    if (a === "Meeting") {
                    var datalist = "datalist1";
                    } else if (a === "Departmental") {
                    var datalist = "datalist2";
                    }
    
                    document.querySelector('[name="stationerytype[]"]').setAttribute("list", datalist)

                    }
          
          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.parentNode.nextElementSibling.firstChild.setAttribute("min", minimum);
              option.parentNode.nextElementSibling.firstChild.setAttribute("step", step1);
              
        }

Its working fine but in my form stationeryqtytype and stationeryqtyrqst are the array type field. Suppose there are four stationeryqtytype and stationeryqtyrqst then the minimum and step value for the first pair will remain same for the rest three whereas the the value in other stationeryqtytype is different . How can i overcome this — kil, Aug 20 '21 at 03:51
@kil You need to provide the sample of current output and the required output to make it more understandable what is the issue? — ajay ramgarhia, Aug 20 '21 at 03:59
@kil updated fiddle [https://jsfiddle.net/qosjuL58/](https://jsfiddle.net/qosjuL58/) — ajay ramgarhia, Aug 20 '21 at 05:53
I have updated the [https://jsfiddle.net/j134mygt/1/](https://jsfiddle.net/j134mygt/1/). I have added the alert in the `.option1` event handler. It is only called once and not called for the dynamic elements. That is why you could not get the requirement. Check the following [stack overflow] (https://stackoverflow.com/questions/34896106/attach-event-to-dynamic-elements-in-javascript) if that solves your problem. — ajay ramgarhia, Aug 20 '21 at 06:16
your updated fiddle is not working . I could not find ou from the given link . — kil, Aug 21 '21 at 02:50

score 0 · Answer 2 · answered Aug 20 '21 at 03:14

You're using option.nextElementSibling to call element with id stationeryqtyrqst, but it is pointing to your datalist with id datalist1. You should use document.getElementById instead, like this:

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
        var stationeryqtyrqst = document.getElementById("stationeryqtyrqst");
        stationeryqtyrqst.setAttribute("min", minimum);
        stationeryqtyrqst.setAttribute("step", step1);

    }

Its working fine but in my form stationeryqtytype and stationeryqtyrqst are the array type field. Suppose there are four stationeryqtytype and stationeryqtyrqst then the minimum and step value for the first pair will remain same for the rest three whereas the the value in other stationeryqtytype is different . How can i overcome this — kil, Aug 20 '21 at 03:32

Changing the property of HTML input field not taking place using java script

2 Answers2