jquery post form with multiple same name field

Question

I have a biling form with same input in (td) on each line (tr). Now I want to submit this form with full filled lines only.

I read some article on your site but I can't submit my form.

Here is the html code:

<div id="fac_table">
    <table id="matable" width="100%">
        <tbody>
            <tr>
                <th width="10px">
                    <img id="insArticle" src='../../images/icon_add.png' width='16' height='16'>
                </th>
                <th width="250px">
                    Désignation
                </th>
                <th width="30">
                    Unité
                </th>
                <th width="30">
                    Quantité
                </th>
                <th width="30">
                    Prix
                </th>
                <th width="30">
                    TVA
                </th>
                <th width="30">
                    Total
                </th>
            </tr>
            <tr>
                <td width="10px">
                    <img id="insArticle" src='../../images/icon_add.png' width='16' height='16'>
                </td>
                <td width="250px">
                    <input name="designation" type="text" class="facBig" />
                </td>
                <td width="30">
                    <input name="unite" type="text" class="facSmall" />
                </td>
                <td width="30">
                    <input name="quantite" type="text" class="facSmall" />
                </td>
                <td width="30">
                    <input name="prixUnite" type="text" class="facSmall" value="" />
                </td>
                <td width="30">
                    <input name="taxe" type="text" class="facSmall" value="" />
                </td>
                <td width="30">
                    <input name="totLine" type="text" class="facSmall" value="" />
                </td>
            </tr>
              <tr>
                <td width="10px">
                    <img id="insArticle" src='../../images/icon_add.png' width='16' height='16'>
                </td>
                <td width="250px">
                    <input name="designation" type="text" class="facBig" />
                </td>
                <td width="30">
                    <input name="unite" type="text" class="facSmall" />
                </td>
                <td width="30">
                    <input name="quantite" type="text" class="facSmall" />
                </td>
                <td width="30">
                    <input name="prixUnite" type="text" class="facSmall" value="" />
                </td>
                <td width="30">
                    <input name="taxe" type="text" class="facSmall" value="" />
                </td>
                <td width="30">
                    <input name="totLine" type="text" class="facSmall" value="" />
                </td>
            </tr> <tr>
                <td width="10px">
                    <img id="insArticle" src='../../images/icon_add.png' width='16' height='16'>
                </td>
                <td width="250px">
                    <input name="designation" type="text" class="facBig" />
                </td>
                <td width="30">
                    <input name="unite" type="text" class="facSmall" />
                </td>
                <td width="30">
                    <input name="quantite" type="text" class="facSmall" />
                </td>
                <td width="30">
                    <input name="prixUnite" type="text" class="facSmall" value="" />
                </td>
                <td width="30">
                    <input name="taxe" type="text" class="facSmall" value="" />
                </td>
                <td width="30">
                    <input name="totLine" type="text" class="facSmall" value="" />
                </td>
            </tr> <tr>
                <td width="10px">
                    <img id="insArticle" src='../../images/icon_add.png' width='16' height='16'>
                </td>
                <td width="250px">
                    <input name="designation" type="text" class="facBig" />
                </td>
                <td width="30">
                    <input name="unite" type="text" class="facSmall" />
                </td>
                <td width="30">
                    <input name="quantite" type="text" class="facSmall" />
                </td>
                <td width="30">
                    <input name="prixUnite" type="text" class="facSmall" value="" />
                </td>
                <td width="30">
                    <input name="taxe" type="text" class="facSmall" value="" />
                </td>
                <td width="30">
                    <input name="totLine" type="text" class="facSmall" value="" />
                </td>
            </tr> <tr>
                <td width="10px">
                    <img id="insArticle" src='../../images/icon_add.png' width='16' height='16'>
                </td>
                <td width="250px">
                    <input name="designation" type="text" class="facBig" />
                </td>
                <td width="30">
                    <input name="unite" type="text" class="facSmall" />
                </td>
                <td width="30">
                    <input name="quantite" type="text" class="facSmall" />
                </td>
                <td width="30">
                    <input name="prixUnite" type="text" class="facSmall" value="" />
                </td>
                <td width="30">
                    <input name="taxe" type="text" class="facSmall" value="" />
                </td>
                <td width="30">
                    <input name="totLine" type="text" class="facSmall" value="" />
                </td>
            </tr>
        </tbody>
    </table>
</div>

and here is the jquery code:

$("#facform").submit(function()
{
    var sendURL = $(this).attr("action");
    var sendPost = $(this).attr("method");
    var facArray = $(this).serialize();

    alert(sendURL + "  " + sendPost + "  " + facArray);

    $.ajax(
    {
        type: sendPost,
        url: sendURL,
        data: facArray,
        success: function(response)
        {
            console.log(response);
        }
    });
});
$("#facform").submit();

The alert give the correct information, but I've a blank post on my sendfac.php.

Thank you for help.

Answer 1

Add this code. You forgot to add your method.

 $.ajax(
{
    method: sendPost , 
    url: sendURL,
    data: facArray,
    success: function(response)
    {
        console.log(response);
    }
});

Or try with this code

$.post("/"+sendURL, { data: facArray}, function success (data) {
                alert("Done");
            }, "json");

Answer 2

You should add brackets to form fields names. Because you are trying to send array of values.

Like this: <input name="designation[]" type="text" class="facBig" />