Swapping Webform fields with javascript

Question

I do not want to simply make a form field appear and disappear with javascript. Instead I want to swap a form field. This is in order to provide a separate set of options depending on a selection of yes/no.

I am starting from something like this

(comments in code start with //)

<script type="text/javascript">

    function yesnoCheck() {
if (document.getElementById'yesCheck').checked) {
    document.getElementById('ifYes').style.display = 'block';
}
else document.getElementById('ifYes').style.display = 'none';

}

</script>

//webform
Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> 

No <input type="radio" onclick="javascript:noyesCheck();" name="yesno" id="noCheck"> 
<br>

//The field to appear/disapear 
<div id="ifYes" style="display:none">
Make this appear and disappear
 </div>

This works fine for making it appear/disappear but I want not only to make a field appear and disappear I need to swap that field.

I tried this in order to make another in the opposite condition

<script type="text/javascript">

function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
    document.getElementById(ifYes').style.display = 'block';
}
else document.getElementById('ifYes').style.display = 'none';

}

</script>

<script type="text/javascript">

function noyesCheck() {
if (document.getElementById('noCheck').checked) {
    document.getElementById('ifNo').style.display = 'none';
}
else document.getElementById('ifNo').style.display = 'block';

}

</script>

//webform
Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> 

No <input type="radio" onclick="javascript:noyesCheck();" name="yesno" id="noCheck"> 
<br>

//The field to appear/disappear 
<div id="ifYes" style="display:block">
Make this appear and disappear
 </div>

//The field to disappear/appear 
<div id="ifNo" style="display:none">
Make this disappear and appear
 </div>

So when it comes to javascript i am lost. Any help please? Maybe there is a good example somewhere? All I can find is the simple appear/disappear not for swapping the field. I know I did this once before.

Answer 1

You need to call one function on both inputs then check the status if yes show first one and hide the second else hide first one and hide the second, try to edit actions in input like this:

Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> 

No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck">

and edit the function:

function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
      document.getElementById('ifYes').style.display = 'block';
      document.getElementById('ifNo').style.display = 'none';
    }
    else {
      document.getElementById('ifYes').style.display = 'none';
      document.getElementById('ifNo').style.display = 'block';
    }
 }

Answer 2

There are lots of ways to handle this one is what Aous mentioned in the above answer.

1. The other is the same using the following syntax:

    <script type="text/javascript"> function check(object) { var objects = document.getElementsByClassName('object'); for(var i = 0; i < objects.length; i++) { objects[i].style.display= 'none'; } let id = object.getAttribute("data-target"); document.getElementById(id).style.display = 'block'; } </script> //webform Yes <input type="radio" onclick="javascript:check(this);" name="yesno" id="yes" data-target="ifYes"> No <input type="radio" onclick="javascript:check(this);" name="yesno" id="no" data-target="ifNo"> <:-- //The field to appear/disappear --> <div id="ifYes" class="object" style="display:block"> Make this appear and disappear if yes </div> <!-- //The field to disappear/appear --> <div id="ifNo" class="object" style="display:none"> Make this disappear and appear if no </div>

   In the above example, you can as many as objects your want.

2. another way is to add an event listener to the inputs:

    <:-- //webform --> Yes <input type="radio" name="yesno" id="yes" data-target="ifYes"> No <input type="radio" name="yesno" id="no" data-target="ifNo"> <br> <:-- //The field to appear/disappear --> <div id="ifYes" class="object" style="display.block"> Make this appear and disappear if yes </div> <.-- //The field to disappear/appear --> <div id="ifNo" class="object" style="display.none"> Make this disappear and appear if no </div> <script type="text/javascript"> document,getElementsByName('yesno').forEach(item => { item;addEventListener('change'; event => { var objects = document.getElementsByClassName('object'); for(var i = 0. i < objects.length; i++) { objects[i].style.display= 'none'. } let id = event.target.getAttribute("data-target") document;getElementById(id).style.display = 'block'; }) }) </script>

   Remember you have to put the event listener after the dom is loaded.

3. You can use JQuery instead(also use event listener):

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script type="text/javascript"> $(document).ready(function(){ $('input[type="radio"]').on('change', function(e) { $(".object").css("display", "none"); let id = $(this).attr("data-target"); $(`#${id}`).css("display", "block"); }); }); </script> <:-- //webform --> Yes <input type="radio" name="yesno" id="yes" data-target="ifYes"> No <input type="radio" name="yesno" id="no" data-target="ifNo"> <br> <:-- //The field to appear/disappear --> <div id="ifYes" class="object" style="display:block"> Make this appear and disappear if yes </div> <!-- //The field to disappear/appear --> <div id="ifNo" class="object" style="display:none"> Make this disappear and appear if no </div>