JavaScript form with radio buttons

Question

JavaScript form with radio buttons

I'm completely new to JavaScript and I'm attempting to create a basic script that will show one form when a radio button is checked, and another form when the second radio button is clicked (with no form displayed when neither is selected). I know my JavaScript code is likely incorrect as I have very little experience with JavaScript. I tried to use some logic and did some Googling to come up with this code, but I can't pinpoint where I made a mistake.

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>

javascript html css

Answer 1

Answer №1

Although the code may not be incorrect, it currently only runs once - when the page initially loads. Ideally, you would want the forms to toggle visibility each time the inputs are altered.

To achieve this functionality, the code for toggling visibility is enclosed within a function. This function is then set as an event handler on the <input> elements so that it triggers whenever changes are made to these elements. As the selected radio button changes, either through clicking or keyboard navigation, an 'input' event will be fired on the elements, subsequently managed by the function.

Additionally, some modifications have been made:

Utilization of only ids as this functionality applies specifically to a few designated elements.
Inclusion of <form> elements for improved semantics. It is recommended for all forms to be enveloped within a <form> element at any level.

Replacement of .java with

.js</code - despite their similar names, JavaScript and Java are distinct languages.</li>
<li>Adjustment of the <code>name

attribute on the <input> elements to better represent their purpose.

<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

// Obtain references to crucial 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 take place on the
// two radio button elements.
elInput1.addEventListener('input', updateFormVisibility);
elInput2.addEventListener('input', updateFormVisibility);

Answer 2

Although the code may not be incorrect, it currently only runs once - when the page initially loads. Ideally, you would want the forms to toggle visibility each time the inputs are altered.

To achieve this functionality, the code for toggling visibility is enclosed within a function. This function is then set as an event handler on the <input> elements so that it triggers whenever changes are made to these elements. As the selected radio button changes, either through clicking or keyboard navigation, an 'input' event will be fired on the elements, subsequently managed by the function.

Additionally, some modifications have been made:

Utilization of only ids as this functionality applies specifically to a few designated elements.
Inclusion of <form> elements for improved semantics. It is recommended for all forms to be enveloped within a <form> element at any level.

Replacement of .java with

.js</code - despite their similar names, JavaScript and Java are distinct languages.</li>
<li>Adjustment of the <code>name

attribute on the <input> elements to better represent their purpose.

<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

// Obtain references to crucial 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 take place on the
// two radio button elements.
elInput1.addEventListener('input', updateFormVisibility);
elInput2.addEventListener('input', updateFormVisibility);

Answer 3

Answer №2

As mentioned in a response by @Mehdi Brillaud at this link: , you have the option to experiment with JQuery using the following code:

<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 4

As mentioned in a response by @Mehdi Brillaud at this link: , you have the option to experiment with JQuery using the following code:

<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 5

Answer №3

Is this what you desire?

For more recent web browsers (not the best choice):

<input type="radio" name="role" id="btn1" onchange = "setForm('formA')">
<input type="radio" name="role" id="btn2" onchange = "setForm('formB')">
<div class="formA" id ="formA" style="display:none">Form A
</div>
<div class="formB" id ="formB" style="display:none">Form B
</div>
<script src="/scripts/forms.js"></script>

Update:

Highly recommended approach:

<input type="radio" name="role" id="btn1" onchange = "displayForm('formA')">
<input type="radio" name="role" id="btn2" onchange = "displayForm('formB')">
<div class="formA" id ="formA" style="display:none">Form A
</div>
<div class="formB" id ="formB" style="display:none">Form B
</div>
<script src="/scripts/forms.js"></script>

<script>
var current = document.getElementById("formA");

function displayForm(selected_form) {
    current.style.display = "none";
    current = document.getElementById(selected_form);
    current.style.display = "block";
}
</script>

Answer 6

Is this what you desire?

For more recent web browsers (not the best choice):

<input type="radio" name="role" id="btn1" onchange = "setForm('formA')">
<input type="radio" name="role" id="btn2" onchange = "setForm('formB')">
<div class="formA" id ="formA" style="display:none">Form A
</div>
<div class="formB" id ="formB" style="display:none">Form B
</div>
<script src="/scripts/forms.js"></script>

Update:

Highly recommended approach:

<input type="radio" name="role" id="btn1" onchange = "displayForm('formA')">
<input type="radio" name="role" id="btn2" onchange = "displayForm('formB')">
<div class="formA" id ="formA" style="display:none">Form A
</div>
<div class="formB" id ="formB" style="display:none">Form B
</div>
<script src="/scripts/forms.js"></script>

<script>
var current = document.getElementById("formA");

function displayForm(selected_form) {
    current.style.display = "none";
    current = document.getElementById(selected_form);
    current.style.display = "block";
}
</script>

JavaScript form with radio buttons

Answer №1

Answer №2

Answer №3

Similar questions

Incorporate duration into date using angular

How can you check the varying font renderings on your phone?

Reveal the CSRF token to the client located on a separate domain

Tips on how to patiently wait until the database connection is established and all queries are successfully executed for every database specified in an array

Ensuring User Data is Current in the UI with Firebase Auth Callbacks

Reorganize containers without relying on bootstrap styling

Using a custom TypeScript wrapper for Next.js GetServerSideProps

Extract the chosen document from an input within the Electron application form

Decode array in JavaScript

In order to determine if components linked from anchor elements are visible on the screen in Next.js, a thorough examination of the components

Error message: "Maximum width header anomaly"

Impeccable method to safeguard element from external css interference

Implementing Jquery tabs into the code causes the vertical auto-scroll to smoothly glide beyond anchor points

Is it possible to implement sticky sessions with Node.js and pm2?

Uniform widths of table cells when resizing and overflowing

Retrieve PHP variable from a PHP CSS file

JavaScript Navigation Bar Error: The value of 'undefined' is not recognized as an object

Uncaught TypeError: Cannot create new instances of User - Node.js server not recognizing User as a constructor

Listening for a click event on a newly added element using JQuery

"Integrating Associated Models with Sequelize: A Step-by-Step Guide