Tengo un formulario que tiene dos campos "optar" y "Cantidad". El campo de cantidad del formulario acepta el número. El número mínimo que se puede ingresar en este campo (CANTIDAD) depende del valor del campo Opción, es decir, si el valor de los campos de opción es rojo, entonces la propiedad de valor mínimo del campo Cantidad debe ser 5 y si es 'Rojo', la propiedad mínima del campo Cantidad debe ser 10. Lo estoy haciendo con el código dado pero no funciona.
<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><!-- 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>Veamos... En primer lugar, cambiemos su caso if else con un interruptor:
switch(a){ case "red": var minimum = 5; break; case "green": var minimum = 10; break; }Ahora eliminaré la etiqueta php y agregaré una línea para cambiar el valor mínimo de la entrada.
<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>¡Ahora veamos este código en acción! Ejecute el siguiente fragmento.
<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> ¡Y hecho! Además, cambié onkeydown a onchange .
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>