加载 AJAX 的 div 中的 HTML 表单单选值答案

【问题标题】：HTML form radio value in an AJAX-loaded div加载 AJAX 的 div 中的 HTML 表单单选值
【发布时间】：2011-04-04 00:51:12
【问题描述】：

我无法将 AJAX 加载到 div 的表单中的单选值获取。这是我正在使用的 JavaScript 代码：（在get函数中电台名称为'categorie_add'）：

function getCheckedValue(radioObj) {
if(!radioObj)
    return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
    if(radioObj.checked)
        return radioObj.value;
    else
        return "";
for(var i = 0; i < radioLength; i++) {
    if(radioObj[i].checked) {
        return radioObj[i].value;
    }
}
return "";

}

function get(obj) {
    var poststr ="cat_title=" + escape(encodeURI(document.getElementById("cat_title").value )) +
                 "&cat_description=" + escape(encodeURI( document.getElementById("cat_description").value ))+
                 "&cat_id=" + escape(encodeURI( getCheckedValue(document.categorie_add.cat_id) ));
    makePOSTRequest('categorie.php', poststr);
}

我在 PHP 文件中有这个：

            echo '<li><input type="radio" name="cat_id" id="cat_id" value="' . $value['cat_id'] . '" /> ' . htmlentities($value['cat_title']) . '<br />';

【问题讨论】：

你能发布你的“makePOSTRequest”吗？
没有足够的上下文来说明您的问题是什么，但其中存在一些潜在的陷阱。看起来您可能正在使用id="cat_id" 在页面上创建多个元素；这是无效的，会混淆getElementById。您应该在插入 URL 段的值上使用 encodeURIComponent()，而不是用于整个 URL 的 encodeURI()，绝对不是完全伪造的 escape()，它永远不应该用于任何事情。首选 htmlspecialchars() 而不是 htmlentities()，这会弄乱非 ISO-8859-1 编码的字符。
请注意，如果您使用someElement.getElementsByName() 来获取name="cat_id" 输入，而不是老式的form.elementname，您将始终得到一个列表，因此您可以避免检查getCheckedValue() 中令人讨厌的单元素特例。
这些 cmets 解决了我的问题。非常感谢

标签： javascript html ajax radio-button

【解决方案1】：

我想问题在于您在 DOM 中捕获无线电对象的方式 ....

请写出调用函数getCheckedValue的代码。

用Jquery方式试试...

$('#cat_id:checked').val();

Jquery 是摇滚。

JavaScript 函数：

function getCheckedValue(radioObj) {
  for ( var i in radioObj )if (radioObj[i].checked) return radioObj[i].value;
  return false;
}

【讨论】：

【解决方案2】：

我会说问题在于您生成单选按钮的方式：

echo '<li><input type="radio" name="cat_id_' . $value['cat_id'] 
   . '" id="cat_id_' . $value['cat_id'] 
   . '" value="' . $value['cat_id'] . '" /> ' 
   . htmlentities($value['cat_title']) . '<br />';

尝试让 jQuery 让您的生活变得简单。你可以这样得到你的价值观：

$('#cat_ul input[type=radio]:checked').val();

（假设您的

标签包含在

标签中）

【讨论】：

【解决方案3】：

除了marvinlabs所说的，尝试使用chrome开发工具看看ajax返回的代码发生了什么。您将看到确切的 ajax responseText 以及发送到服务器的 Headers 内容。这还包括字段及其值。

【讨论】：

【解决方案4】：

您可能需要阅读本教程：

http://www.w3schools.com/jsref/prop_radio_checked.asp
http://www.w3schools.com/html/html_forms.asp
http://www.w3schools.com/htmldom/dom_methods.asp

【讨论】：

【解决方案5】：

假设您不想继续使用 jQuery，请将您的代码更改为以下内容：

function getCheckedValue(radioObjArr) {
  if(!radioObjArr)
    return "";
  for (var ii = 0; ii < radioObjArr.length; i++) {
    if (radioObjArr[ii].checked) {
      return radioObjArr[ii].value;
    }
  }
  return "";
}

和

function get(obj) {
  var poststr ="cat_title=" + escape(encodeURI(document.getElementById("cat_title").value )) +
             "&cat_description=" + escape(encodeURI( document.getElementById("cat_description").value ))+
             "&cat_id=" + escape(encodeURI( getCheckedValue(document.getElementsByName("cat_id")) ));
  makePOSTRequest('categorie.php', poststr);
}

不过，您当前的代码尚不清楚。您在单选按钮上使用 ID（“cat_id”），但您的 getCheckedValue 函数也支持获取对象数组。但是，ID 必须是唯一的。我稍微更改了您的代码，因此您将始终使用一组对象，即使它只有一个元素。

【讨论】：