CODEWITHSUNDEEP
javascriptjqueryhtml
Neil Porven
Neil Porven

Reputation: 83

How to submit a form when tab is click

I would like to submit a form, when a tab is clicked. This is what I have so far:

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Submit a Form on Tab Click</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>
            <style type="text/css">
            </style>

            <script>
                $(function() {
                    $( "#Main" ).tabs();
                 });
            </script>

            <script>
            $(document).ready(function(){
            $('#Tab1').click(function(){
            $('#Form_1').submit();
            });

</script> 

        </head>
    <body>
        <div id="Main">
            <ul>
                <li><a href="#Tab1">Tab1</a></li>
                <li><a href="#Tab2">Tab2</a></li>
                <li><a href="#Tab3">Tab3</a></li>
                <li><a href="#Tab4">Tab4</a></li>
                <li><a href="#Tab5">Tab5</a></li>
                <li><a href="#Tab6">Tab6</a></li>
           </ul> 

           <form id="Form_1" action="Tab_Click_v00.html" method="post">
           <input type="hidden" name="Nb_var99" value="1">
           </form>

            <div id="Tab1">
                <p>Tab1</p> 
            </div>
            <div id="Tab2">
                <p>Tab2</p>
            </div>
            <div id="Tab3">
                <p>Tab3</p>
            </div>
            <div id="Tab4">
                <p>Tab4</p>
            </div>
            <div id="Tab5">
                <p>Tab5</p>
            </div>
            <div id="Tab6">
                <p>Tab6</p>
            </div>
        </div>
     </body>
</html>

Each tab will submit a different form. I hope this helps to identify what I am trying to achieve. I am new to all this so please be specific.

Thank you.

Upvotes: 1

Views: 3451

Answers (5)

CoderRoller
CoderRoller

Reputation: 1259

The easy way, asign an id attribute to each <a> and <form> and then do this:

<script type="text/javascript">

$(document).ready(function(){
    $('#tab1').click(function(){
         $('#form1').submit();
    });
    $('#tab2').click(function(){
         $('#form2').submit();
    });
    $('#tab3').click(function(){
         $('#form3').submit();
    });
});

</script>

A fiddle example here

Upvotes: 0

cssyphus
cssyphus

Reputation: 40106

You can use this jQuery:

jsFiddle here

$(document).ready(function() {
    $( "#Main" ).tabs();

    $('[id^=ui-id-]').click(function() {
        var tabId = $(this).attr('id');
        alert('Tab clicked: ' + tabId );

        if (tabId == 'ui-id-1') {
            $('#LoginForm').submit();
        }else if (tabId == 'ui-id-2') {
            $('#form2').submit();
        }else if (tabId == 'ui-id-3') {
            $('#form3').submit();
        }
    });
});

jQueryUI tabs all have IDs beginning with ui-id-#, where # is the tab number (for example, ui-id-3.

The selector $('[id^=ui-id-]') means: For any element whose ID attribute begins with ui-id-, trap the click event and do this...

Note that the <form> tag must have an ID attribute, as specified in the above code. For example, for the form on Tab 3:

<form id="form3" action="whatever.php" method="POST">

Suppose each tab has a form on it and, for example, the forms all have IDs that are sequentially numbered according to the tab they are on, such as Form-1, Form-2, Form-5, etc. Then you could use the line var tabId = $(this).attr('id') to do this:

$(document).ready(function() {
    $( "#Main" ).tabs();

    $('[id^=ui-id-]').click(function() {
        var tabId = $(this).attr('id'); //ui-id-4
        var tabNum = tabId.split('-')[2]; //4
        $('#Form-' + tabNum).submit();
    });
});

For example, suppose the tab's ID is ui-id-4, then you would want to give the <form> for tab 4 an ID: <form id="Form-4">. The above code would then submit that form when the tab was clicked.

Note that the above code expects that your form tags will have an ID, such as:

<form id="myFormId" action="somepage.php" method="POST" >

Upvotes: 1

letiagoalves
letiagoalves

Reputation: 11302

First each tab could have a reference to each form that must be submitted on tab click.

<ul>
    <li><a href="#Tab1" data-form="#f1">Tab1</a></li>
    <li><a href="#Tab2" data-form="#f2">Tab2</a></li>
    <li><a href="#Tab3" data-form="#f3">Tab3</a></li>
    <li><a href="#Tab4" data-form="#f4">Tab4</a></li>
    <li><a href="#Tab5" data-form="#f5">Tab5</a></li>
    <li><a href="#Tab6" data-form="#f6">Tab6</a></li>
</ul>

Then bind a click event to each tab:

$("#Main").on("click", "a", function() {
   var formId = $(this).data("form");
   $(formId).submit();
});

Upvotes: 0

David
David

Reputation: 219127

The tabs widget has some events you can use. For example, when a tab is activated, you can have a handler for the activate event. You can use standard jQuery event handling, and specify the tabsactivate event. Something like this:

$('#Main').on('tabsactivate', function (event, ui) {
    // your logic here
    $('#someForm').submit();
});

You can inspect the ui argument passed to that event handler for information about the tab. For example, the specific tab being moved from/to. Like:

if (ui.oldPanel.selector == '#Tab1') {
    // The user just left Tab1
}

So within that handler you'd perform whatever task you need to perform when a tab changes.

Upvotes: 0

Vlad
Vlad

Reputation: 978

Assuming your form will have an id of 'myform', you can put a click event listener on the tabs.

Add a class to your tabs class='tab'

$('.tab').on('click', function(){
    $('#myform').submit();
});

Upvotes: 0

Related Questions