Jquery 2嵌入表单的替代方案？

我想知道我的问题是否有其他解决办法。
我有一个管理面板，我的客户可以在其中添加/编辑/删除建筑物。像往常一样，我在表单中有所有字段（标题、地址、城市等），最后有一个提交按钮。
其中一个字段是“产品附属公司”，您可以选中该复选框将产品连接到建筑物。
如果我的客户希望在列表中快速添加产品，我在复选框的末尾有一个“快速添加构建”（jquery/AJAX）字段（这就是问题所在，因为我们不能有2个嵌入表单）

我使用的是Firefox 29.0.1 fwiw

这是我的表格：

<form action="sql.php" method="post" enctype="multipart/form-data">
    <table>
        [...]
        <tr>
            <td><label>Produits</label></td>
            <td>
                <ul class="produits">
                    <li><label><input name="produits[25]" type="checkbox" value="checked" /> Bière</label></li>
                    <li><label><input name="produits[2]" type="checkbox" value="checked" /> Fromage</label></li>
                    <li><label><input name="produits[4]" type="checkbox" value="checked" /> Fruits</label></li>
                    <li><label><input name="produits[5]" type="checkbox" value="checked" /> Légumes</label></li>
                    <li><label><input name="produits[1]" type="checkbox" value="checked" /> Viande</label></li>
                    <li><label><input name="produits[3]" type="checkbox" value="checked" /> Vin</label></li>
                </ul>

                <form> 
                    <input type="text" name="add_produit" id="add_produit" placeholder="Ajout rapide" /> 
                    <button class="btn-mini btn-grey btn-plus" id="add-product"><span></span></button> 
                    <span id="info"></span>
                    <!-- After I submit this form, I repopulate the above ul with the new content via jquery/ajax -->  
                </form>          
            </td>
        </tr>
        [...]
        <tr>
            <td colspan="2"><input name="submit" type="submit" value="Ajouter" class="bouton" /></td>
        </tr>
    </table>
</form>

快速添加功能工作正常，但正如您所怀疑的，它与“父”窗体冲突。如果我在任何父字段中按enter键，它将提交子（快速添加）表单

那么，我的选择是什么？或者可以修复吗？
谢谢你的帮助

确实如此

如果您可以使用HTML5功能，那么您可以在主窗体之外创建一个单独的窗体，并使用

form

属性将“快速添加”输入链接到该窗体。该属性指定表单所有者，在HTML5中引入该属性是为了解决嵌套表单的问题。以下是规格：

因此，您的代码如下所示：

<form action="sql.php" method="post" enctype="multipart/form-data">
    <!-- 
      ...
      Some form elements here to edit the building 
      ...
    -->

    <label>Products</label>
    <ul class="products">
        <li><label><input name="products[1]" type="checkbox" /> Beer</label></li>
        <li><label><input name="products[2]" type="checkbox" /> Cheese</label></li>
    </ul>
    <div>
        <!-- Notice the form attribute, that points to the id of the form owner -->
        <input form="quickaddform" type="text" name="added_product" placeholder="Quick add" /> 
        <button id="add-product">Quick add</button>   
    </div>

    <!-- Some other main form elements -->

    <!-- Submit for the main form -->
    <input type="submit" value="Add" />
</form>

<form id="quickaddform"></form>

您也可以参考此问题的答案以了解其他可能的解决方案：

---

但从我对您案例的了解来看，表单所有者似乎最适合您。

谢谢您的回答。我试过你的代码，但不起作用。（得到了同样的结果）。如果我在父窗体中点击

Enter

，它将触发子窗体的jquery/ajax，并在

ul

中为我添加一个空值。。。如果我在

#add_produit

输入中点击

Enter

，它会在url末尾用

？add_produit=test

重新加载页面。。如果我按下2个提交按钮中的任何一个，一切都很好。但是Enter键仍然存在问题..可能是您没有拦截submit事件吗？这是当按下

Enter

时触发的事件，如果您不拦截它，浏览器将尝试调用表单的

操作。此JSFIDLE显示了一个工作示例：。我还编辑了我的答案，里面有关于这个的信息。它现在正在工作。正如您所回答的，我没有处理提交事件。我不得不稍微修改一下代码。重要注意事项，我认为
输入会干扰提交，因此我将其改为
，它工作正常。我将用工作解决方案编辑我的帖子，谢谢！很高兴它能起作用：）你不需要编辑这个问题，答案就是为了这个。如果您认为答案应该进行编辑以使其更清晰，请告诉我。正确的，正如我所说的，如果您只检查vs，它可能会得到优化：）
<form action="sql.php" method="post" enctype="multipart/form-data">
    <!-- 
      ...
      Some form elements here to edit the building 
      ...
    -->

    <label>Products</label>
    <ul class="products">
        <li><label><input name="products[1]" type="checkbox" /> Beer</label></li>
        <li><label><input name="products[2]" type="checkbox" /> Cheese</label></li>
    </ul>
    <div>
        <!-- Notice the form attribute, that points to the id of the form owner -->
        <input form="quickaddform" type="text" name="added_product" placeholder="Quick add" /> 
        <button id="add-product">Quick add</button>   
    </div>

    <!-- Some other main form elements -->

    <!-- Submit for the main form -->
    <input type="submit" value="Add" />
</form>

<form id="quickaddform"></form>

$("#quickaddform").submit(function(){
    $("#add-product").click();
    return false;
});