Question

我想知道我的问题是否有其他选择我有和管理面板，我的客户可以添加/编辑/删除建筑物。像往常一样，我在所有领域（标题，地址，城市等）都有一个表格，最后有一个提交按钮其中一个字段是“产品附属公司”，您可以检查一些复选框以将产品连接到建筑物如果我的客户想要在列表中快速添加产品，我在复选框的末尾有一个“快速添加构建”（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>

这是jquery / AJAX部分：

$(document).ready(function() {

  $("#add-product").click(function(e){  // Click on the "quick add" button"
      e.preventDefault();
      var produit=$("#add_produit").val();   // Get the input value
      $.ajax({
          type:"post",
          url:"../produits/sql.php",
          data:"sql=quick_add&type="+produit,
          success:function(data){
             $("ul.produits").html(data);  // Re-populate the ul (I output the new li in the .sql.php)
             $("#info").html("Le produit a bien été ajouté!");  // Success message
          }

      });

    });
});

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

那么，我的替代方案是什么？或者可以修复吗？
谢谢你的帮助！

Answer 1

确实是it is not possible to have nested forms in HTML。

如果您可以使用HTML5功能，则可以在主窗体之外创建单独的窗体，并使用form属性将“快速添加”输入链接到该窗体。此属性指定表单所有者，它在HTML5中专门用于解决嵌套表单的问题。以下是规范：http://www.w3.org/TR/html5/forms.html#form-owner

所以你的代码就像：

<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>

这样你的HTML就变得有效了，如果浏览器支持HTML5，那么应该正确处理提交事件。

此外，由于您在AJAX中提交“子表单”，因此需要拦截submit事件，以便在按 Enter 时执行AJAX代码，而不是表格动作。您可以像这样截取此事件：

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

您还可以参考此问题的答案以获取其他可能的解决方案：Is it valid to have a html form inside another html form? 但根据我对你的理解，表格所有者似乎最合适。

替代2嵌入形式？

1 个答案: