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 ; also i think this question is similar to this — MDT
– MDT, Commented Feb 24, 2020 at 10:04
Does this answer your question? jQuery: hide and show an input element — mmoomocow
– mmoomocow, Commented Feb 24, 2020 at 10:45

Ivan · Accepted Answer · 2020-02-24 09:52:04Z

0

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>

edited Feb 24, 2020 at 9:52

answered Feb 24, 2020 at 9:35

Ivan

4331 gold badge7 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

waqas Over a year ago

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

Ivan Over a year ago

@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 ?

waqas Over a year ago

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 " <td style="width: 50%" id = "closest" style="display: none;">", I used two times style in the same line

Ivan Over a year ago

@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 Over a year ago

@waqas you can mark only 1 answer as solved your problem ;) i think you mark the wrong answer

|

MDT · Accepted Answer · 2020-02-24 10:01:48Z

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>

Collectives™ on Stack Overflow

Hide and show fields in html using jquery

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related