HTML表單兩個選項之一需要完全填寫-有解無憂

所以我一直停留在我的 HTML 表單的這一部分。需要選擇下拉選單“A”或填寫“B”的所有選項。其中任何一個都是必需的，但我找不到解決方案。

為了更清楚需要填寫的內容，也可能使代碼更容易，我制作了第二個版本。

單擊選項“A”時，僅顯示所需部分，反之亦然。但是我又一次找不到解決它的方法；如果選擇“B”為例，下面的所有選項都需要填寫，如果是，則表單提交。

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

我希望我想說的是可以理解的。一個非常接近我想要實作的解決方案是以下鏈接，但我太初學者了，無法理解它，或者將其轉換為我自己的形式，所以也許這可能會有所幫助：

HTML5 必需的兩個欄位之一的屬性

uj5u.com熱心網友回復：

您可以通過在 HTML 中添加required屬性來強制輸入/選擇/文本區域表單元素。

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

您還可以在 javascript 中操作所需的 input/select/textarea 表單元素。

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/510123.html

標籤：javascripthtml形式必填项目

上一篇：在php中使用isset函式我想顯示一條確認訊息，但它沒有正確顯示

下一篇：為什么PHP不能從這個HTML表單獲取表單輸入？