如何一键提交两个表单？

Question

I have 2 forms that I wanna to submit them with one button in spring mvc

jsp page:

        <form:form id="form1"   method="POST"  modelAttribute="employee" >

        <table>
        <tr>
        <th>Employee </th></tr>

        <tr>

       <td>Employee ID</td>
       <td><form:input type="number" path="emp_id"/></td>

       <td>Employee Name</td>
       <td><form:input type="text"   path="name"/></td>

       <td>Designation</td>
       <td><form:label type="text"  path="designation"> </form:label></td>
       <td>
       <form:select type="text" path="designation">
       <form:option value="select" label="Select"/>
       <form:option value="Developer" label="Developer"/>
       <form:option value="Tester" label="Tester"/>
       </form:select></td>

       <td>Location</td>
      <td><form:label   path="location"/></td>
      <td>
      <form:select type="text"  path="location">
      <form:option value="select" label="select"/>
      <form:option value="Bangalore" label="Bangalore"/>
      <form:option value="Mysore" label="Mysore"/>
      </form:select></td>

      <td>Employee Type</td>
      <td><form:label type="text"  path="employee_type"> </form:label></td>
      <td>
      <form:select type="text"  path="employee_type">
      <form:option value="select" label="select"/>
      <form:option value="Permanent" label="Permanent"/>
      <form:option value="Contract" label="Contract"/>
      </form:select></td>

      <td><form:hidden  path="${id}"/></tr>
      </table>

      <br>
      </form:form>
      <form:form id="form2"   method="POST"  modelAttribute="dailyreportAttribute" >

       <table>
       <tr>
       <th>Daily Report</th>
        </tr>
        <tr>

       <td>Date</td>
       <td><form:input name="date"   path="date"  /></td>

       <td>Task Type</td>
       <td><form:label path="task_type"> </form:label></td>
       <td>
       <form:select type="text" path="task_type">
      <form:option value="select" label="select"/>
      <form:option value="Technical" label="Technical"/>
      <form:option value="Non-Technical" label="Non-Technical"/>
      </form:select></td>

      <td>Description</td>
      <td><form:input type="text"   path="description"/></td>
      <td><form:hidden path="${emp_id}"/>

     </tr>

    </table>
    </form:form>
    <button class="button button-gray" onclick="submitform()"><span class="accept"> 
    </span>Save</button>
    <script>
     submitform = function(){
    document.getElementById("form1").submit();
    
    setTimeOut(function() {
        document.getElementById("form2").submit();
    }, 5000);
    }
   </script>

I'm trying to submit 2 forms with one submit button. The first table is getting inserted correctly.. but, the second table is getting created but giving the null value. I tried lot. I can't identify where I have done the mistake.

Can anybody help me?

Answer 1

You cannot simply submit two forms one by one as it will reload page on submit. Submit one by ajax and in its success callback submit the second form.

In your submit function add something like this.

var data = { EmployeId: EmpId, EmployeName: EmpName.....all other data };

$.ajax({
    cache: false,
    data: data,
    url: "Your post url",
    type: "POST",
    success: function (data) {
        //post second form here
    }
    error: function(err){
        //If this comes here then there is some issue in ajax request you can examine by checking data in err
    }
});

You can get values of input fields in jquery or javascript.