Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How do I enable an input after selecting an option?

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 :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading