Jquery UI tabs multiple form submissions with on click

问题

I am using Jquery ui tabs for my forms. Below is the skeleton of my code.

<form id="1" method="post" class="main" action="myservlet">
<div id="tabs">
   <ul>
      <li><a href="xyz/ABC.jsp">NewEmployee</a> </li>
      <li><a href="xyz/DEF.jsp">Add Leave</a> </li>
  </ul>
    </div>
</forms>

My problem is that I need to submit the details in both forms on one button click, I dont have forms inside both ABC and DEF jsp. I am carrying out validation of both jsp inside the each specific jsp itself.

I referred to few post in SOF but could get what I am looking for. Any help is much appreciated.

Update 1 The solution suggested by Michael B send the data in two jsp's in two different query. I want both data to be sent on the same query string. As the second jsp data depend on the primary key of the first jsp information. Thanks

回答1:

Don't place form tags inside each jsp page (abc.js , def.jsp) and handle submit event of form1 in the tabs page ..

You will need to place the submit button in jsp page of last tab .

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title> </title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <script>

        $(function () {
            $("#tabs").tabs({
                beforeLoad: function (event, ui) {
                    ui.jqXHR.error(function () {
                        ui.panel.html("Couldn't load this tab.");
                    });
                }
            });

            // handle submit of each form
            $('#form1').submit( function (e) {
                var form = $(this);
                e.preventDefault();

               $.ajax({
                    url: form.attr('action')
                    , type: form.attr('method')
                    , data: form.serialize()
                    , success: function (data) {
                        alert(data);
                    }
                    , error: function (jqXHR, textStatus, errorThrown) {
                       alert('Error:' + textStatus + ' - ' + errorThrown)
                   }
              });

            });
        });


    </script>
</head>
<body>
<form id="form1" method="post" class="main" action="myservlet">
    <div id="tabs">
        <ul>
            <li>
                <a href="1.htm">
                    Tab 1</a></li>
            <li>
                <a href="2.htm">
                    Tab 2</a></li>
        </ul>
    </div>
</form>

</body>
</html>

each form tag should have method and action attributes set correctly !

来源：https://stackoverflow.com/questions/18649801/jquery-ui-tabs-multiple-form-submissions-with-on-click

标签

jquery

forms

jsp

jquery-ui-tabs