如何在选中Choice2/Choice3单选按钮时提交表单附加关联值？

当然可以实现提交这些附加值，问题出在你的表单元素缺少关键配置，按下面的操作调整即可：

核心修改点 #

• 给下拉选择框添加name属性：浏览器只会提交带有name属性的表单元素值，你的下拉框之前没有这个属性，所以提交时不会被包含。
• 修正日期输入框的type属性：你写的text1、text2不是合法的输入类型，改成type="date"（原生日期选择控件）或者type="text"都可以，确保浏览器能正确识别并提交值。
• （可选）用JS控制元素禁用状态：避免提交无关的字段，比如选中Choice1时禁用下拉和日期框，选中Choice2时禁用日期框，这样提交的数据更干净。

修改后的完整表单代码 #

<form>
  <fieldset>
    <legend>Select Report Range:</legend>
    <div>
      <input type="radio" id="Choice1" name="contactRange" value="lastReport" checked/>
      <label for="Choice1">Last report</label><br>

      <input type="radio" id="Choice2" name="contactRange" value="numOfDays"/>
      <label>Reports for the last </label>
        <select name="dayCount" disabled>
          <option value="1"> 1 day</option>
          <option value="2"> 2 days</option>
          <option value="3"> 3 days</option>
          <option value="4"> 4 days</option>
          <option value="5"> 5 days</option>
        </select>
      <br>

      <input type="radio" id="Choice3" name="contactRange" value="dateRange">
      <label for="Choice3">Date Range</label>
        <input type="date" name="startDate" placeholder="Start Date (oldest)" disabled>
        <input type="date" name="endDate"   placeholder="End Date (most recent)" disabled>
    </div>

    <div>
      <br><button type="submit">Submit</button><br>
    </div>
  </fieldset>
  <script>
    // 控制表单元素禁用状态的JS代码
    const radios = document.querySelectorAll('input[name="contactRange"]');
    const daySelect = document.querySelector('select[name="dayCount"]');
    const dateInputs = document.querySelectorAll('input[name="startDate"], input[name="endDate"]');

    radios.forEach(radio => {
      radio.addEventListener('change', () => {
        if (radio.value === 'lastReport') {
          daySelect.disabled = true;
          dateInputs.forEach(input => input.disabled = true);
        } else if (radio.value === 'numOfDays') {
          daySelect.disabled = false;
          dateInputs.forEach(input => input.disabled = true);
        } else if (radio.value === 'dateRange') {
          daySelect.disabled = true;
          dateInputs.forEach(input => input.disabled = false);
        }
      });
    });
  </script>
</form>

为什么之前的尝试无效 #

• 你给选项加了value但没加name：没有name属性的表单元素，浏览器不会将其值包含在提交的数据里，所以加value也没用。
• 嵌套表单是HTML语法不允许的：HTML规范里禁止表单嵌套，所以这种做法本身就无效，还会导致页面结构混乱。

内容的提问来源于stack exchange，提问作者user21364853