"Using JavaScript to toggle a radio button and display specific form fields according to the selected

Question

"Using JavaScript to toggle a radio button and display specific form fields according to the selected

Currently, I am attempting to show specific fields based on the selected radio button, and it seems like I am close to the solution. However, despite my efforts, the functionality is not working as expected and no errors are being displayed.

I have defined all the necessary DOM elements, set up change event listeners, and called them accordingly. Additionally, I have set a default display property of none for a class that should work.

const intSelect = document.querySelector('#internal_form');
const extSelect = document.querySelector('#external_url');
const intForm = document.querySelector('.internal_form');
const extForm = document.querySelector('.external_form');

function show() {
  intSelect.addEventListener('change', showOne);
  extSelect.addEventListener('change', showOne);
}

let showOne = event => {
  event.preventDefault();
  showTheThings(event.currentTarget, intForm, extForm);
}

let showTheThings = (target, div) => {
  if (target.checked = true) {
    div.classList.remove('hide');
  } else {
    div.classList.add('hide');
    div.querySelectorAll('input[type="radio"]').forEach(function(el) {
      el.checked = false;
    });
  }
};

.external_form.hide,
.internal_form.hide{
display: none;
}

<form>
  <div class="form-group radio-format">
    <label>Method</label>
    <div class="col-sm-10">
      <input class="trigger form-check-input" type="radio" value="Internal Form" name="event[registration]" id="internal_form">
      <label class="form-check-label" for="internal_form">Internal Form</label>
      <input class="trigger form-check-input" type="radio" value="External URL" name="event[registration]" id="external_url">
      <label class="form-check-label" for="external_url">Internal Form</label>
    </div>
  </div>
  <div class="internal_form hide">
    <h2>Internal</h2>
  </div>
  <div class="external_form hide">
   <h2>External</h2>
  </div>
</form>

Despite my best efforts, nothing seems to be happening as intended. While testing in my browser, I noticed that changes are successfully applied when selecting the intSelect but not when clicking on extSelect (which raises some concern).

I also experimented with a more generic approach using JS:

function show(){
 if (intSelect.checked =true) {
  intForm.classList.remove('hide');
 } else {
  intForm.classList.add('hide');
 };
}

This function partially works by removing the 'hide' class, but it fails to trigger the add operation as desired.

I seem to be missing something crucial here. Any insights or assistance would be greatly appreciated.

javascript

Answer 1

Answer №1

This code snippet demonstrates how to toggle between two forms by utilizing IDs and adding/removing classes.

<!DOCTYPE html>
<head>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
    <style type="text/css">
        .external_form.hide,
.internal_form.hide{
display: none;
}
    </style>
</head>
<body >
<form>
  <div class="form-group radio-format">
    <label>Method</label>
    <div class="col-sm-10">
      <input class="trigger form-check-input" type="radio" value="Internal Form" name="event[registration]" id="internal_url">
      <label class="form-check-label" for="internal_url">Internal Form</label>
      <input class="trigger form-check-input" type="radio" value="External URL" name="event[registration]" id="external_url">
      <label class="form-check-label" for="external_url">external Form</label>
    </div>
  </div>
  <div id="internal" class="internal_form hide">
    <h2>Internal</h2>
  </div>
  <div id="external" class="external_form hide">
   <h2>External</h2>
  </div>
</form>
</body>
</html>
<script>
    var internal = document.getElementById("internal");
    var external = document.getElementById("external");

document.getElementById("internal_url").addEventListener("click", function(){
    internal.classList.remove("hide");
    external.classList.add("hide");
    console.log("internal" , internal);
});

document.getElementById("external_url").addEventListener("click", function(){
    internal.classList.add("hide");
    external.classList.remove("hide");
});


</script>

By analyzing the code above, you can easily grasp its functionality. Don't hesitate to reach out if you have any questions or need further clarification.

Answer 2

This code snippet demonstrates how to toggle between two forms by utilizing IDs and adding/removing classes.

<!DOCTYPE html>
<head>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
    <style type="text/css">
        .external_form.hide,
.internal_form.hide{
display: none;
}
    </style>
</head>
<body >
<form>
  <div class="form-group radio-format">
    <label>Method</label>
    <div class="col-sm-10">
      <input class="trigger form-check-input" type="radio" value="Internal Form" name="event[registration]" id="internal_url">
      <label class="form-check-label" for="internal_url">Internal Form</label>
      <input class="trigger form-check-input" type="radio" value="External URL" name="event[registration]" id="external_url">
      <label class="form-check-label" for="external_url">external Form</label>
    </div>
  </div>
  <div id="internal" class="internal_form hide">
    <h2>Internal</h2>
  </div>
  <div id="external" class="external_form hide">
   <h2>External</h2>
  </div>
</form>
</body>
</html>
<script>
    var internal = document.getElementById("internal");
    var external = document.getElementById("external");

document.getElementById("internal_url").addEventListener("click", function(){
    internal.classList.remove("hide");
    external.classList.add("hide");
    console.log("internal" , internal);
});

document.getElementById("external_url").addEventListener("click", function(){
    internal.classList.add("hide");
    external.classList.remove("hide");
});


</script>

By analyzing the code above, you can easily grasp its functionality. Don't hesitate to reach out if you have any questions or need further clarification.

Answer 3

Answer №2

After testing your code locally, I made a few adjustments.

The first change I implemented was converting the show function into a self-calling function. This ensures that the event listener is attached to the radio buttons as soon as the page loads.

(function show() {
    intSelect.addEventListener("click", showOne);
    extSelect.addEventListener("click", showOne);
})();

Additionally, it's important to ensure that the script is loaded after the HTML DOM content by placing the script tag at the end of the body tag in the HTML document.

<body>
    <form>
        <div class="form-group radio-format">
            <label>Method</label>
            <div class="col-sm-10">
                <input class="trigger form-check-input" type="radio" value="Internal Form" name="event[registration]" id="internal_form">
                <label class="form-check-label" for="internal_form">Internal Form</label>
                <input class="trigger form-check-input" type="radio" value="External URL" name="event[registration]" id="external_url">
                <label class="form-check-label" for="external_url">External Form</label>
            </div>
        </div>
        <div class="internal_form hide">
            <h2>Internal</h2>
        </div>
        <div class="external_form hide">
            <h2>External</h2>
        </div>
    </form>
    <script src="index.js"></script>

</body>

With these changes, the updated js code looks like this:

const intSelect = document.querySelector("#internal_form");
const extSelect = document.querySelector("#external_url");
const intForm = document.querySelector(".internal_form");
const extForm = document.querySelector(".external_form");

(function show() {
    intSelect.addEventListener("click", showOne);
    extSelect.addEventListener("click", showOne);
})();

function showOne(event) {
    event.preventDefault();
    showTheThings(event.currentTarget, intForm, extForm);
}

function showTheThings(target, div) {
    if ((target.checked = true)) {
        div.classList.remove("hide");
    } else {
        div.classList.add("hide");
        div.querySelectorAll('input[type="radio"]').forEach(function(el) {
            el.checked = false;
        });
    }
}

I hope these modifications are helpful.

Answer 4

After testing your code locally, I made a few adjustments.

The first change I implemented was converting the show function into a self-calling function. This ensures that the event listener is attached to the radio buttons as soon as the page loads.

(function show() {
    intSelect.addEventListener("click", showOne);
    extSelect.addEventListener("click", showOne);
})();

Additionally, it's important to ensure that the script is loaded after the HTML DOM content by placing the script tag at the end of the body tag in the HTML document.

<body>
    <form>
        <div class="form-group radio-format">
            <label>Method</label>
            <div class="col-sm-10">
                <input class="trigger form-check-input" type="radio" value="Internal Form" name="event[registration]" id="internal_form">
                <label class="form-check-label" for="internal_form">Internal Form</label>
                <input class="trigger form-check-input" type="radio" value="External URL" name="event[registration]" id="external_url">
                <label class="form-check-label" for="external_url">External Form</label>
            </div>
        </div>
        <div class="internal_form hide">
            <h2>Internal</h2>
        </div>
        <div class="external_form hide">
            <h2>External</h2>
        </div>
    </form>
    <script src="index.js"></script>

</body>

With these changes, the updated js code looks like this:

const intSelect = document.querySelector("#internal_form");
const extSelect = document.querySelector("#external_url");
const intForm = document.querySelector(".internal_form");
const extForm = document.querySelector(".external_form");

(function show() {
    intSelect.addEventListener("click", showOne);
    extSelect.addEventListener("click", showOne);
})();

function showOne(event) {
    event.preventDefault();
    showTheThings(event.currentTarget, intForm, extForm);
}

function showTheThings(target, div) {
    if ((target.checked = true)) {
        div.classList.remove("hide");
    } else {
        div.classList.add("hide");
        div.querySelectorAll('input[type="radio"]').forEach(function(el) {
            el.checked = false;
        });
    }
}

I hope these modifications are helpful.

"Using JavaScript to toggle a radio button and display specific form fields according to the selected

Answer №1

Answer №2

Similar questions

How to programmatically close a Bootstrap modal in a React-Redux application using jQuery

A guide on retrieving values from programmatically created input elements in Java

Struggling to incorporate a logic in ajax using Cakephp2

The implementation of Ajax beforeSend and complete functions is not possible at the moment

File reading and processing must be completed before attempting to write to a new file. This is a promise-related stipulation

Issue with Dynamic Image Path in Require Function: Unable to locate the relative module

Error message: While running in JEST, the airtable code encountered a TypeError stating that it cannot read the 'bind' property of an

Vue: The function "priceFilter" is not defined in this context

Is there a way for me to create a route similar to Instagram's setup, such as localhost:3000

The values obtained from the previous parameter object of the React setState hook can vary and are not always

Struggling with adding headers in React application

What is the best way to extract a JSON string from the login PHP response?

What's the best way to incorporate mouseenter() and mouseleave() into several elements sharing the same class?

Tips for effectively handling unique properties of a React component (such as Redux integration and custom CSS) when sharing through NPM distribution

Updating the default color of selected text within a webpage's content

Expand or collapse Angular Material Accordion depending on selected Radio button choice

Filtering input based on its occurrence rate (enable/disable debounce)

What is the best way to retrieve the overall error status from the Material UI DataGrid?

Using Typescript to create a Checkbox Grid that displays pipe-delimited values and implements a custom validation rule

Struggling to find the right strategy for obtaining real-time data while implementing customized filters