I am currently working on a form with two fields: stationery type and stationery request quantity. The stationery request quantity field only accepts numerical input. The minimum quantity that can be entered in this field depends on the value selected in the stationery type field. For example, if "pencil" is chosen as the stationery type, then the minimum quantity allowed should be 5. If "notepad" is selected, then the minimum quantity should be 10. I have implemented some code to handle this logic, but it seems to be malfunctioning as it always defaults to the quantity specified for the first stationery type option.
To view the implementation and the issue, you can check out the jsfiddle here.
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() {
calculatingMinimumQuantity(option);
});
option.nextElementSibling.addEventListener('change', evt => {
if (+evt.target.value < +evt.target.min) evt.target.value = evt.target.min
});
});
function calculatingMinimumQuantity(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>