Showing Div from Radio Button (with submit button)

user_12556915 0
Viewed 62

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>

css html jquery javascript
2 Answers

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>

user_135734440

You cannot have mutliple elements with same id i.e : 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>

user_106064000
Related