Submit two HTML forms in JSP using single submit button with Ajax

Question

My page design is such that I have to use two forms that submit on single click and then saved to database and vice verse.

I am using this on a JSP page with Struts 2 Framework. I have tried the Ajax solutions but they are not working for me.

Here is my script(UPDATED):

$("#visitType").buttonset();
$("#patientCondition").buttonset();
$("input[type=submit], a, button").button().click(function(event) {
  event.preventDefault();
  var inputs=$('#visitType,#patientCondition ').find(':input').not(this);
  var form_data={};
  inputs.each(function(){
    form_data[this.name]=$(this).val();
  });
  $.post('patientSoapAll',  form_data, function(response){  
  });
});

My form1:

<s:form action="PatientSoapAll" method="post">

        <div id="visitType">
            <input type="radio" id="I" value="I" <s:if test='pSB.rOS == "I"'>checked</s:if> name="pSB.rOS" /><label for="I">I V</label> 
            <input type="radio" id="R" value="R"<s:if test='pSB.rOS == "R"'>checked</s:if>name="pSB.rOS" /><label for="R">Regular   Visit</label> 
            <input type="radio" id="P/N" <s:if test='pSB.rOS == "P/N"'>checked</s:if>name="pSB.rOS" /><label for="D/N">Re- Evaluation</label> 
            <input type="radio" id="D/N"<s:if test='pSB.rOS == "D/N"'>checked</s:if> name="pSB.rOS" /><label for="
    
    P/N">Discharge</label>
    </div>
</s:form>

My form2:

<s:form action="PatientSoapAll" method="post">

    <div id="patientCondition">
        <input type="radio" id="new" value="n"<s:if test='pSB.r2 == "n"'>checked</s:if> name="pSB.r2" /> <label for="new">New</label>
        <input type="radio" id="noChange" value="nC" <s:if test='pSB.r2 == "nC"'>checked</s:if> name="pSB.r2" /><label for="noChange">No Change</label> 
        <input type="radio" id="progressing" value="p"<s:if test='pSB.r2 == "p"'>checked</s:if> name="pSB.r2" /><label for="progressing">Progressing</label> 
        <input type="radio" id="notProgressing" value="nP" <s:if test='pSB.r2 == "nP"'>checked</s:if>   name="pSB.r2" /><label for="notProgressing">Not Progressing</label>
    </div>
</s:form>

This is my Updated Submitted Button. Removed from <div> and placed inside a table.

<tr>
  <td></td>
  <td><input type="submit" value="Save Note" /></td>
</tr>

I am using Struts 2 and I want to redirect this submit button to an action PatientSoapAll. I am using custom extension of .do instead of .action(by default). Please tell me how can I redirect this submit button to respective action class in Struts 2.

Answer 1

Found an easy solution to it.

javascript:

submitForms = function() {
  $('#form2 :input').not(':submit').clone().hide().appendTo('#form1');
    document.getElementById("form1").submit();
};

Submit button :

<input type="button" value="Save Note" onclick="submitForms()" />

Answer 2

You can use Struts2 jQuery to submit multiple forms

<sj:submit formIds="visitType,patientCondition" targets="result" value="Submit" />  

formIds:

Comma delimited list of form ids for which to serialize all fields during submission when this element is clicked (if multiple forms have overlapping element names, it is indeterminate which will be used)

Answer 3

You can use jQuery .serialize to do what you want. Give some class to your forms then use it to select your forms and call serialize to get a string in the standard URL-encoded notation. After that you can use some AJAX method to post it to your action.

$(function() {
  $("#saveNoteButton").click(function() {
    alert($(".forms").serialize());
  });
});