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 属性が必要であることに注意してください。たとえば、タブ 3 のフォームの場合:

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

各タブにフォームがあり、たとえば、すべてのフォームに、フォーム 1、フォーム 2、フォーム 5 など、タブに応じて順番に番号が付けられた ID があるとします。これを行う行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 に答える