个人中心
gpt4 book ai didi

javascript - 单击选项卡时如何提交表单

转载 作者：行者123 更新时间：2023-11-28 01:57:03 26 4
gpt4 key购买 nike

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

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

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

谢谢。

最佳答案

您可以使用这个 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">
<小时/>

假设每个选项卡上都有一个表单，例如，表单都有根据其所在选项卡顺序编号的 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" >

关于javascript - 单击选项卡时如何提交表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18964190/

26 4 0
文章推荐： javascript - html5数字字段的非数值
文章推荐： javascript - CESIUM AGI 中的绘图线
文章推荐： html - Starling 上是否有 graphics.lineBitmapStyle() 或替代方法
文章推荐： c++ - opencv矩阵伪逆失败
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com