CODEWITHSUNDEEP
javascripthtmlcssradio-button
dmoses
dmoses

Reputation: 91

Show and hide div based on selected radio input

I have a div that I want to show if the user makes a selection in a radio button. I am using bootstrap. Can you help me with doing that? I've tried with select inputs but I cannot with my radio buttons.

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
function on_change(el){
        if(el.options[el.selectedIndex].value == 'optradio1'){ 
            document.getElementById('text').style.display = 'block'; // Show el
        }else{
            document.getElementById('text').style.display = 'none'; // Hide el
        }
    }
</script>
</head>
<body>
<!-- <h1>Hello, world!</h1> -->
<div class="container" "row justify-content-md-center">
<h4>Please Choose a Table Below</h4>
<div class="radio">
  <label><input type="radio" name="optradio1" onchange='on_change(this)'>MDM_Sls_Rep_Dim_Na</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Sample_Table1</label>
</div>
<div class="radio disabled">
  <label><input type="radio" name="optradio">Sample_Table2</label>
</div>
</div>
<!-- <div class="radio"> -->
<!-- <select id="mySelect" onchange='on_change(this)'> // Note the onchange event handler, which passes the select object to the on_change function via the 'this' variable -->
    <!-- <option value='one'>One</option> // Note I added value='one' -->
    <!-- <option value='two'>Two</option> // Note I added value='two' -->
<!-- </select> -->
<!-- </div> -->
<div id="text" style="display:none;"> // Note display:none instead of display:hidden
    The text would show if the user chooses option "Two"
</div>



</body>
</html>

Upvotes: 0

Views: 2985

Answers (3)

dmoses
dmoses

Reputation: 91

This version works on IE and Chrome. Simply just updated the el.name in the script to el.value.

<!DOCTYPE html> 
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
<div class="container">
   <div class="row">
    <div class="col-4 col-sm-3">
  <h2>Please Choose a Table Below</h2>
  <form>
    <div class="radio">
      <label><input type="radio" name="optradio1" onchange="on_change(this)" value="MDM">MDM_Sls_Rep_Dim_Na</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="optradio1" onchange="on_change(this)">Sample_Table1</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="optradio1" onchange="on_change(this)">Sample_Table2</label>
    </div>
  </form>
        </div>
        <div class="col-4 col-sm-3">
<div id="text" style="display:none;color:red">
<br><br><br>
// Note MDM_Sls_Rep_Dim_Na
 Rules: <br>
    1. Rep code must be five digits <br>
    2. Date format must be 'mm-dd-yyyy' <br>
    3. Rep Code exists in bi.t_sls_rep_dim_na


        </div>
    </div>
</div>

<!--<div class="container">
   <div class="row">
    <div class="col-4 col-sm-3">
     <h4>Please Choose a Table Below</h4>
<form>
<div class="radio">
  <label><input type="radio" name="optradio1" onchange="on_change(this)">MDM_Sls_Rep_Dim_Na</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio2">Sample_Table1</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio3">Sample_Table2</label>
</div>
 </form>   
</div>
    <div class="col-4 col-sm-3">
<div id="text" style="display:none;color:red">
<br><br><br>
// Note MDM_Sls_Rep_Dim_Na
 Rules: <br>
    1. Rep code must be five digits <br>
    2. Date format must be 'mm-dd-yyyy' <br>
    3. Rep Code exists in bi.t_sls_rep_dim_na


        </div>
    </div>
  </div>
</div>-->

    <script type="text/javascript">
        function on_change(el){
        if(el.value == 'MDM'){ 
            document.getElementById('text').style.display = 'block'; // Show el
        }else{
            document.getElementById('text').style.display = 'none'; 
                    // Hide el
        }






    }
    </script> 
</body>
</html>

Upvotes: 1

לבני מלכה
לבני מלכה

Reputation: 16251

You have to get the name attribute from selected

function on_change(el){
        if(el.name == 'optradio1'){ 
            document.getElementById('text').style.display = 'block'; // Show el
        }else{
            document.getElementById('text').style.display = 'none'; // Hide el
        }
    }
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>




<div class="container" "row justify-content-md-center">
<h4>Please Choose a Table Below</h4>
<div class="radio">
  <label><input type="radio" name="optradio1" onchange="on_change(this)">MDM_Sls_Rep_Dim_Na</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio" onchange="on_change(this)">Sample_Table1</label>
</div>
<div class="radio disabled">
  <label><input type="radio" name="optradio" onchange="on_change(this)">Sample_Table2</label>
</div>
</div>
<div id="text" style="display:none;color:red"> // Note display:none instead of display:hidden
    The text would show if the user chooses option "Two"
</div>

Upvotes: 3

Victoria Ruiz
Victoria Ruiz

Reputation: 5013

There are a few things to keep in mind when you're doing this. First of all, you're not using the inputs properly.

The name of all 3 inputs should be the same if they're a group, and then you change the value. Like this:

<input type="radio" name="optradio" oninput='on_change(event)' value="sample1">

Also, note that instead of passing this as a parameter, I'm passing the event. this will provide the DOM element, the event will provide more info, and that will include the value you selected.

Finally, you need to modify the function to work with this:

function on_change(el){
      var selectedOption = el.target.value;
      if (selectedOption === 'MDM') {
        document.getElementById('text').style.display = 'block';
      } else {
        document.getElementById('text').style.display = 'none'; // Hide el
      }

    }

The snippet below shows how this works all together. 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
function on_change(el){
      var selectedOption = el.target.value;
      if (selectedOption === 'MDM') {
        document.getElementById('text').style.display = 'block';
      } else {
        document.getElementById('text').style.display = 'none'; // Hide el
      }
      
    }
</script>
</head>
<body>
<!-- <h1>Hello, world!</h1> -->
<div class="container" "row justify-content-md-center">
<h4>Please Choose a Table Below</h4>
<div class="radio">
  <label><input type="radio" name="optradio" oninput='on_change(event)' value="MDM">MDM_Sls_Rep_Dim_Na</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio" oninput='on_change(event)' value="sample1">Sample_Table1</label>
</div>
<div class="radio disabled">
  <label><input type="radio" name="optradio" oninput='on_change(event)'  value="sample2">Sample_Table2</label>
</div>
</div>
<!-- <div class="radio"> -->
<!-- <select id="mySelect" onchange='on_change(this)'> // Note the onchange event handler, which passes the select object to the on_change function via the 'this' variable -->
    <!-- <option value='one'>One</option> // Note I added value='one' -->
    <!-- <option value='two'>Two</option> // Note I added value='two' -->
<!-- </select> -->
<!-- </div> -->
<div id="text" style="display:none;"> // Note display:none instead of display:hidden
    The text would show if the user chooses option "Two"
</div>



</body>
</html>

Upvotes: 0

Related Questions