HTML Form either of two options need to be filled completely-CodePudding

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 >
      <label for="option_A">Option A</label>
      <input type="radio" name="A_or_B" id="option_A" value="option_A" checked>
    </div>
    <div >
      <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  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  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

CodePudding user response：

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 >
      <label for="option_A">Option A</label>
      <input type="radio" name="A_or_B" id="option_A" value="option_A" checked>
    </div>
    <div >
      <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  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  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>