Using JS variable as the property of HTML input Form

user_14413147 0
Viewed 61

I have a form which have two field "optin" and "Qty".The quantity field of the form accept the number.The minimum number which can be entered in this field(QTY) depends upon the the value of the Option field i.e. If the option fiels value is red then the minimum value propert of the Qty field should be 5 and if it is 'Red' then the minimum property of the Qty field should be 10. I am doing it by the given code but its not working.

<td><input type="text" name="option" onkeydown="random()" class="form-control"  >

<script>
            function random()
            {
                
                var a=document.getElementById('option').value;
                if(a==="red")
                {
                    var minimum = '5';
                }
                else if(a==="green")
                {
                    var minimum= '10';
                }
                    
            }
       </script>
       <input type="NUMBER" name="qty"  class="form-control" min=<?php var minimum ?>  ></td>
css html php javascript
2 Answers
<!-- This is the code you provided -->
<td><input type="text" name="option" onkeydown="random()" class="form-control"  >

<script>
            function random()
            {
                
                var a=document.getElementById('option').value;
                if(a==="red")
                {
                    var minimum = '5';
                }
                else if(a==="green")
                {
                    var minimum= '10';
                }
                    
            }
       </script>
       <input type="NUMBER" name="qty"  class="form-control" min=<?php var minimum ?>  ></td>

Let's see... First of all lets change your if else case with a switch:

switch(a){
    case "red":
        var minimum = 5;
        break;
    case "green":
        var minimum = 10;
        break;
}

Now I will remove the php tag and add a line to change the min value of the input.

<td><input type="text" id="option" onkeydown="random()" class="form-control"  />

<script>
            function random()
            {
                var a=document.getElementById('option').value;
                switch(a){
                    case "red":
                        var minimum = 5;
                        break;
                    case "green":
                        var minimum = 10;
                        break;
                }
                document.getElementById("input").setAttribute("min", minimum)//this line adds an attribute or sets it to a given value
            }
       </script>
       <input type="NUMBER" id="input"  class="form-control" /></td>

Now let's see this code in action! Run the following snippet.

<td><input type="text" id="option" onchange="random()" class="form-control"  />

<script>
            function random()
            {
                var a=document.getElementById('option').value;
                switch(a){
                    case "red":
                        var minimum = 5;
                        break;
                    case "green":
                        var minimum = 10;
                        break;
                }
                document.getElementById("input").setAttribute("min", minimum)//this line adds an attribute or sets it to a given value
            }
       </script>
       <input type="NUMBER" id="input"  class="form-control" /></td>

And done! Also, I changed the onkeydown to onchange.

user_162321160
  1. Added more rows in case there are many rows with the same fields.
  2. Secondly, I have added an event listener instead of direct function call but you can do either.
  3. Extracting into calculatingMinimunQuantity for easier readibility and calling setAttribute (min) there.

var options = document.querySelectorAll(".option");
options.forEach(function(option) {
  option.addEventListener("change", function() {
    calculatingMinimunQuantity(option);
  });
});

function calculatingMinimunQuantity(option) {
  var minimum = 0;
  var value = option.value;
  if (value === "red") {
    minimum = "5";
  } else if (value === "green") {
    minimum = "10";
  }
  //   getting the quantity input field
  option.nextElementSibling.setAttribute("min", minimum);
}
<td>
  <div>
    <input type="text" class="option form-control" placeholder="option" name="option" />
    <input type="NUMBER" class="form-control" name="qty" placeholder="quantity" />
  </div>
</td>

<td>
  <div>
    <input type="text" class="option form-control" placeholder="option" name="option" />
    <input type="NUMBER" class="form-control" name="qty" placeholder="quantity" />
  </div>
</td>

user_87051410
Related