使用FormData.append通过AJAX传递单选按钮选中值失败求助

问题原因 #

你当前处理单选按钮的代码完全错误：

• 硬编码将三个单选按钮的值都append到一个类似jQuery选择器的键名里，既没有判断用户实际选中的选项，这个键名也不是后端能识别的合法字段名
• 重复append同一个键名时，FormData会保留所有值，但后端如果只取第一个的话，就只会拿到Male，这就是你遇到的问题

修复方案 #

只需要获取用户实际选中的单选按钮值，再正确append到FormData中：

1. 使用document.querySelector('input[name="gender"]:checked')获取选中的单选元素
2. 检查该元素是否存在（避免用户未选择就提交），存在则将其值append到FormData，键名用gender（和单选按钮的name属性一致，方便后端接收）

修改后的完整脚本 #

function _(id){ return document.getElementById(id); }
function submitForm(){
  _("mybtn").disabled = true;
  _("status").innerHTML = 'please wait ...';
  var formdata = new FormData();
  formdata.append( "n", _("n").value );
  formdata.append( "e", _("e").value );

  // 处理单选按钮的核心代码
  const selectedGender = document.querySelector('input[name="gender"]:checked');
  if (selectedGender) {
    formdata.append("gender", selectedGender.value);
  } else {
    // 可选：如果用户没选性别，提示错误
    _("status").innerHTML = "Please select your gender";
    _("mybtn").disabled = false;
    return; // 终止提交
  }

  var ajax = new XMLHttpRequest();
  ajax.open( "POST", "register_script.php" );
  ajax.onreadystatechange = function() {
    if(ajax.readyState == 4 && ajax.status == 200) {
      if(ajax.responseText == "success"){
        _("my_form").innerHTML = '<p style="margin:1em;background:#E33A29;color:#fff;padding:1em;border-radius:10px;">Thanks '+_("n").value+', you have successfully registered !.</p>';
      } else {
        _("status").innerHTML = ajax.responseText;
        _("mybtn").disabled = false;
      }
    }
  }
  ajax.send( formdata );
}

额外优化（可选） #

如果希望强制用户选择性别，可以给单选按钮组添加required属性，比如修改第一个单选按钮：

<input id="Male" value="Male" type="radio" name="gender" required/>

这样浏览器会自动拦截未选择的提交，不需要额外JS判断。

内容的提问来源于stack exchange，提问作者d-comet