javascript - How to change a form using radio buttons?

Using radio button I want to change my form. For example if 'A' radio button is selected, it should show me a form where I can enter my name and age. If 'B' is selected, it should show me another form, where I can see a picture, but the text field for the name and age are no longer visible.

Share Improve this question edited Jan 8, 2021 at 19:05 customcommander 18.9k5 gold badges67 silver badges93 bronze badges asked Aug 6, 2011 at 16:16 Sara 5957 gold badges12 silver badges22 bronze badges

Add a comment |

5 Answers 5

Sorted by: Reset to default 15

You can use the onchange attribute of an input to call a javascript function, which hides A & shows B or vice versa

 function hideA(x) {
   if (x.checked) {
     document.getElementById("A").style.visibility = "hidden";
     document.getElementById("B").style.visibility = "visible";
   }
 }

 function hideB(x) {
   if (x.checked) {
     document.getElementById("B").style.visibility = "hidden";
     document.getElementById("A").style.visibility = "visible";
   }
 }

Show :
<input type="radio" onchange="hideB(this)" name="aorb" checked>A |
<input type="radio" onchange="hideA(this)" name="aorb">B
<div id="A">
  <br/>A's text</div>
<div id="B" style="visibility:hidden">
  <br/>B's text</div>

I liked the Answer from Vinayak Garg

Though a more portable solution was desired that could be used for many options using a basic structure minimal javascript is needed to swap options

The example function used in the next 2 snippets is:

function swapConfig(x) {
  var radioName = document.getElementsByName(x.name);
  for (i = 0; i < radioName.length; i++) {
    document.getElementById(radioName[i].id.concat("Settings")).style.display = "none";
  }
  document.getElementById(x.id.concat("Settings")).style.display = "initial";
}

function swapConfig(x) {
    var radioName = document.getElementsByName(x.name);
    for(i = 0 ; i < radioName.length; i++){
      document.getElementById(radioName[i].id.concat("Settings")).style.display="none";
    }
    document.getElementById(x.id.concat("Settings")).style.display="initial";
  }

<fieldset>
  <legend>Url and Domain Configuration</legend>
  <p>
    <label for="production">Production</label>
    <input type="radio" onchange="swapConfig(this)" name="urlOptions" id="production" checked="checked" />
    <label for="development">Development</label>
    <input type="radio" onchange="swapConfig(this)" name="urlOptions" id="development" />
  </p>
  <div id="productionSettings">
    <br/>Production Settings
    <p>
      <label for="p1">Production1</label>
      <input type="text" name="p1" value="/">
    </p>
  </div>
  <div id="developmentSettings" style="display:none">
    <br/>Development Settings
    <p>
      <label for="d1">Developent1</label>
      <input type="text" name="d1" value="/">
    </p>
  </div>
</fieldset>

Doing it this way you can add new options without changing the javascript such as adding alpha and beta options as shown below you will see the same javascript is used.

function swapConfig(x) {
  var radioName = document.getElementsByName(x.name);
  for (i = 0; i < radioName.length; i++) {
    document.getElementById(radioName[i].id.concat("Settings")).style.display = "none";
  }
  document.getElementById(x.id.concat("Settings")).style.display = "initial";
}

<fieldset>
  <legend>Url and Domain Configuration</legend>
  <p>
    <label for="production">Production</label>
    <input type="radio" onchange="swapConfig(this)" name="urlOptions" id="production" checked="checked" />
    <label for="development">Development</label>
    <input type="radio" onchange="swapConfig(this)" name="urlOptions" id="development" />
    <label for="alpha">Alpha</label>
    <input type="radio" onchange="swapConfig(this)" name="urlOptions" id="alpha" />
    <label for="beta">Beta</label>
    <input type="radio" onchange="swapConfig(this)" name="urlOptions" id="beta" />
  </p>
  <div id="productionSettings">
    <br/>Production Settings
    <p>
      <label for="p1">Production</label>
      <input type="text" name="p1" value="/">
      </p>
  </div>
  <div id="developmentSettings" style="display:none">
    <br/>Development Settings
    <p>
      <label for="d1">Developent</label>
      <input type="text" name="d1" value="/">
    </p>
  </div>
  <div id="alphaSettings" style="display:none">
    <br/>Alpha Settings
    <p>
      <label for="a1">Alpha</label>
      <input type="text" name="a1" value="/">
    </p>
  </div>
  <div id="betaSettings" style="display:none">
    <br/>Beta Settings
    <p>
      <label for="b1">Beta</label>
      <input type="text" name="b1" value="/">
      </p>
  </div>
</fieldset>

It could be even more reusable by adding a second variable to the function:

function swapConfig(x, y) {
  var radioName = document.getElementsByName(x.name);
  for (i = 0; i < radioName.length; i++) {
    document.getElementById(radioName[i].id.concat(y)).style.display = "none";
  }
  document.getElementById(x.id.concat(y)).style.display = "initial";
}

function swapConfig(x, y) {
      var radioName = document.getElementsByName(x.name);
      for (i = 0; i < radioName.length; i++) {
        document.getElementById(radioName[i].id.concat(y)).style.display = "none";
      }
      document.getElementById(x.id.concat(y)).style.display = "initial";
    }

<fieldset>
  <legend>Url and Domain Configuration</legend>
  <p>
    <label for="production">Production</label>
    <input type="radio" onchange="swapConfig(this, 'Settings')" name="urlOptions" id="production" checked="checked" />
    <label for="development">Development</label>
    <input type="radio" onchange="swapConfig(this,'Settings')" name="urlOptions" id="development" />
    <label for="alpha">Alpha</label>
    <input type="radio" onchange="swapConfig(this,'Settings')" name="urlOptions" id="alpha" />
    <label for="beta">Beta</label>
    <input type="radio" onchange="swapConfig(this,'Settings')" name="urlOptions" id="beta" />
  </p>
  <p>
    <label for="alphaVar">Alpha</label>
    <input type="radio" onchange="swapConfig(this,'Val')" name="urlVars" id="alphaVar" checked="checked"  />
    <label for="betaVar">Beta</label>
    <input type="radio" onchange="swapConfig(this,'Val')" name="urlVars" id="betaVar" />
  </p>
  <div id="productionSettings">
    <br/>Production Settings
    <p>
      <label for="p1">Production</label>
      <input type="text" name="p1" value="/">
      </p>
  </div>
  <div id="developmentSettings" style="display:none">
    <br/>Development Settings
    <p>
      <label for="d1">Developent</label>
      <input type="text" name="d1" value="/">
    </p>
  </div>
  <div id="alphaSettings" style="display:none">
    <br/>Alpha Settings
    <p>
      <label for="a1">Alpha</label>
      <input type="text" name="a1" value="/">
    </p>
  </div>
  <div id="betaSettings" style="display:none">
    <br/>Beta Settings
    <p>
      <label for="d1">Beta</label>
      <input type="text" name="b1" value="/">
      </p>
  </div>
  <div id="alphaVarVal">
    <br/>Alpha Values
    <p>
      <label for="aV1">Alpha Vals</label>
      <input type="text" name="aV1" value="/">
      </p>
  </div>
  <div id="betaVarVal" style="display:none">
    <br/>Beta Values
    <p>
      <label for="bV1">Beta Vals</label>
      <input type="text" name="bV1" value="/">
      </p>
  </div>
</fieldset>

Javascript for loops are well described in this Answer of the question For-each over an array in JavaScript?

This can be done like this.

    <html>
    <head>
          <script language="Javascript">
               function show(x)
                              {
                                var element=document.getElementById(x.id);
                                if(element.id=='a')
                                {
                                  document.getElementById("area").innerHTML="Name : <input type='text' id='name' >";
                                }
                                else 
                                {
                                  document.getElementById("area").innerHTML="<img src='imgSrc' alt='NoImage'>"
                                }
                              }
           </script>
   </head>
   <body> 
        <input type="radio" onclick="show(this)" name="radioButton"  id="a" >A  
        <input type="radio" onclick="show(this)" name="radioButton"  id="b" >B
        <br> <br> <br>
    <div id="area">  </div>
   </body>
   </html>

    <!DOCTYPE html>
    <html>
    <body>

    <div class="row clearfix">

      <input type="radio" name="salary_status" id="Hourly"  onclick="Hourly()"> &nbsp; Hourly &nbsp;

   <input type="radio" name="salary_status" id="Percentage"  onclick="Percentage()">&nbsp; Percentage&nbsp;

                            </div>
                                <div class="row clearfix">
                                <p id="hourly" style="display:none"> <input type="text" placeholder=" Hourly" name="Hourly" placeholder="Hourly" required="required" class="form-control col-md-9 col-xs-12" ></p>
                                <p id="percentage" style="display:none"> <input type="number"  name="Percentage"  placeholder="Percentage" required="required" class="form-control col-md-9 col-xs-12" ></p>


                            </div>

    <script>
     var text1 = document.getElementById("percentage");
     var text = document.getElementById("hourly");
    function Hourly() {
        var checkBox = document.getElementById("Hourly");

        if (checkBox.checked == true){
            text.style.display = "block";
            text1.style.display = "none";
        } else{
           text.style.display = "none";
        }
    }
    function Percentage() {
        var checkBox = document.getElementById("Percentage");

        if (checkBox.checked == true){
            text1.style.display = "block";
            text.style.display = "none";
        } else {
           text.style.display = "none";
        }
    }
    </script>

    </body>
    </html>

I modified the above in a more easy way. Try editing it according to your needs:

<html>
<head>
<script language="Javascript">
function hideA()
{

    document.getElementById("A").style.visibility="hidden";
    document.getElementById("B").style.visibility="visible";    

}

function hideB()
{
    document.getElementById("B").style.visibility="hidden";
    document.getElementById("A").style.visibility="visible";

}
</script>
</head>
<body>Show : 
<input type="radio"  name="aorb" onClick="hideB()" checked>A | 
<input type="radio"  name="aorb" onClick="hideA()">B
<div style="position: absolute; left: 10px; top: 100px;" id="A"><br/>A's text</div>
<div style="position: absolute; left: 10px; top: 100px; visibility:hidden" id="B"><br/>B's text</div>
</body>
</html>

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

javascript - How to change a form using radio buttons? - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)