Showing Div from Radio Button (with submit button)

Question

I could use a help. I'm still new to doing jQuery, and I can get the divs to show when there is no submit button, but when I add the submit button, I can't get the divs based on the radio button.

 $(document).ready(function(){ $(".result").click(function(){ $("input[name=expectation]").change(function() { var expectedValue = $(this).val(); $(".box").hide(); $("#"+ expectedValue).show(); }); }); });

 .box { display:none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="answers"> <input type="radio" name="expectation" id="wavy" value="wavy"> <label for="wavy">for wavy hair</label> <br> <input type="radio" name="expectation" id="health" value="health"> <label for="health">for healthy hair</label> <br> <input type="radio" name="expectation" id="silky" value="silky"> <label for="silky">make hair silky</label> <br> </div> <button class="result">Submit</button> <div id="wavy" class="box">Product for Wavy Hair</div> <div id="health" class="box">Product for Healthy Hair</div> <div id="silky" class="box">Product for Silky Hair</div>

Answer 1

You can display the content of divs only after clicking on the button. Why such a concept?

I have given two solutions. In the second solution, without clicking the button. What concept do you need? How should it work?

Use the each() method, passing the index .

 $(document).ready(function(){ $(".result").click(function(){ $("input[name=expectation]").each(function(index) { $(this).change(function() { var expectedValue = $(this).val(); $(".box").hide(); $(".box").eq(index).show(); }); }); }); });

 .box { display:none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="answers"> <input type="radio" name="expectation" id="wavy" value="wavy"> <label for="wavy">for wavy hair</label> <br> <input type="radio" name="expectation" id="health" value="health"> <label for="health">for healthy hair</label> <br> <input type="radio" name="expectation" id="silky" value="silky"> <label for="silky">make hair silky</label> <br> </div> <button class="result">Submit</button> <div id="wavy" class="box">Product for Wavy Hair</div> <div id="health" class="box">Product for Healthy Hair</div> <div id="silky" class="box">Product for Silky Hair</div>

second solution:

 $(document).ready(function(){ $("input[name=expectation]").each(function(index) { $(this).change(function() { var expectedValue = $(this).val(); $(".box").hide(); $(".box").eq(index).show(); }); }); });

 .box { display:none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="answers"> <input type="radio" name="expectation" id="wavy" value="wavy"> <label for="wavy">for wavy hair</label> <br> <input type="radio" name="expectation" id="health" value="health"> <label for="health">for healthy hair</label> <br> <input type="radio" name="expectation" id="silky" value="silky"> <label for="silky">make hair silky</label> <br> </div> <button class="result">Submit</button> <div id="wavy" class="box">Product for Wavy Hair</div> <div id="health" class="box">Product for Healthy Hair</div> <div id="silky" class="box">Product for Silky Hair</div>

Answer 2

You cannot have mutliple elements with same id ie: radio and div have same ids. So, instead of id you can use data-atribute .Then you can change your selector like $("div[data-id=" + expectedValue + "]") to show div.

Demo Code :

 $(document).ready(function() { $("input[name=expectation]").change(function() { var expectedValue = $(this).val(); $(".box").hide(); console.log(expectedValue) //use data-id $("div[data-id=" + expectedValue + "]").show(); }); });

 .box { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="answers"> <input type="radio" name="expectation" id="wavy" value="wavy"> <label for="wavy">for wavy hair</label> <br> <input type="radio" name="expectation" id="health" value="health"> <label for="health">for healthy hair</label> <br> <input type="radio" name="expectation" id="silky" value="silky"> <label for="silky">make hair silky</label> <br> </div> <button class="result">Submit</button> <!--use data-id--> <div data-id="wavy" class="box">Product for Wavy Hair</div> <div data-id="health" class="box">Product for Healthy Hair</div> <div data-id="silky" class="box">Product for Silky Hair</div>