Hide and show fields in html using jquery

Question

I want when user select yes or no then other input fields appear but in my case the one field is appear without selecting no, I want that field appear only when user select no

<script>
   $(document).ready(function() {
       toggleFields();
       $("#selection").change(function() {
           toggleFields();
       });
   });
   function toggleFields() {
       if ($("#selection").val() == 156)
           $("#Distance").show();
       else
           $("#Distance").hide();
       if ($("#selection").val() == 156)
           $("#closest").hide();
       else
           $("#closest").show();
   }
</script>
<tr>
   <td style="width: 50%">
      <label for = "section"><b> Are you using Optimap? *</b></label><br><br>
      <select id="selection" name="selection" style="width: 320px; height: 35px; border-radius: 8px" required>
         <option value="" disabled selected > Please Select... </option>
         <option value="156"> Yes</option>
         <option value="160"> No </option>
      </select>
      <br><br>
   </td>
   <td style="width: 50%" id = "closest" style="display: none;">
      <label for="closest"><b>The Distance between the center of two closest PCB's in mm *</b></label><br><br>
      <input type = "number" step="any" name = "closest" style="width: 320px; height: 25px; border-radius: 8px" required /><br><br>
   </td>
   <td style="width: 50%">
      <div  id = "Distance" style="display: none;">
      <label for="stance"><b>The Distance between the center of two closest Optimaps in mm *</b></label><br><br>
      <input type = "number" step="any" name = "Distance" style="width: 320px; height: 25px; border-radius: 8px" required /><br><br>
   </td>
</tr>

Just a tip before you post a question [refer this](https://stackoverflow.com/help/how-to-ask) ; also i think this question is similar to [this](https://stackoverflow.com/help/how-to-ask) — MDT, Feb 24 '20 at 10:04
Does this answer your question? [jQuery: hide and show an input element](https://stackoverflow.com/questions/11918397/jquery-hide-and-show-an-input-element) — mmoomocow, Feb 24 '20 at 10:45

Ivan · Accepted Answer · 2020-02-24T09:52:04.500

there is mistake in the html like this one

 <td style="width: 50%" id = "closest" style="display: none;">

you cant set two time inline style

you can try this one i think will do the trick for you

$(document).ready(function() { 
    // if always default value of selection is "Please Select..." no point to call toggleFields(); on document ready
    
    // toggleFields();
    
  $("#selection").change(function() {
    toggleFields();
  });
});
function toggleFields() {
  if($("#selection").val() == 156){
    $("#closest").hide();
    $("#Distance").show();    
  }else{
    $("#Distance").hide();
    $("#closest").show();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr> 
                    <td style="width: 50%">
                        <label for = "section"><b> Are you using Optimap? *</b></label><br><br>
                        <select id="selection" name="selection" style="width: 320px; height: 35px; border-radius: 8px" required>
                            <option value="" disabled selected > Please Select... </option>
                            <option value="156"> Yes</option>
                            <option value="160"> No </option>  
                        </select><br><br>
                    </td>   
                    <td style="width: 50%; display: none" id ="closest">
                        <label for="closest"><b>The Distance between the center of two closest PCB's in mm *</b></label><br><br>
                        <input type = "number" step="any" name = "closest" style="width: 320px; height: 25px; border-radius: 8px" required /><br><br>
                    </td>
                    <td style="width: 50%">
                        <div  id = "Distance" style="display: none;">
                        <label for="stance"><b>The Distance between the center of two closest Optimaps in mm *</b></label><br><br>
                        <input type = "number" step="any" name = "Distance" style="width: 320px; height: 25px; border-radius: 8px" required /><br><br>
                    </td>
                </tr>
</table>

Hey your this code is working here perfectly but, it's not working on my pc what could be the possible reason, I just copied the same code there — waqas, Feb 24 '20 at 09:57
@waqas what actually is not working ? are you getting any errors in console or what is not working ? did you copy the html as well ? — Ivan, Feb 24 '20 at 10:28
Many Thanks for helping me now it is working, actually there was a small error in html code, that I fixed it through your code help, and that mistake was this " ", I used two times style in the same line — waqas, Feb 24 '20 at 10:38
@waqas your welcome if my post is solved your problem you can mark it like solved and people will know your problem is solved — Ivan, Feb 24 '20 at 10:40
@waqas you can mark only 1 answer as solved your problem ;) i think you mark the wrong answer — Ivan, Feb 24 '20 at 10:53
could you please follow this link https://stackoverflow.com/q/60376735/12746301 and answer to my question or if possible send me the proper code for it, Many Thanks in advance — waqas, Feb 24 '20 at 14:12

MDT · Answer 2 · 2020-02-24T10:01:48.833

After looking at your code i think you have some how joined a <div> attributes to <td> of second row.

I have rectified your code and i think this is the behavior you expect:

<script>
   $(document).ready(function() {
       toggleFields();
       $("#selection").change(function() {
           toggleFields();
       });
   });
   function toggleFields() {
       if ($("#selection").val() == 156)
           $("#Distance").show();
       else
           $("#Distance").hide();
       if ($("#selection").val() == 156)
           $("#closest").hide();
       else
           $("#closest").show();
   }
</script>
<tr>
   <td style="width: 50%">
      <label for = "section"><b> Are you using Optimap? *</b></label><br><br>
      <select id="selection" name="selection" style="width: 320px; height: 35px; border-radius: 8px" required>
         <option value="" disabled selected > Please Select... </option>
         <option value="156"> Yes</option>
         <option value="160"> No </option>
      </select>
      <br><br>
   </td>
   <td style="width: 50%">
      <div id = "closest" style="display: none;">
         <label for="closest"><b>The Distance between the center of two closest PCB's in mm *</b></label><br><br>
         <input type = "number" step="any" name = "closest" style="width: 320px; height: 25px; border-radius: 8px" required /><br><br>
      </div>
   </td>
   <td style="width: 50%">
      <div  id = "Distance" style="display: none;">
      <label for="stance"><b>The Distance between the center of two closest Optimaps in mm *</b></label><br><br>
      <input type = "number" step="any" name = "Distance" style="width: 320px; height: 25px; border-radius: 8px" required /><br><br>
   </td>
</tr>

Hide and show fields in html using jquery

2 Answers2