javascript radio button form

Question

I'm new to javascript and am trying to write a simple script that will open 1 form upon checking a radio button, and another form upon clicking on the second one (none when none is selected). I'm positive the js code is totally wrong as I am a COMPLETE beginner with js, but I used logic and a bit of google to get to this, and I don't know where I went wrong.

 var ele1 = document.getElementsByClassName("form1"); var ele2 = document.getElementsByClassName("form2"); if (document.getElementById('button1').checked) { ele1.style.display = "block"; } if (document.getElementById('button2').checked) { ele2.style.display = "block"; }

 .form1 { display: none; background-color: red; width: 100px; height: 100px; }.form2 { display: none; background-color: blue; width: 100px; height: 100px; }

 <input type="radio" name="role" id="button1"> <input type="radio" name="role" id="button2"> <div class="form1"> </div> <div class="form2"> </div> <script src="/scripts/form.java"></script>

Answer 1

This code isn't wrong as such, but it only ever executes once; when the page loads. You instead want the forms to be toggled whenever the inputs are changed.

To do this, the visibility code is wrapped in a function. This function is then registered as an event handler on the <input> elements so that it executes whenever the <input> s change. Whenever the selected radio button changes, by clicking or by keyboard navigation, an 'input' event will be triggered on the elements, and then handled by the function.

I've also made a few other changes:

• Use only id s since this is specific functionality for a handful of specific elements.
• Use <form> elements for better semantics. All forms must be wrapped in a <form> element at some level.
• Change .java to .js – JavaScript and Java are (unintuitively) unrelated.
• Change the name on the <input> s to better describe their role.

<input type="radio" name="formID" id="input1">
<input type="radio" name="formID" id="input2">

<form id="form1">
  <!-- fields -->
</form>

<form id="form2">
  <!-- fields -->
</form>

<script src="/scripts/form.js"></script>

// form.js

// Get references to important elements.
var elInput1 = document.getElementById('input1');
var elInput2 = document.getElementById('input2');
var elForm1 = document.getElementById('form1');
var elForm2 = document.getElementById('form2');

// Define an event handler function.
function updateFormVisibility(event) {
  var elSelectedInput = event.target;

  if (elSelectedInput.id === 'input1') {
    elForm1.style.display = 'block';
    elForm2.style.display = '';
  } else {
    elForm1.style.display = '';
    elForm2.style.display = 'block';
  }
}

// Register the function as a handler for any `'input'` events that occur on the
// two radio button elements.
elInput1.addEventListener('input', updateFormVisibility);
elInput2.addEventListener('input', updateFormVisibility);

Answer 2

According to @Mehdi Brillaud's answer here: https://stackoverflow.com/a/42488571/13695248 , you could try this with JQuery:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label><input type="radio" class="form-switch" name="colorCheckbox" value="red" data-id="a" checked> red</label> <label><input type="radio" class="form-switch" name="colorCheckbox" value="green" data-id="b"> green</label> <label><input type="radio" class="form-switch" name="colorCheckbox" value="blue" data-id="c"> blue</label> <div class="form form-a active"> form a </div> <div class="form form-b"> form b </div> <div class="form form-c"> form c</div>

 .form { display: none; }.form.active { display: block }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.form-switch').on('change', function() { $('.form').removeClass('active'); var formToShow = '.form-' + $(this).data('id'); $(formToShow).addClass('active'); }); }); </script>

Answer 3

Is this what you want?

For modern browsers:- (Not recommend)

<input type="radio" name="role" id="button1" onchange = "form1.style.display ='block'; form2.style.display ='none'">
<input type="radio" name="role" id="button2" onchange = "form1.style.display ='none'; form2.style.display ='block'">
<div class="form1" id ="form1" style="display:none">Form 1
</div>
<div class="form2" id ="form2" style="display:none">Form 2
</div>
<script src="/scripts/form.js"></script>

Update

Recommend

<input type="radio" name="role" id="button1" onchange = "Show('form1')">
<input type="radio" name="role" id="button2" onchange = "Show('form2')">
<div class="form1" id ="form1" style="display:none">Form 1
</div>
<div class="form2" id ="form2" style="display:none">Form 2
</div>
<script src="/scripts/form.js"></script>

<script>
var selected = document.getElementById("form1");

function Show(curr_sel) {
    selected.style.display = "none";
    selected = document.getElementById(curr_sel);
    selected.style.display = "block";
}
</script>