构建 HTML 表单时选择单选按钮答案

【问题标题】：Radio button selection when building HTML form构建 HTML 表单时选择单选按钮
【发布时间】：2020-09-08 14:53:53
【问题描述】：

我有一个用于预订的简单 HTML 表单。完成后，它通过电子邮件提交字段，然后可以使用 VBA 自动上传到我的 Access 数据库中。如果表单中只有文本，则该过程可以正常工作，但我也想包括单选按钮选项。问题是它不包括关于选择了哪个按钮的指示。如果在文本框中输入了“文本”并选择了选择 2，则电子邮件的正文将是：文本选择1 选择2 选择3 我希望它是：文本选择2。

这可以吗？到目前为止，我的代码的简化版本是：

function displayRadioValue() {
  var ele = document.getElementsByName('Choice');

  for (j = 0; j < ele.length; j++) {
    if (ele[j].checked)
      document.getElementById("result").innerHTML = ele[j].value;
  }
}

function btnClick() {
  var link = "mailto:username@domain.com" +
    "&subject=" + escape("Radio button trial") +
    "&body=" + escape(buildForm());

  window.location.href = link;
}

function buildForm() {
  var str = "";
  var elem = document.getElementById('RBT').elements;
  for (var i = 1; i < elem.length; i++) {
    if (elem[i].type != "button") {
      str += elem[i].value + "\r\n";
    }
  }

  return str;
}

<body>
  <form id="RBT" name="RBT">
    <fieldset>
      <p></p>
      <legend>Complete the form and\or choose an option</legend><br>
      <div>
        <label for "text1">Text1</label><br>
        <input id="text1" name="text1"><br>
        <input type="radio" id="radio1" name="Choice" value="Choice1" checked onclick="displayRadioValue()">
        <label for="radio1">Choice1</label><br>
        <input type="radio" id="radio2" name="Choice" value="Choice2" onclick="displayRadioValue()">
        <label for="radio2">Choice2</label><br>
        <input type="radio" id="radio3" name="Choice" value="Choice3" onclick="displayRadioValue()">
        <label for="radio3">Choice3</label><br>
        <br></div>
      <div id="result" name="result" value="result"></div>
    </fieldset>
  </form>
  <BUTTON type=submit onclick="btnClick()" />
  <FONT size=5 bold>Submit choice</FONT>
  </BUTTON>

【问题讨论】：

标签： javascript html

【解决方案1】：

你需要检查元素是否被选中。
而且由于您将它添加到与文本字段相同的循环中，您还需要确保必须检查的元素实际上是一个单选按钮：

  if(elem[i].type != "radio" || elem[i].checked) {  
    str += elem[i].value + "\r\n";
  }

但是：在您的 sn-p 中，所有内容都添加到邮件的 TO 字段中，这是有意的吗？

function displayRadioValue() {
  var ele = document.getElementsByName('Choice');

  for (j = 0; j < ele.length; j++) {
    if (ele[j].checked)
      document.getElementById("result").innerHTML = ele[j].value;
  }
}

function btnClick() {
  var link = "mailto:username@domain.com" +
    "&subject=" + escape("Radio button trial") +
    "&body=" + escape(buildForm());

  window.location.href = link;
}

function buildForm() {
  var str = "";
  var elem = document.getElementById('RBT').elements;
  for (var i = 1; i < elem.length; i++) {
    if (elem[i].type != "button") {
      if(elem[i].type != "radio" || elem[i].checked) {  
        str += elem[i].value + "\r\n";
      }
    }
  }

  return str;
}

<html>

<head>
  <title>Radio button trial</title>
</head>

<body>
  <form id="RBT" name="RBT">
    <fieldset>
      <p></p>
      <legend>Complete the form and\or choose an option</legend><br>
      <div>
        <label for "text1">Text1</label><br>
        <input id="text1" name="text1"><br>
        <input type="radio" id="radio1" name="Choice" value="Choice1" checked onclick="displayRadioValue()">
        <label for="radio1">Choice1</label><br>
        <input type="radio" id="radio2" name="Choice" value="Choice2" onclick="displayRadioValue()">
        <label for="radio2">Choice2</label><br>
        <input type="radio" id="radio3" name="Choice" value="Choice3" onclick="displayRadioValue()">
        <label for="radio3">Choice3</label><br>
        <br></div>
      <div id="result" name="result" value="result"></div>
    </fieldset>
  </form>
  <BUTTON type=submit onclick="btnClick()" />
  <FONT size=5 bold>Submit choice</FONT>
  </BUTTON>
</body>

</html>

【讨论】：

感谢 iKiK。这正是我想要和打算的，而不是将所有内容都添加到电子邮件的“收件人”字段中。
但确实如此。但这可能只是我的电脑，如果它适合你，一切都很好，如果不是，那可能是另一个问题，无论如何 buildForm 函数的返回现在应该是正确的