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>
<!-- 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.
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>