Question

我正在尝试编写一个通用的jquery函数，以便在单击提交按钮时在表格中提交所有表单。

到目前为止我得到的是：

<div class="tabelaportes">
                <div class="galltitle">Tabela de Portes de Envio</div>
            <table cellpadding="0" cellspacing="0" border="1">
            <tr>
                <td class="tdleft">Peso inicial (kg) </td>
                <td class="tdleft">Peso final (kg) </td>
                <td class="tdleft">Valor (&euro;) </td>
                <td class="tdleft">Acção</td>
            </tr>
            <tr>
                <td class="tdright">
                    1.00 kg
                </td>
                <td class="tdright">
                    2.00 kg
                </td>
                <td class="tdright">
                    3.00 &euro;
                </td>
                <td class="tdright"> 
                    <form method="post">
                    <input type="hidden" name="kgid" value="34"/>
                    <input type="submit" name="rmkgid" value="Remover"/>
                    </form>
                </td></tr>
            <tr>
                <td class="tdright">
                    3.00 kg
                </td>
                <td class="tdright">
                    4.00 kg
                </td>
                <td class="tdright">
                    5.00 &euro;
                </td>
                <td class="tdright"> 
                    <form method="post">
                    <input type="hidden" name="kgid" value="56"/>
                    <input type="submit" name="rmkgid" value="Remover"/>
                    </form>
                </td></tr>
            <tr>
            <form method="post">
                <td>
                    <input type="text" name="kg_i"/>
                </td>
                <td>
                    <input type="text" name="kg_f"/>
                </td>
                <td>
                    <input type="text" name="kg_p"/>
                </td>
                <td>
                    <input type="submit" name="addprice" value="Adicionar"/>
                </td>
                </form>
                </tr>

            </table>
            </div><script>
function submitPortes() {
    var siteurl = window.location.href;
    $("form").submit(function(sp) {
        //get form values
        var submitname = $(this).parents("tr").find("input[type=submit]").attr("name");
        var submitval = $(this).parents("tr").find("input[type=submit]").val();
        var dataString = $(this).serialize() + "&"+ submitname + "="+ submitval;
        console.log("dataString: " + dataString);
        //submit form
        $.ajax({
            type: "POST",
            url: siteurl,
            data: dataString,
            success: function(){
                $.ajax({
                    url: siteurl,
                    type:"GET",
                    success: function(portes){
                        //reload page
                        var reloadPortes = $(portes).find("div.tabelaportes table").html();
                        $("div.tabelaportes table").hide().html(reloadPortes).fadeIn("fast");
                        //reload form to add more
                        submitPortes();
                    }
                });
            }
        });
        return false;
    });
}
submitPortes();
</script>

因此，在这种情况下，所有表单都在表格中。每行都有自己的表单来删除一行，在最后一行中，您可以向表中添加行。该函数提交表单并重新加载表。删除行时，该函数每次都有效，但添加行时，它仅在第一次有效。我能做些什么才能让它每次都有效？甚至可以为所有表格提供一个功能吗？

Answer 1

我不太清楚你的意思是“它只在第一次工作”。但也许尝试在表级注册事件，以便重新评估它以包括添加更多表单元素。

$('#tabelaportes').on('submit', 'form', function(){...});

（注意：这可能不适用于你的初始化模式，也许在$（document）.ready（function（）{}）中移动init;阻止？）

页面中所有表单的通用表单提交功能

1 个答案: