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>

Your code is only executing once, and when it does nothing is checked. that will open 1 form what does opening a form mean? — Countour-Integral
– Countour-Integral, Commented Jan 15, 2021 at 15:02
Does this answer your question? how to open different form on different radio button — costaparas
– costaparas, Commented Jan 15, 2021 at 15:07
@Countour-Integral I'm more interested in learning from what I did wrong from this, so actually telling me what's wrong instead of linking me to an answered question would be appreciated. Opening a form is basically displaying it as block, so 2 forms are assigned to 2 buttons and when each is pressed its respective form appears under it. What does it change if it is executing once? And what do you mean by "nothing is checked"? — samervjr
– samervjr, Commented Jan 15, 2021 at 15:18
@samervjr I mean that document.getElementById('button1').checked returns false because the code executes as soon as the page loads (the user does not have time to click on it). You should be attaching an event listener (TO LISTEN FOR MOUSE CLICK) to when either of button1 or button2 is clicked and then execute your code. — Countour-Integral
– Countour-Integral, Commented Jan 15, 2021 at 15:23

Blieque · Accepted Answer · 2021-01-15 17:02:56Z

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 ids 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);

randomdude · Accepted Answer · 2021-01-15 15:12:26Z

0

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>

edited Jan 15, 2021 at 15:12

answered Jan 15, 2021 at 15:06

randomdude

2672 silver badges14 bronze badges

1 Comment

Countour-Integral Over a year ago

JQuery is not usefull for DOM manipulation, it's 2021 Element.prototype.addEventListener exists. In this case it just makes things more complicated.

Keshav Saraf · Accepted Answer · 2021-01-16 03:56:26Z

0

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>

edited Jan 16, 2021 at 3:56

answered Jan 15, 2021 at 17:17

Keshav Saraf

7491 gold badge7 silver badges18 bronze badges

3 Comments

samervjr Over a year ago

this seems promising.. Just to make sure you have not altered my script, or do I even need it in answer. And also, you're sure the onchange form display block will work in the html file?

Keshav Saraf Over a year ago

Well, I have updated my answer. The previous answer that I had given was a bit risky. So, I have provided a better method . Using the second method , you can even add more radio buttons without affecting js. Please check it out.

samervjr Over a year ago

tried it out and it works well.. Thank you loads

Collectives™ on Stack Overflow

javascript radio button form

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related