How do I enable an input after selecting an option? I want to enable the input of "campoOne" after selecting an option of "campoZero".
<div id="one">
<table>
<tr>
<td class="honeydew">Produt</td>
<td class="honeydew"><select type="text" name="campoZero" class="honeydew" id="campoZero">
<option disabled selected>Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<var id="valorZero"></var>
</select>
</td>
</tr>
<tr>
<td class="gray">Boxes</td>
<td class="gray"><input disabled onchange="somaTudo()" type="text" name="campoOne" class="gray" id="campoOne" maxlength="3" value="">
<var id="valorOne"></var>
</select>
</td>
</tr>
>Solution :
To enable the input field "campoOne" after selecting an option in "campoZero," you can add an event listener to the "campoZero" select element. The event listener will listen for the change event, and when it is triggered, it will enable the "campoOne" input element.
<div id="one">
<table>
<tr>
<td class="honeydew">Produt</td>
<td class="honeydew">
<select type="text" name="campoZero" class="honeydew" id="campoZero">
<option disabled selected>Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<var id="valorZero"></var>
</select>
</td>
</tr>
<tr>
<td class="gray">Boxes</td>
<td class="gray">
<input disabled onchange="somaTudo()" type="text" name="campoOne"
class="gray" id="campoOne" maxlength="3" value="">
<var id="valorOne"></var>
</td>
</tr>
</table>
</div>
<script>
// Get the select and input elements
const campoZero = document.getElementById("campoZero");
const campoOne = document.getElementById("campoOne");
// Add a change event listener to the select element
campoZero.addEventListener("change", function() {
// Check if the selected option is not the default one
if (campoZero.value !== "") {
// Enable the input element
campoOne.disabled = false;
}
});
we first get the “campoZero” select and “campoOne” input elements using the getElementById() method. We then add a change event listener to the “campoZero” select element using the addEventListener() method.
Inside the event listener function, we check if the selected option is not the default one (i.e., an option with an empty value). If the selected option is not the default one, we enable the "campoOne" input element by setting its disabled property to false.
Note that you may need to adjust the event listener function to fit your specific requirements, such as setting a default value for the "campoOne" input element or handling input validation.