5

好的，这是这个想法：

我想制作一个 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>
4

6 回答 6

2

只需将.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');
});
于 2013-01-22T15:23:09.640 回答
0

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

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

于 2013-01-22T15:23:02.133 回答
0

只需form使用内置的$.serialize.

.serialize() 方法以标准 URL 编码表示法创建文本字符串。它对表示一组表单元素的 jQuery 对象进行操作。

在你的情况下：

var query = $(this).closest('form').serialize();
于 2013-01-22T15:23:20.290 回答
0

.parent()只上一层 DOM - 尝试使用.closest()and find()- 所以

$(this).closets('form').find('input[type="text"]').each(function(){
于 2013-01-22T15:19:32.960 回答
0

用于.find查找子项和.parents查找表格

$(this).parents('form').find('input[type="text"]').each(function(){
        query[$(this).attr('name')] = $(this).val();
    });
于 2013-01-22T15:19:42.870 回答
0

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

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

jsFiddle 演示

于 2013-01-22T15:20:00.977 回答