2

我有几个选项卡，每次选择一个选项卡时，都会提交表单，发送一个不同的值（对用户隐藏）。如果我说从 TAB1 到 TAB2，variable99 将获得 2 的值，TAB3 将获得 3 的值等等......我遇到的问题是当我选择 TAB2 时，我不希望页面恢复到 TAB1。这是我的代码：

<!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();
$('[id^=ui-id-]').click(function(){
var tabId = $(this).attr('id');
var tabNum = tabId.split('-')[2];
$('#form-' + tabNum).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>   

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

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

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

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

<form id="form-6" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="6">
</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>

这是我现在的代码，我删除了一些东西，从那以后就没有了：

<!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() {//Open function
$("#Main").tabs();
$('[id^=ui-id-]').click(function(){ //Open [id^=ui-id-]

       if (tabId == 'ui-id-1')
     {
        doAjax('1');
        }
    else if (tabId == 'ui-id-2') 
     {
      doAjax('2');
     }
    else if (tabId == 'ui-id-3') 
     {
      doAjax('3');
     }
function doAjaxSubmit(formID) { //Open doAjaxSubmin
$.ajax({
    type: "POST",
    url: "Tab_Click_v00.html",
    data: "Nb_var99=" + formID,
})
} //Close doAjaxSubmin
}); //Close [id^=ui-id-]
});//Close function
</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>



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

这是行不通的。它也杀死了css风格？？我会继续努力的。

4

4 回答 4

2

对于你想做的事情，根本不需要使用<form>s 和<input>s 。

只需根据单击的选项卡，您就可以通过 AJAX 将 1 或 2 或 3 发送到所需的 HTML 页面。

<form>当您有多个字段并且希望将它们的数据发布到另一个服务器页面进行处理时，这种结构非常棒。但是，在您的情况下，您似乎只想将一个值发送到另一个页面，然后返回。

这是使用 AJAX 的一种方法：

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

    $('[id^=ui-id-]').click(function() {

        if (tabId == 'ui-id-1') {
            doAjax('1');
        }else if (tabId == 'ui-id-2') {
            doAjax('2');
        }else if (tabId == 'ui-id-3') {
            doAjax('3');
        }

    }); //END ui-id-#.click fn
}); //END document.ready

function doAjaxSubmit(formID) {
    $.ajax({
        type: "POST",
        url: "myphpprocessor.php",
        data: "Nb_var99=" + formID,
    })
    .done(function( recd_from_PHP ) {
        //No need to put ANYTHING in here, but for eg, you can do:

        //AS AN EXAMPLE ONLY, display message sent from server side
        alert("PHP side said: " + recd_from_PHP);

        //AS AN EXAMPLE ONLY, click the third tab...
        $('[id^=ui-id-3]').click();
    });

}

发送表单数据的另一种方法（<form>按预期使用 a）是<iframe>在您的页面上创建一个隐藏的，包含其中的Tab_Click_v00.html页面 - 然后 POST 到该页面。

因为表单的目标已经在 中的页面上<iframe>，所以当前页面不应刷新。并且由于<iframe>是隐藏的，用户应该不会看到任何异常。

于 2013-09-23T21:31:16.013 回答
1

鉴于您正在使用jQuery Tabs控件，您可以使用window.location.hashand 绑定到load事件（并使用该active选项显示适当的选项卡）：

$(window).load(function(){
  if(window.location.hash){
    $('#main').tabs('option','active',window.location.hash.substring(1));
  }
});

然后使用重定向用户somepage.html#tabindex

于 2013-09-23T20:58:31.553 回答
1

这是一个新的答案，请尝试这个。

这个答案也使用 AJAX。我将发布另一个示例，解决您对隐藏 iframe 想法的更多信息的请求。

请注意，当您从一个选项卡单击到另一个选项卡时，用户仍停留在该选项卡上。

只需复制/粘贴到两个文件中：
index.php（或您希望命名的任何文件）和
myphpprocessor.php（如果更改此文件的名称，还必须在 AJAX 代码块中更改其名称

index.php（或 mytest.html，或其他）

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

    <style>
        #msg{width:30%;height:80px;padding:10px;margin-top:20px;background-color:wheat;}
        .hidden{display:none;}
    </style>

        <script type="text/javascript">
            $(document).ready(function() {

                $( "#Main" ).tabs();

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

                    if (tabId == 'ui-id-1') {
                        doAjax('1');
                    }else if (tabId == 'ui-id-2') {
                        doAjax('2');
                    }else if (tabId == 'ui-id-3') {
                        doAjax('3');
                    }else if (tabId == 'ui-id-4') {
                        doAjax('4');
                    }else if (tabId == 'ui-id-5') {
                        doAjax('5');
                    }

                }); //END ui-id-#.click fn
            }); //END document.ready

            function doAjax(formID) {
                $.ajax({
                    type: "POST",
                    url: "myphpprocessor.php",
                    data: "Nb_var99=" + formID,
                })
                .done(function( recd_from_PHP ) {
                    //No need to put ANYTHING in here, but for eg, you can do:
                    //alert('In done fn...');

                    //AS AN EXAMPLE ONLY, display message sent from server side
                    //alert("PHP side said: " + recd_from_PHP);
                    $('#msg').html('<h2>Here is what the PHP side sent:</h2>' + recd_from_PHP);

                    //AS AN EXAMPLE ONLY, click the third tab...
                    //$('[id^=ui-id-3]').click(); //Warning, this will cause endless loop -- but just demonstrating
                });

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

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

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

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

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

        <form id="form-6" action="Tab_Click_v00.html" method="post">
            <input type="hidden" name="Nb_var99" value="6">
        </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>

    <div id="msg"></div>

</body>
</html>

服务器端： myphpprocessor.php（必须以 .php 结尾）

<?php

    $id = $_POST['Nb_var99'];

    if ($id == 4) {
        $msg = "Return of the Tab Four";
    }else{
        $msg = 'PHP side receieved: ' .$id;
    }

    echo $msg;

与往常一样，请对任何对您有帮助的答案进行投票，并选择正确的答案以在满意后关闭问题。

于 2013-09-24T17:36:33.463 回答
1

发布到隐藏<iframe>

我自己从来没有这样做过，并且可以看到它有点棘手。以下是一些讨论如何做到这一点的帖子：

你如何发布到 iframe？
隐藏的 iframe 提交
记得在 iframe 中指定 name=attr
Post 表单

您会注意到，这比我在前两个答案中建议的简单提交基本的 AJAX 表单要复杂得多。

我不确定为什么 AJAX 解决方案在您的情况下没有吸引力，但我记得 AJAX 和 PHP 对我来说是未知商品，也许这就是您正在努力解决的问题。

如果是这样，就不要再挣扎了。两者都比您意识到的要简单得多。

10 分钟 PHP 基础免费教程：
phpAcademy.org
thenewboston.com

接下来，这里有一些关于 AJAX 基础知识的好文章：

一个简单的例子

更复杂的例子

根据下拉列表 1 中的选择填充下拉列表 2

我的建议是使用 AJAX 解决方案，但我不明白您最终要达到什么目的。文件Tab_Click_v00.html将如何处理它收到的数据？

也许如果您提供更多关于期望最终结果的信息（作为本文下方的评论）Tab_Click，我可以提供更多帮助。

于 2013-09-24T17:58:42.427 回答