JQuery Ui Tabs Form Submit

I'm using tabs to navigate my web application. On each tab is separate file which contains form to receive input from user and display table of data according to input. I want to a

Solution 1:

If I understand the question correctly (read twice)

You can simply use jquery to send the ajax request and your form is ready for next input.

The form contains the fields

<form id="myform">
...
<button id="sub">Submit</button>
</form>

The below div will contain the ajax-request response, which is mostly a table in your case.

<div id="resultContainer"></div>

Here's the script to submit the form through ajax to some url

<script>
$("#sub").click(function(){
        $.ajax({
            type: "POST",
            url: "myjsp.jsp",
            data: $("#myform").serialize(),
            complete: function(xhr, textStatus) {
                $("#resultContainer").html(xhr.responseText);
            }
        });
    });
</script>

Solution 2:

You want to do something along these lines:

<script type="text/javascript">
    $('form:eq(0)').submit(function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "table.htm",
            data: $(this).serialize(),
            dataType: 'text/html',
            success: function(response) {
                $(this).after(response);
            }
        });
        return false;
    });
</script>

and you need to give the form an id attribute.