HTML Form either of two options need to be filled completely

Question

So I've been stuck on this part of my HTML form. Either the dropdown "A" needs to be selected or ALL options by "B" need to be filled out. Either one of them is required, but I just can't find a solution for that.

To make it more clear what needs to be filled out and maybe make the code easier too, I made a second version.

When Option "A" is clicked, only the required part shows and vice versa. But again I just can't find a way to solve it; that if "B" as example is selected, all the options underneath need to be filled out, and if they are, the form submits.

// SHOW / HIDE A or B

//hide fill_B from the start
window.onload = function() {
  document.getElementById('fill_B').style.display = 'none';
};

const option_B = document.getElementById('option_B');

//by click on option_B = hide option_A
option_B.addEventListener('click', () => {
  const fill_B = document.getElementById('fill_B');

  if (fill_B.style.display === 'block') {
    form.style.display = 'none';
  } else {
    fill_B.style.display = 'block';
  }


  if (fill_B.style.display === 'block') {
    select_A.style.display = 'none';
  }
});

////

const option_A = document.getElementById('option_A');

//by click on option_A = hide option_B
option_A.addEventListener('click', () => {
  const select_A = document.getElementById('select_A');

  if (select_A.style.display === 'block') {
    form.style.display = 'none';
  } else {
    select_A.style.display = 'block';
  }


  if (select_A.style.display === 'block') {
    fill_B.style.display = 'none';
  }
});

.float_Left {
  float: left;
}

.float_Right {
  float: right;
}

<form action="results.html" method="GET" id="formular">

  <h1>Fill out A or B</h1>
  <div>
    <div class="float_Left">
      <label for="option_A">Option A</label>
      <input type="radio" name="A_or_B" id="option_A" value="option_A" checked>
    </div>
    <div class="float_Right">
      <label for="option_B">Option B</label>
      <input type="radio" name="A_or_B" id="option_B" value="option_B">
    </div>
  </div>

  <br>
  <br>

  <div class="float_Left" id="select_A">
    <label for="select">Select:</label>
    <select name="select" id="select">
      <option value="">select</option>
      <option value="A1">A1</option>
      <option value="A2">A2</option>
      <option value="A3">A3</option>
    </select>
  </div>

  <div class="float_Right" id="fill_B">
    <div>
      <label for="B1">B1:</label>
      <input type="number" name="B1" id="B1" value="" min="10" max="100" placeholder="mm">
    </div>
    <div>
      <label for="B2">B2:</label>
      <input type="number" name="B2" id="B2" value="" min="10" max="100" placeholder="mm">
    </div>
    <div>
      <label for="B3">B3:</label>
      <input type="number" name="B3" id="B3" value="" min="10" max="100" placeholder="mm">
    </div>
  </div>

  <br>
  <br>
  <br>
  <br>
  <br>
  <br>

  <div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </div>

</form>

I hope it was understandable what I'm trying to say. One solution which came pretty close to what I'm trying to achieve was the following link, but I'm too much of a beginner to understand it, or convert it to my own form so perhaps this might help:

HTML5 required attribute one of two fields

Alright I don't want to write the complete solution for you(too tired), but if you want a tip, you don't have to use the submit button. You can have an on-click event and write your own validation. In case the user passes, you can submit the form via JS. This allows you way more control over these types of mechanics and you have more options to react to the user. — vfioox, Sep 25 '22 at 17:09

Sutanu · Accepted Answer · 2022-09-25T19:27:50.833

You can make an input/select/textarea form elements mandatory by adding required attribute in HTML.

<select name="select" id="select" required>

You can also manipulate the required input/select/textarea form elements in javascript.

document.getElementById("select").required = false;
document.getElementById("B1").required = true;

// SHOW / HIDE A or B

//hide fill_B from the start
window.onload = function() {
  document.getElementById('fill_B').style.display = 'none';
};

const option_B = document.getElementById('option_B');

//by click on option_B = hide option_A
option_B.addEventListener('click', () => {
  const fill_B = document.getElementById('fill_B');
  document.getElementById("select").required = false;
  document.getElementById("B1").required = true;
  document.getElementById("B2").required = true;
  document.getElementById("B3").required = true;
  if (fill_B.style.display === 'block') {
    form.style.display = 'none';
  } else {
    fill_B.style.display = 'block';
  }


  if (fill_B.style.display === 'block') {
    select_A.style.display = 'none';
  }
});

////

const option_A = document.getElementById('option_A');

//by click on option_A = hide option_B
option_A.addEventListener('click', () => {
  const select_A = document.getElementById('select_A');
  document.getElementById("select").required = true;
  document.getElementById("B1").required = false;
  document.getElementById("B2").required = false;
  document.getElementById("B3").required = false;

  if (select_A.style.display === 'block') {
    form.style.display = 'none';
  } else {
    select_A.style.display = 'block';
  }


  if (select_A.style.display === 'block') {
    fill_B.style.display = 'none';
  }
});

.float_Left {
  float: left;
}

.float_Right {
  float: right;
}

<form action="results.html" method="GET" id="formular">

  <h1>Fill out A or B</h1>
  <div>
    <div class="float_Left">
      <label for="option_A">Option A</label>
      <input type="radio" name="A_or_B" id="option_A" value="option_A" checked>
    </div>
    <div class="float_Right">
      <label for="option_B">Option B</label>
      <input type="radio" name="A_or_B" id="option_B" value="option_B">
    </div>
  </div>

  <br>
  <br>

  <div class="float_Left" id="select_A">
    <label for="select">Select:</label>
    <select name="select" id="select" required>
      <option value=""  disabled selected >select</option>
      <option value="A1">A1</option>
      <option value="A2">A2</option>
      <option value="A3">A3</option>
    </select>
  </div>

  <div class="float_Right" hidden id="fill_B">
    <div>
      <label for="B1">B1:</label>
      <input type="number" name="B1" id="B1" value="" min="10" max="100" placeholder="mm" >
    </div>
    <div>
      <label for="B2">B2:</label>
      <input type="number" name="B2" id="B2" value="" min="10" max="100" placeholder="mm" >
    </div>
    <div>
      <label for="B3">B3:</label>
      <input type="number" name="B3" id="B3" value="" min="10" max="100" placeholder="mm" >
    </div>
  </div>

  <br>
  <br>
  <br>
  <br>
  <br>
  <br>

  <div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </div>

</form>

And it was that simple. Thank you so much it saved me a lot of time! :) I hope that you'll have a good day — Kuro, Sep 26 '22 at 20:08

HTML Form either of two options need to be filled completely

1 Answers1