begingform with multiple rows of a table

Question

welcome I have two tables in the database:- The first: for the same task The second: for the task parts

How to submit the form that contains the task, and a list of the parts of the task:

        $('#btn_create_Mission').click(function () {
            var t = $("#Table_Missions tbody")
            var l = '<tr>';
            l += '<td hidden=hidden">';
            l += '<input name= "ID_Mission_Detalis" id="td_ID_Mission_Detalis" type="text" value="0" />';
            l += '</td>';

            l += '<td>';
            l += '<input name= "Text_Mission" id="td_Text_Mission" type="text" />';
            l += '</td>';
            l += '<td>';
            l += '<input name= "Value_Mission" id="td_Value_Mission" type="text" />';
            l += '</td>';
            l += '<td>';
            l += '<button id="btn_delete_mission" type="button">DELETE PART MISSION</button>';
            l += '</tr>';
            t.append(l);
        }

        )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/Programe/Save_Mission" method="post">    <table>
        <tr>
            <td>
                ID Mission :
            </td>
            <td>
                <input id="Name_Mission" name="Name_Mission" type="text" value="0" />
                
            </td>
        </tr>

        <tr>

            <td>
                Name Mission :
            </td>
            <td>
                <input id="Name_Mission" name="Name_Mission" type="text" value="0" />
                
            </td>
        </tr>

    </table>
    <br />
    <button type="button" id="btn_create_Mission" class="btn btn-success">CREATE PART MISSION</button>
    <br />
    <table id="Table_Missions">
        <thead>
            <tr>
                <th>NAME PART MISSION</th>
                <th>VALUE PART MISSION</th>
            </tr>
        </thead>

        <tbody>
        </tbody>
    </table>
    <input type="submit" value="SAVE ALL" />
</form>

I want when I press the Save All button it sends the form and it also contains a list of the parts Mission

I hope the code and the problem is clear, as I want to send (the task) with (the parts of the task)

Answer 1

Please check the updated code as your requirement

Few things are highlights:

1. Created Delete method to delete part mission
2. Create Save method where you can create your object and then post that object

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/Programe/Save_Mission" method="post">    <table>
        <tr>
            <td>
                ID Mission :
            </td>
            <td>
                <input id="Name_Mission" name="Name_Mission" type="text" value="0" />
                
            </td>
        </tr>

        <tr>

            <td>
                Name Mission :
            </td>
            <td>
                <input id="Name_Mission" name="Name_Mission" type="text" value="0" />
                
            </td>
        </tr>

    </table>
    <br />
    <button type="button" id="btn_create_Mission" class="btn btn-success">CREATE PART MISSION</button>
    <br />
    <table id="Table_Missions">
        <thead>
            <tr>
                <th>NAME PART MISSION</th>
                <th>VALUE PART MISSION</th>
            </tr>
        </thead>

        <tbody>
        </tbody>
    </table>
    <input type="button" value="SAVE ALL" onclick="clickSubmit();" />
</form>

Javascript

var i = 0;

$('#btn_create_Mission').click(function () {
            var t = $("#Table_Missions tbody")
            var l = '<tr id="trPart' + i + '">';
            l += '<td hidden=hidden">';
            l += '<input id="td_ID_Mission_Detalis' + i + '" type="text" value="0" />';
            l += '</td>';

            l += '<td>';
            l += '<input id="td_Text_Mission' + i + '" type="text" />';
            l += '</td>';
            l += '<td>';
            l += '<input id="td_Value_Mission' + i + '" type="text" />';
            l += '</td>';
            l += '<td>';
            l += '<button id="btn_delete_mission' + i + '" type="button" onclick="deletePart('+i+')">DELETE PART MISSION</button>';
            l += '</tr>';
            t.append(l);
            i=i+1;
        }

        )
        
        function deletePart(position){
            $("#trPart"+position).remove();
        }
        
        function clickSubmit(){
        var result ={idMission: $("#Name_Mission").val(),nameMission:$("#Name_Mission").val(), parts:[]};
        for(j=0;j<i;j++){
        if($("#td_Text_Mission"+j) != undefined && $("#td_Text_Mission"+j).val() != undefined){
            var partVal = {
          namePartMission:$("#td_Text_Mission"+j).val(),
          valPartMission:$("#td_Value_Mission"+j).val()
          };
          result.parts.push(partVal);
          }
        }
        console.log(result);
        }