Show text area onclick "Yes" radio button and stay hidden by default or when clicked "No" radio button

user_3350149 0
Viewed 718

I have this html code and trying to figure out how I can create text area box using java script when I select only "Yes" radio button. That text area should stay hide by default or when select "NO".

<table class="table100" width="150%" cellspacing="2" cellpadding="2">
 <tr>        
    <td class="data_yy yyy1">
       <input type="radio" name="jack" id="jack" value="Y" onclick="hideShowJacks('Y');"/><label>Yes</label> 
        <input type="radio" name="jack" id="jack" value="N" checked onclick="hideShowJacks('N');"/><label>No</label>
   </td>
   <td class="data_xx xxx1"> Are you in high school?</td>
</tr>
html jquery javascript
2 Answers

You could do it like this:

function hideShowJacks(val) {
  if (val == "Y") {
    $("#area").show();
  } else {
    $("#area").hide();
  }
}
#area {
  display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table100" width="150%" cellspacing="2" cellpadding="2">
 <tr>        
    <td class="data_yy yyy1">
       <input type="radio" name="jack" id="jack" value="Y" onclick="hideShowJacks('Y');"/><label>Yes</label> 
        <input type="radio" name="jack" id="jack" value="N" checked onclick="hideShowJacks('N');"/><label>No</label>
   </td>
   <td class="data_xx xxx1"> Are you in high school?</td>
</tr>
</table>
<textarea id="area"></textarea>

If you prefer to use Javascript instead of jQuery:

function hideShowJacks(val) {
  if (val == "Y") {
    document.getElementById("area").style.display = "block";
  } else {

    document.getElementById("area").style.display = "none";
  }
}
#area {
  display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table100" width="150%" cellspacing="2" cellpadding="2">
 <tr>        
    <td class="data_yy yyy1">
       <input type="radio" name="jack" id="jack" value="Y" onclick="hideShowJacks('Y');"/><label>Yes</label> 
        <input type="radio" name="jack" id="jack" value="N" checked onclick="hideShowJacks('N');"/><label>No</label>
   </td>
   <td class="data_xx xxx1"> Are you in high school?</td>
</tr>
</table>
<textarea id="area"></textarea>

user_39431250

You can add an text field and toggle the show hide using javascript. Here is the code.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
</head>
<body>
<table class="table100" width="150%" cellspacing="2" cellpadding="2">
 <tr>        
    <td class="data_yy yyy1">
       <input type="radio" name="jack" value="Y" onclick="hideShowJacks(event);"/><label>Yes</label> 
        <input type="radio" name="jack" value="N" checked onclick="hideShowJacks(event);"/><label>No</label>
   </td>
   <td class="data_xx xxx1"> Are you in high school?</td>
   <textarea id="test" cols="30" rows="10"></textarea>
   
  </tr>
</table>

  
  <script>
    const inputBox = document.querySelector('#test');
    inputBox.style.display = 'none';
    
    function hideShowJacks(event) {
      const selectValue = event.target.value;
      if(selectValue === 'Y') {
        inputBox.style.display = 'block';
      } else {
        inputBox.style.display = 'none';
      }
    }
  
  </script>
</body>
</html>

user_51468480
Related