The following is an inline insert using HTML5 table data to a database table using jQuery and AJAX. I would like to also send a checkbox data along with this table data, how can I achieve that ?

<div id="add-product">
<div >Add Product</div>
    <table cellpadding="10" cellspacing="1">
        <tbody>
            <tr>
                <th><strong>Name</strong></th>
                <th><strong>Code</strong></th>
                <th><strong>Description</strong></th>
                <th style="text-align:right;"><strong>Price</strong></th>
            </tr>   
            <tr><form name="myform"><input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue2" /></form>
                <td contentEditable="true" data-id="product_name"></td>
                <td contentEditable="true" data-id="product_code"></td>
                <td contentEditable="true" data-id="product_desc"></td>
                <td contentEditable="true" data-id="product_price" style="text-align:right;"></td>
            </tr>
        </tbody>
    </table>    
<div id="btnSaveAction">Save to Database</div>
</div>



<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#btnSaveAction").on("click",function(){
    params = ""
    $("td[contentEditable='true']").each(function(){
        if($(this).text() != "") {
            if(params != "") {
                params  = "&";
            }
            params  = $(this).data('id') "=" $(this).text();
        }
    });
    if(params!="") {
        $.ajax({
            url: "insert-row.html",
            type: "POST",
            data:params,
            success: function(response){
              $("#ajax-response").append(response);
              $("td[contentEditable='true']").text("");
            }
        });
    }
});
</script>

code is from

CodePudding user response：

The solution may be this... If I understood correctly what you were asking.

    <div id="add-product">
    <div >Add Product</div>
        <table cellpadding="10" cellspacing="1">
            <tbody>
                <tr>
                    <th><strong>Name</strong></th>
                    <th><strong>Code</strong></th>
                    <th><strong>Description</strong></th>
                    <th style="text-align:right;"><strong>Price</strong></th>
                </tr>   
                <tr><form name="myform"><input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue2" /></form>
                    <td contentEditable="true" data-id="product_name"></td>
                    <td contentEditable="true" data-id="product_code"></td>
                    <td contentEditable="true" data-id="product_desc"></td>
                    <td contentEditable="true" data-id="product_price" style="text-align:right;"></td>
                    <td><input type="checkbox" id="product_xxxx" name="product_xxxx" value="yes"></td>
                </tr>
            </tbody>
        </table>    
    <div id="btnSaveAction">Save to Database</div>
    </div>
    
    
    
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
    $("#btnSaveAction").on("click",function(){
        params = ""
        $("td[contentEditable='true']").each(function(){
            if($(this).text() != "") {
                if(params != "") {
                    params  = "&";
                }
                params  = $(this).data('id') "=" $(this).text();
            }
        });
    
        // For each checkbox whose name begins with 'product_'
        $("[type=checkbox][name^='product_']").each(function(){
            
            // If Checkbox Checked
            if($(this).prop('checked')) params  = $(this).attr('id') "=" $(this).val();

    
        });
        // End - For each checkbox whose name begins with 'product_'
    
    
        if(params!="") {
            $.ajax({
                url: "insert-row.html",
                type: "POST",
                data:params,
                success: function(response){
                  $("#ajax-response").append(response);
                  $("td[contentEditable='true']").text("");
                }
            });
        }
    });
    </script>