获取单选按钮值时遇Uncaught TypeError错误的解决求助

错误原因 #

• 方法名拼写错误：document.getElementByName 是不存在的API，正确写法是 document.getElementsByName（复数形式）
• 单选按钮值获取逻辑错误：直接调用.innerHTML无法拿到选中项的值，需要筛选出被选中的单选按钮后再取value属性

修复后的代码 #

1. 修正单选按钮值的获取逻辑 #

把点击事件中的var promotion = ...这行替换成更合理的写法，以下两种方式任选其一：

方式一：用原生JS的querySelector（简洁版）

var promotion = document.querySelector('input[name="promotion"]:checked').value;

方式二：用原生JS的getElementsByName（兼容旧版浏览器）

var radios = document.getElementsByName("promotion");
var promotion = "";
for (var i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    promotion = radios[i].value;
    break;
  }
}

方式三：用jQuery简化（项目已引入jQuery）

var promotion = $('input[name="promotion"]:checked').val();

2. 修复函数调用的多余逗号 #

原代码中commander(nom, prenom, adresse,detail_livraison,promotion,);最后多了一个逗号，需去掉：

commander(nom, prenom, adresse, detail_livraison, promotion);

完整修复后的点击事件代码 #

$('#commander').click(function() {
  var nom = document.getElementById("nom").value;
  var prenom = document.getElementById("prenom").value;
  var adresse = document.getElementById("adresse").value;
  var detail_livraison = document.getElementById("livraison-detail").innerHTML;
  // 这里用jQuery方式示例，可替换为上面的原生写法
  var promotion = $('input[name="promotion"]:checked').val();
  commander(nom, prenom, adresse, detail_livraison, promotion);
});

额外优化建议 #

AJAX的data参数建议用对象格式，避免字符串拼接的编码问题，更易维护：

data: {
  nom: nom,
  prenom: prenom,
  adresse: adresse,
  detail_livraison: detail_livraison,
  promotion: promotion
},

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