1

单击选项卡时，我想提交表单。这是我到目前为止所拥有的：

<!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>

每个选项卡将提交不同的表单。我希望这有助于确定我想要实现的目标。我对这一切都很陌生，所以请具体说明。

谢谢你。

4

5 回答 5

1

你可以使用这个 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 选项卡都有以 开头的 ID ui-id-#，其中 # 是选项卡编号（例如，ui-id-3.

选择器$('[id^=ui-id-]')意味着：对于任何 ID 属性以 开头的元素ui-id-，捕获点击事件并执行此操作...

请注意，<form>标签必须具有 ID 属性，如上述代码中所指定。例如，对于 Tab 3 上的表单：

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

假设每个选项卡上都有一个表单，例如，表单都具有根据它们所在的选项卡顺序编号的 ID，例如 Form-1、Form-2、Form-5 等。那么您可以使用执行此操作的行var tabId = $(this).attr('id')：

$(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();
    });
});

例如，假设选项卡的 ID 是ui-id-4，那么您需要<form>为选项卡 4 提供一个 ID: <form id="Form-4">。然后，当单击选项卡时，上面的代码将提交该表单。

请注意，上面的代码希望您的表单标签有一个 ID，例如：

<form id="myFormId" action="somepage.php" method="POST" >
于 2013-09-23T16:37:36.883 回答
0

假设您的表单的 id 为“myform”，您可以在选项卡上放置一个单击事件侦听器。

将课程添加到您的选项卡class='tab'

$('.tab').on('click', function(){
    $('#myform').submit();
});
于 2013-09-23T16:28:25.280 回答
0

选项卡小部件有一些您可以使用的事件。例如，当一个选项卡被激活时，您可以拥有一个事件activate处理程序。您可以使用标准的 jQuery 事件处理，并指定tabsactivate事件。像这样的东西：

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

您可以检查ui传递给该事件处理程序的参数以获取有关选项卡的信息。例如，从/到移动的特定选项卡。喜欢：

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

因此，在该处理程序中，您将执行选项卡更改时需要执行的任何任务。

于 2013-09-23T16:28:44.683 回答
0

首先，每个选项卡都可以引用必须在选项卡单击时提交的每个表单。

<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>

然后将点击事件绑定到每个选项卡：

$("#Main").on("click", "a", function() {
   var formId = $(this).data("form");
   $(formId).submit();
});
于 2013-09-23T16:29:44.453 回答
0

简单的方法，为每个分配一个 id 属性<a>，<form>然后执行以下操作：

<script type="text/javascript">

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

</script>

这里有一个小提琴示例

于 2013-09-23T16:32:21.097 回答