Question 228654 in Html Question posted in
Some basic documentation can be found here.

Html – block the next element of an accordion and only show when the inputs are filled

I have this accordion with three steps, in the first step I ask for the first and last name.

How could I make steps 2 and 3 blocked until the user fills in the fields in step 1?

<fieldset id="accordion">
        <label for="1" class="pasos">Step1</label>
        <input class="hide_check" type="radio" name="toggle" id="1" value="1" checked>
        <output>
            <div>                  
                  <input placeholder="name" class="field__input" id="name" name="" required/>                                   
                  <input placeholder="last name" class="field__input" id="last name" name="" required/>
            </div>
        </output>
        <label for="2" class="pasos">Step2</label>
        <input class="ocultar_check" type="radio" name="toggle" id="2" value="2">
        <output>
            <div>
                <input placeholder="phone" class="field__input" id="phone" name="" required/>         
            </div>
        </output>
        <label for="3" class="pasos">Step 3</label>
        <input class="ocultar_check" type="radio" name="toggle" id="3" value="3">
        <output>
            <div>
                <input placeholder="address" class="field__input" id="address" name="" required/>          
            </div>
        </output>
</fieldset>

For example, I fill in the fields in step 1 and if they are filled, I can just access step 2 and so on. If step 1 is not filled out, I can’t access the next steps. I’m new to js, ​​any help is appreciated THANKS

Tags:

2

Answers


  1. 0

    This code will first check if all the fields in step 1 are filled in. If they are, it will enable step 2 by removing the ocultar_check class from the element and adding the active class to its next sibling element. This will make step 2 visible and accessible to the user.

        var accordion = document.getElementById("accordion");
    var inputs = document.querySelectorAll(".field__input");

    // Check if all the fields in step 1 are filled in
    function checkFields() {
      for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].value == "") {
          return false;
        }
      }
      return true;
    }

    // Enable step 2 if all the fields in step 1 are filled in
    accordion.addEventListener("click", function(event) {
      var target = event.target;
      if (target.id == "2") {
        if (checkFields()) {
          target.classList.remove("ocultar_check");
          target.nextElementSibling.classList.add("active");
          target.nextElementSibling.nextElementSibling.classList.add("active");
        }
      }
    });
    <fieldset id="accordion">
    <label for="1" class="pasos">Step1</label>
    <input class="hide_check" type="radio" name="toggle" id="1" value="1" checked>
    <output>
      <div>
        <input placeholder="name" class="field__input" id="name" name="" required />
        <input placeholder="last name" class="field__input" id="last name" name="" required />
      </div>
    </output>
    <label for="2" class="pasos">Step2</label>
    <input class="ocultar_check" type="radio" name="toggle" id="2" value="2">
    <output>
      <div>
        <input placeholder="phone" class="field__input" id="phone" name="" required />
      </div>
    </output>
    <label for="3" class="pasos">Step 3</label>
    <input class="ocultar_check" type="radio" name="toggle" id="3" value="3">
    <output>
      <div>
        <input placeholder="address" class="field__input" id="address" name="" required />
      </div>
    </output>
  </fieldset>
    Login or Signup to reply.
  2. 0

    try to use this code in js

    const step1NextBtn = document.getElementById('step1Next');
    const step2NextBtn = document.getElementById('step2Next');
    const step3NextBtn = document.getElementById('step3Next');

    const nameInput = document.getElementById('name');
    const lastNameInput = document.getElementById('last_name');
    const phoneInput = document.getElementById('phone');
    const addressInput = document.getElementById('address');

    step1NextBtn.addEventListener('click', () => {
        if (nameInput.value.trim() !== '' && lastNameInput.value.trim() !== '') {
            document.getElementById('2').checked = true;
        }
    });

    step2NextBtn.addEventListener('click', () => {
        if (phoneInput.value.trim() !== '') {
            document.getElementById('3').checked = true;
        }
    });

    step3NextBtn.addEventListener('click', () => {
        if (addressInput.value.trim() !== '') {
            // You can optionally add code here to handle form submission
        }
    });
    <fieldset id="accordion">
    <label for="1" class="pasos">Step 1</label>
    <input class="hide_check" type="radio" name="toggle" id="1" value="1" checked>
    <output>
        <div>                  
            <input placeholder="name" class="field__input" id="name" name="" required/>                                   
            <input placeholder="last name" class="field__input" id="last_name" name="" required/>
            <button id="step1Next">Next</button>
        </div>
    </output>

    <label for="2" class="pasos">Step 2</label>
    <input class="ocultar_check" type="radio" name="toggle" id="2" value="2">
    <output>
        <div>
            <input placeholder="phone" class="field__input" id="phone" name="" required/>
            <button id="step2Next">Next</button>
        </div>
    </output>

    <label for="3" class="pasos">Step 3</label>
    <input class="ocultar_check" type="radio" name="toggle" id="3" value="3">
    <output>
        <div>
            <input placeholder="address" class="field__input" id="address" name="" required/>
            <button id="step3Next">Next</button>
        </div>
    </output>
</fieldset>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search