Question

好的，这就是这个想法：

我想制作一个jQuery脚本来处理多个表单。每个表单都有一个按钮。单击此按钮时，脚本应将$ _POST中的所有输入字段的名称和值发送到表单的操作URL。但我不能让它发挥作用。

它不会遍历我的jQuery文件中第3行的.each。

jQuery的：

$("input[type='button']").click(function(){
    var query = {};
    $(this).parent('form').children('input[type="text"]').each(function(){
        query[$(this).attr('name')] = $(this).val();
    });

    $.post($(this).parent('form').attr('action'), query, function(data) {
        $("#dialog").html(data);
        $("#ui-id-1").html('Activate account');
        $("#dialog").dialog("open");
    }, 'json');
});

HTML：

<form action="/action/activateacc.php">
<table>
    <tr>
        <td>E-mail:</td>
        <td><input type="text" id="mail" name="mail" /></td>
        <td><img class="tick" id="mailIMG" width="20px" /></td>
    </tr>
    <tr>
        <td>Activation code:</td>
        <td><input type="text" id="code" name="code" /></td>
        <td><img class="tick" id="codeIMG" width="20px" /></td>
    </tr>
    <tr>
        <td>Choose organization-name:</td>
        <td><input type="text" id="name" name="name" /></td>
        <td><img class="tick" id="nameIMG" width="20px" /></td>
    </tr>
    <tr>
        <td></td>
        <td style="text-align:center"><input type="button" style="cursor:pointer" value="Activate account" /></td>
    </tr>
 </table>
 </form>

Answer 1

只需使用表单中的.serialize()来获取输入的名称/值 - 您也应该使用最接近的，因为父级只会上升一级

$("input[type='button']").click(function(){   
    var query = $(this).closest('form').serialize();
    $.post($(this).parent('form').attr('action'), query , function(data) {
        $("#dialog").html(data);
        $("#ui-id-1").html('Activate account');
        $("#dialog").dialog("open");
    }, 'json');
});

Answer 2

.parent()只会升级到DOM的一个级别 - 尝试使用.closest()和find() - 所以

$(this).closets('form').find('input[type="text"]').each(function(){

Answer 3

使用.find查找子项，使用.parents查找表单

$(this).parents('form').find('input[type="text"]').each(function(){
        query[$(this).attr('name')] = $(this).val();
    });

Answer 4

我阅读它的最简单方法是使用.closest()（一直向上而不是一级的父级）以及find()（通过当前运行查询） jQuery对象）：

$(this).closest('form').find('input[type="text"]').each(function(){ 
    query[$(this).attr('name')] = $(this).val();
});

<强> jsFiddle Demo

Answer 5

parent()仅在DOM树中上升1级，而children()仅在DOM树中下降1级。

如果你100％确定结构不会改变（不推荐，不是那么干净），或者使用closest()，那么你应该尝试使用更多它们，这将检索最接近的给定标签名称在DOM树中。

Answer 6

只需使用内置的$.serialize，您就可以免除将form元素序列化为查询的麻烦。

.serialize（）方法以标准URL编码方式创建文本字符串符号。它在表示一组表单的jQuery对象上运行元件。

在你的情况下：

var query = $(this).closest('form').serialize();

JQuery .each循环问题

6 个答案: