Hide and show element onclick function-CodePudding

I am working on a project whereby i want to make certain form fields invisible by default and become visible when a user clicks on a certain button however i cannot get it to work. .

Here is my code

function myFunction(){
  var x = document.getElementById("id_73");
  var y = document.getElementById("id_80");
  var a = document.getElementById("id_70")
  if (x.style.display == "none" && y.style.display == "none"){
    x.style.display = "block";
    y.style.display = "none";
  }
  else if(y.style.display = "none" && x.style.display == "block"){
    y.style.display = "block";
    a.style.display = "block";
    x.style.display = "none";
  }
  else{
    x.style.display = "block";
    y.style.display = "none";
    a.style.display = "none";
  }
}

function myFunction1(){
    var x = document.getElementById("id_74");
    if (x.style.display === "none") {
    x.style.display = "block";
    }
    else {
    x.style.display = "none";
    }
}

<li  data-type="control_radio" id="id_68">
        <label  id="label_68" for="input_68">Designation
          <span >*</span>
        </label>

        <div id="cid_68" >
          <div  data-columncount="2" role="group" aria-labelledby="label_68" data-component="radio">
            <span >
              <span ></span>
              <input type="radio" aria-describedby="label_68"  id="input_68_0" name="q68_typeA68" value="staff" required="" onclick="myFunction()"/>
              <label id="label_input_68_0" for="input_68_0">Staff</label>
            </span>

            <span >
              <span ></span>
              <input type="radio" aria-describedby="label_68"  id="input_68_1" name="q68_typeA68" value="student" required="" onclick="myFunction()"/>
              <label id="label_input_68_1" for="input_68_1">Student</label>
            </span>
          </div>
        </div>
      </li>

      <li  data-type="control_textbox" id="id_73" style="display:none;">
        <label  id="label_73" for="input_73">Staff Id
          <span >*</span>
        </label>
        <div id="cid_73" >
          <input type="text" id="input_73" name="q73_typeA73" data-type="input-textbox"  data-defaultvalue="" size="20" value="" data-component="textbox" aria-labelledby="label_73" required=""/>
        </div>
      </li>

      <li  data-type="control_textbox" id="id_80" style="display: none;">
        <label  id="label_80" for="input_80">Matric Number
          <span >*</span>
        </label>
        <div id="cid_80" >
          <input type="text" id="input_80" name="q80_typeA80" data-type="input-textbox"  data-defaultvalue="" size="20" value="" data-component="textbox" aria-labelledby="label_80" required=""/>
        </div>
      </li>

      <li  data-type="control_radio" id="id_70" style="display: none;">
        <label  id="label_70" for="input_70">Library User?
          <span >*</span>
        </label>
        <div id="cid_70" >
          <div  data-columncount="2" role="group" aria-labelledby="label_70" data-component="radio">

            <span >
              <span ></span>
              <input type="radio" aria-describedby="label_70"  id="input_70_0" name="q70_typeA70" value="yes" required=""/>
              <label id="label_input_70_0" for="input_70_0" onclick="myFunction1()">Yes</label>
            </span>

            <span >
              <span ></span>
              <input type="radio" aria-describedby="label_70"  id="input_70_1" name="q70_typeA70" value="No" required=""/>
              <label id="label_input_70_1" for="input_70_1" onclick="myFunction1()">No</label>
            </span>
          </div>
        </div>
      </li>

      <li  data-type="control_textbox" id="id_74" style="display: none;">
        <label  id="label_74" for="input_74"> Library Card Id
          <span >*</span>
        </label>
        <div id="cid_74" >
          <input type="text" id="input_74" name="q74_typeA74" data-type="input-textbox"  data-defaultvalue="" size="20" value="" data-component="textbox" aria-labelledby="label_74" required=""/>
        </div>
      </li>

So what i want to do is that whenever a user select staff as designation, it shows the staff id input field and if you pick student as designation, it matric number input field, library user input field and if user picks yes in library user field, library card id input field shows up and if your choice is no, it doesn't show.

P.S: I am not a javascript developer, so my code might seem raunchy so please go easy on me

Thanks.

CodePudding user response：

There are some problems with the MyFunction function in particular. Firstly, you are not checking the state of the buttons. The method you are using to hide the elements is correct, and it works, but you are not using it the right way. The code should check to see which button was actually pressed. This block of code

 if (x.style.display == "none" && y.style.display == "none"){
    x.style.display = "block";
    y.style.display = "none";
  }

is extremely problematic because it assumes that you pressed staff without actually checking to see if you pressed staff. One way to fix this would be by passing the element into function. For example,

onclick = "MyFunction(this)"

You can then check to see which button was pressed by analyzing the elements attributes. You would of course have to add a parameter to your MyFunction function. Like this: function MyFunction(element). An even better way to do this would be to pass a string that represents what button was pressed. For example, onclick = "MyFunction('staff')" and function MyFunction(state). This method would be the easiest as you would know exactly what button was pressed. The code would be

if(state == "staff"){     
    x.style.display = "block";
    y.style.display = "none";
 }

CodePudding user response：

Are you searching for something like this

<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Radio Buttons</title>
<style type="text/css">
    .box{
        padding: 20px;
        display: none;
        margin-top: 20px;
        border: 1px solid #000;
    }
    .red{ background: #ff0000; }
    .green{ background: #00ff00; }
    .blue{ background: #0000ff; }
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('input[type="radio"]').click(function(){
            if($(this).attr("value")=="red"){
                $(".box").hide();
                $(".red").show();
            }
            if($(this).attr("value")=="green"){
                $(".box").hide();
                $(".green").show();
            }
            if($(this).attr("value")=="blue"){
                $(".box").hide();
                $(".blue").show();
            }
        });
    });
</script>
</head>
<body>
    <div>
        <label><input type="radio" name="colorRadio" value="red"> red</label>
        <label><input type="radio" name="colorRadio" value="green"> green</label>
        <label><input type="radio" name="colorRadio" value="blue"> blue</label>
    </div>
    <div >You have selected <strong>red radio button</strong> so i am here</div>
    <div >You have selected <strong>green radio button</strong> so i am here</div>
    <div >You have selected <strong>blue radio button</strong> so i am here</div>
</body>