JavaScript Radio Toggle根据已选中显示不同的表单字段

Question

So I'm trying to display certain fields based on the radio that's selected and I feel like I'm close but it's not working and I'm not getting errors.

So I defined all the DOM elements, set change event listeners, and I'm calling them down. I also set a default of display: none on a class that works.

 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> 

However nothing is happening. Though when I test in my browser it will apply the change on the intSelect but will not remove when clicking on extSelect (weird how it's not working here).

I've also tried very generic JS with something like:

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

This again works just on removing the class but not triggering the add.

What am I missing here?

Answer 1

So trying out your code locally, I made a couple of changes.

First was to make show function as a self-calling function so that the event listener will be attached on the radio buttons as soon as the page is loaded.

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

Also, you should make sure that the script is loaded when the html/DOM is loaded by adding the script tag at the end of the body tag of the HTML.

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>

So, now your js 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 this helps.

Answer 2

Here is the simple code using the ID , And by add and removing class

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

Code is simple and by looking it , you will get understand . If you have any doubt , feel free to ask anytime .