отправьте форму после нажатия на выбранную вкладку, и страница также останется на этой вкладке

Question

Я хотел бы сделать следующее:

1. tab-1 is selected when page load at first time
2. After clicking tab-2, form is submitted and page need to stay on the tab-2

Я протестировал два фрагмента кода.Однако оба они имеют ошибки (см. Ниже):

<form id="target">
    <ul>
        <li><a href="#tabs-1" id="tabs-A">Tab-1</a></li>
        <li><a href="#tabs-2" id="tabs-B">Tab-2</a></li>
        <li><a href="#tabs-3" id="tabs-C">Tab-3</a></li>
    </ul>
    <div id="tabs-1">
    </div>
    <div id="tabs-2">   
    </div>
    <div id="tabs-3">   
    </div>
</form>

код 1 - работает с точкой 2 и не работает с точкой 1

<script>
                $(function() {

                   var $tabs = $('#tabs').tabs();

                   $tabs.tabs( "option", "selected", 1 );

                   $('#tabs-B').click(function() {
                        $('#target').submit();

                    });
                });
            </script>

код 2 - работает с точкой1, но форма не отправляется после нажатия вкладки-2

var $tabs = $('#tabs').tabs();


                   $('#tabs-B').click(function() {
                        $('#target').submit(function() {
                            $tabs.tabs( "option", "selected", 1 );
                        });

                    });

Answer 1

используйте метод [select][1]

$( "#tabs" ).tabs({
   select: function(event, ui) {

  var data = $("#from1").serialize();

   console.log(data);
   // submit the for via ajax here
       /*$.post("/path",{data:data},function(){      
          //clear the form fields or what ever you want to do
       });*/ 


   }
});

http://jsfiddle.net/5RMxZ/16/