javascript - Change content of div based on radio button selection

I've been trying for a long time to make a button appear on a webpage and make the link that button goes to change depending on the radio button selected. However, so far nothing appears on my web page except for the radio buttons. This is my code so far:

<div id="quick-book">
    <script>
        if (document.getElementById("radio-restaurant").checked){
            document.getElementById("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
        } else if (document.getElementById("radio-hotel").checked){
            document.getElementById("button").innerHTML = "<a href='./hotel.html'>Submit</a>"
        }
    </script>
    <form name="frmRadio" id="radio-buttons" action="">
        <input type="radio" id="radio-restaurant" name="option" onclick="document.getElementById('radio-buttons').action='';">Restaurant<br>
        <input type="radio" id="radio-hotel" name="option" onclick="document.getElementById('radio-buttons').action='';">Hotel<br>
    </form>
    <div name ="button">
    </div>
</div>

<div id="quick-book">
    <script>
        if (document.getElementById("radio-restaurant").checked){
            document.getElementById("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
        } else if (document.getElementById("radio-hotel").checked){
            document.getElementById("button").innerHTML = "<a href='./hotel.html'>Submit</a>"
        }
    </script>
    <form name="frmRadio" id="radio-buttons" action="">
        <input type="radio" id="radio-restaurant" name="option" onclick="document.getElementById('radio-buttons').action='';">Restaurant<br>
        <input type="radio" id="radio-hotel" name="option" onclick="document.getElementById('radio-buttons').action='';">Hotel<br>
    </form>
    <div name ="button">
    </div>
</div>

I hope someone here can help guide me in the right direction!

Share Improve this question edited Mar 10, 2018 at 12:40 K.Dᴀᴠɪs 10.1k12 gold badges36 silver badges46 bronze badges asked Mar 1, 2018 at 23:24 Nick Wright 1251 gold badge2 silver badges10 bronze badges

1 Please don't make more work for people by vandalizing your posts. By posting on the Stack Exchange (SE) network, you've granted a non-revocable right, under the CC BY-SA 3.0 license, for SE to distribute that content (i.e. regardless of your future choices). By SE policy, the non-vandalized version of the post is the one which is distributed. Thus, any vandalism will be reverted. – K.Dᴀᴠɪs Commented Mar 10, 2018 at 12:41

Add a ment |

5 Answers 5

Sorted by: Reset to default 2

You should add a function in you code and add it when click in the radio.

Something like this:

<script>
    function myFunction() {
        if (document.getElementById("radio-restaurant").checked){
            document.getElementById("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
        } else if (document.getElementById("radio-hotel").checked){
            document.getElementById("button").innerHTML = "<a href='./hotel.html'>Submit</a>"
        }
    }
    </script>
    
<div id="quick-book">
    <form onchange="myFunction()" name="frmRadio" id="radio-buttons" action="">
        <input type="radio" id="radio-restaurant" name="option" onclick="document.getElementById('radio-buttons').action='';">Restaurant<br>
        <input type="radio" id="radio-hotel" name="option" onclick="document.getElementById('radio-buttons').action='';">Hotel<br>
    </form>
    <div id="button">
    </div>
</div>

And change name="button" to id="button"

First, your <script> is executed only once, not on every radio button change. And since initially nothing is checked, script does nothing. Moreover, when this script is executed, elements below are not rendered yet. You need to:

1) Move the script down, below all your divs.

2) Create a change callback to check radio buttons values

<div id="quick-book">
    <form name="frmRadio" id="radio-buttons" action="">
        <input type="radio" id="radio-restaurant" name="option" onclick="change(this)">Restaurant<br>
        <input type="radio" id="radio-hotel" name="option" onclick="change(this)">Hotel<br>
    </form>
    <div id ="button">
    </div>
</div>
<script>
    function change(radio) { 
        if (radio.checked && radio.id === "radio-restaurant") {
            document.getElementById("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
        } else {
            document.getElementById("button").innerHTML = "<a href='./hotel.html'>Submit</a>"
        }
    }
</script>

     <div id="quick-book">
        <script>
        function checkRadio(radio) {
           if (radio.id === "radio-restaurant"){
                document.getElementById("button-div").innerHTML = "<a href='./restaurant.html'>Submit</a>";
           } else {
                document.getElementById("button-div").innerHTML = "<a href='./hotel.html'>Submit</a>";
           }
          }
        </script>
        <form name="frmRadio" id="radio-buttons" action="">
            <input type="radio" id="radio-restaurant" name="option" onchange="checkRadio(this)">Restaurant<br>
            <input type="radio" id="radio-hotel" name="option" onchange="checkRadio(this)">Hotel<br>
        </form>
        <div id="button-div">
        </div>
    </div>

Try this:

<div id="quick-book">
  <script>
    function $(e) {
      //Just something I have found useful
      return document.getElementById(e);
    }
    function rb_onchange(s) {
      //First clean up
      $("button").innerHTML = '';
      //The id is added because both radio buttons
      //will fire this event when one changes
      //So to prevent both both conditions firing you have to add this additional condition
      if (s.checked && s.id == "radio-restaurant") {
        //If the radio button is checked and the id of
        //said radio button is the restaurant one then add the innerHTML
        $("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
      }
      else if (s.checked && s.id == "radio-hotel") {
        //If the radio button is checked and the id of
        //said radio button is the hotel one then add the innerHTML
        $("button").innerHTML = "<a href='./hotel.html'>Submit</a>";
      }
    }
  </script>
  <form name="frmRadio" id="radio-buttons" action="">
    <input type="radio" id="radio-restaurant" name="option" onchange="rb_onchange(this);">Restaurant<br>
    <input type="radio" id="radio-hotel" name="option" onchange="rb_onchange(this);">Hotel<br>
  </form>
  <div name ="button"></div>
</div>

EDIT: Seems I failed to notice the id attribute of the button div.,....

Change:

<div name ="button"></div>

<div name="button" id="button"></div>

EDIT:

Adding some ments

$(document).ready(function () 
 { 
  $("#watch-me").click(function()
  {
    $("#show-me:hidden").show('slow');
   $("#show-me-two").hide();
   $("#show-me-three").hide();
   });
   $("#watch-me").click(function()
  {
    if($('watch-me').prop('checked')===false)
   {
    $('#show-me').hide();
   }
  });
  
  
  
  
  
  
  $("#see-me").click(function()
  {
    $("#show-me-two:hidden").show('slow');
   $("#show-me").hide();
   $("#show-me-three").hide();
   });
   $("#see-me").click(function()
  {
    if($('see-me-two').prop('checked')===false)
   {
    $('#show-me-two').hide();
   }
  });
  
  
  
  
  
  
  
  $("#look-me").click(function()
  {
    $("#show-me-three:hidden").show('slow');
   $("#show-me").hide();
   $("#show-me-two").hide();
   });
   $("#look-me").click(function()
  {
    if($('see-me-three').prop('checked')===false)
   {
    $('#show-me-three').hide();
   }
  });
  
 });

<link href="//maxcdn.bootstrapcdn./bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn./bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery./jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="row">
 <div class="col-sm-12" align="center">

        <form id='form-id'>
            <input id='watch-me' name='test' type='radio' checked /> Radio 1
            <input id='see-me' name='test' type='radio' /> Radio 2
            <input id='look-me' name='test' type='radio' /> Radio 3
        </form>
        <br><br>
        <div id='show-me'>
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
                <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
                <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
            </ul>
            
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">Home Tab Content</div>
                <div role="tabpanel" class="tab-pane" id="profile">Profile Tab Content</div>
                <div role="tabpanel" class="tab-pane" id="messages">Messages tab Content</div>
                <div role="tabpanel" class="tab-pane" id="settings">Setting tab Content</div>
            </div>
        </div>
        
        <div id='show-me-two' style='display:none; border:2px solid #ccc'>Editing snippet "On Click Change on Radio Button" <br> Editing snippet "On Click Change on Radio Button"</div>
        <div id='show-me-three' style='display:none; border:2px solid #ccc'>Hello I'm Div 3</div>
          
 </div>
</div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Change content of div based on radio button selection - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)