Alternative for 2 embed form?

Question

I want to know if there's any alternative to my problem.
I have and admin panel where my customer can add/edit/delete buildings. As usual, I have all fields (title, adress, city, etc) in a form with a submit button at the end.
One of the fields is "products affiliates" which is some checkbox you can check to connect the products to the buildings.
I have a "quick add building" (jquery/AJAX) field at the end of the checkbox, if my customer want to quickly add a product at the list. (This is what is problematic cause we can't have 2 embed forms)

I'm on Firefox 29.0.1 fwiw

Here's my form:

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

And here's the jquery/AJAX part:

$(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
          }

      });

    });
});

The quick add function is working properly, but as you can suspect, it conflict with the "parent" form. If I hit enter in any parent field, it submit the child (quick add) form...

So, what's my alternative? Or is a fix is possible?
Thx for your help!

Answer 1

Indeed it is not possible to have nested forms in HTML.

If you can use HTML5 features, you can however create a separate form outside of the main form, and link the "quick add" inputs to that form using the form attribute. This attribute specifies the form owner, which was introduces in HTML5 specifically to address the issues of nested forms. Here are the specifications: http://www.w3.org/TR/html5/forms.html#form-owner

So your code would be like:

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

That way your HTML becomes valid, and if the browser supports properly HTML5 the submit event should be handled correctly.

Additionally, since you submit the "sub-form" in AJAX you need to intercept the submit event so that it executes the AJAX code when you press Enter, rather than going to the form action. You can intercept this event like this:

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

You can also refer to the answers to this question for other possible solutions: Is it valid to have a html form inside another html form? But from what I understand of your case, the form owner seems to fit best.