Как я могу отправить две формы с помощью одной кнопки?

#javascript #java #jquery #spring-mvc

Вопрос:

У меня есть 2 формы, которые я хочу отправить с помощью одной кнопки в spring mvc

страница jsp:

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

Я пытаюсь отправить 2 формы с помощью одной кнопки «Отправить». Первая таблица вставляется правильно.. но вторая таблица создается, но дает нулевое значение. Я много пробовал. Я не могу определить, где я совершил ошибку.

Кто-нибудь может мне помочь?

Комментарии:

1. Вам нужно использовать JS для вызова HTMLFormElement.submit() другой формы, когда click событие срабатывает на кнопке.

2. любая отправка загружает страницу… (или перезагружает)

3. @ Spectric, но это не работает… только та же проблема

Ответ №1:

Вы не можете просто отправить две формы одну за другой, так как это приведет к перезагрузке страницы при отправке. Отправьте один с помощью ajax и в случае успешного обратного вызова отправьте вторую форму.

В вашей функции отправки добавьте что-то вроде этого.

 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
    }
});
 

Вы можете получить значения полей ввода в jquery или javascript.

Комментарии:

1. как я могу поступить с ajax..можете ли вы привести мне пример?? потому что я начинающий

2. Я отредактировал свой ответ, пожалуйста, проверьте это, и если это поможет вам, пожалуйста, озвучьте его, спасибо

3. я смущен тем, где я также должен установить кнопку отправки

4. Если вы можете показать нам свой код, возможно, мы сможем лучше помочь, что вы уже сделали до сих пор и как вы вызываете ajax и публикацию во второй форме. Что не работает, какая ошибка возвращается и т. Д.

5. я думаю, что проблема в кнопке «Отправить»… Я просто даю отправить как <тип ввода=»отправить» значение=»Отправить»> …как именно я должен вызвать кнопку отправить??