jQuery：表单输入值出现未定义答案

【问题标题】：jQuery: form input values turns up undefinedjQuery：表单输入值出现未定义
【发布时间】：2010-06-09 08:52:33
【问题描述】：

这个 qith jQuery 的代码有问题。它应该从当前表单中选择值然后提交它们，但是当我尝试使用 jQuery 获取它们时，它们总是出现未定义。我知道 SQL 结果很好，因为它们在 HTML 表中正确显示，所以这一定是我的 javascript 技能较差。 jQuery的新手，我不知所措:(

PHP/HTML：

echo "<table>\n" 
while ($row = odbc_fetch_array($query))
    {
    echo    "<form class='catForm'>\n";
    echo    "<input type=hidden class='catID' name='catID' value='".$row['running_id']."'/>\n";
    echo    "<tr>\n";
    echo        "<td>".$row['running_id']."</td>\n";
    echo        "<td>".$row['site_id']."</td>\n";
    echo        "<td>".$row['main_category']."</td>\n";
    echo        "<td>".$row['map_name']."</td>\n";
    echo        "<td><input type=textfield class='bCatID' value='".$row['mapping_id']."' size=6/></td>\n";
    echo        "<td><input type=submit class='saveCat' value='Save'/></td>\n";
    echo        "<td><input type=submit class='killCat' value='Delete' /></td>\n";
    echo    "</tr>\n";
    echo  "</form>\n";  
    }
    echo "</table>";

jQuery:

$(".catForm").submit(function () { 
  var id = $(this).find('.catID').val();
  var bCatID = $(this).find('.bCatID').val();
  var dataString = 'id='+id+'&bCatID='+bCatID;

  $.ajax({
    type: "POST",
    url: 'adminUI/bin/updateSCategories.php',
    dataType : 'json',
    data: dataString,
    success: function(data)
    {
      if (data.error == true)
        $('.failure').html("Error, save failed.").show().fadeOut(2000);
      if (data.error == false)
        $('.success').html("Saved succesfully").show().fadeOut(2000);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown)
    {
      $('.failure').html("Error, save failed.").show().fadeOut(2000);
    }
  });
  return false;
});

结果：
id：未定义
bCatID：未定义

【问题讨论】：

标签： jquery forms submit undefined

【解决方案1】：

试试这个：

$(".catForm").submit(function () { 
 $.ajax({
   type: "POST",
   url: 'adminUI/bin/updateSCategories.php',
   dataType : 'json',
   data: $(this).serialize(),
   success: function(data)
   {
    if (data.error == true)
      $('.failure').html("Error, save failed.").show().fadeOut(2000);
    if (data.error == false)
      $('.success').html("Saved succesfully").show().fadeOut(2000);
   },
   error: function(XMLHttpRequest, textStatus, errorThrown)
   {
     $('.failure').html("Error, save failed.").show().fadeOut(2000);
   }
});
return false;
});

参考：.serialize()

【讨论】：

好的，谢谢！此外只需更改输入的名称属性以对应其余代码。
@Seerumi：没错，在这个例子中输入必须有一个名称值。如果您认为它是正确的，请不要忘记接受答案:)

【解决方案2】：

Jquery 不能很好地处理表格中的表单：您应该重新构建您的 html/js。

【讨论】：