文章/答案/技术大牛

发布

社区首页 >问答首页 >如何防止在提交表单后恢复到以前的选项卡

问如何防止在提交表单后恢复到以前的选项卡
EN

Stack Overflow用户

提问于 2013-09-23 20:51:58

回答 4查看 1.5K关注 0票数 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风格？？我会继续努力。

html

javascript

jquery

回答 4

Stack Overflow用户

回答已采纳

发布于 2013-09-24 17:36:33

这个答案还使用AJAX。我将发布另一个例子，回应您的要求，获得更多关于隐藏的iframe想法的信息。

注意，当您从Tab单击到tab时，用户仍然在选项卡上。

只需复制/粘贴到两个文件：

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;

票数 1

Stack Overflow用户

发布于 2013-09-23 21:31:16

对于您想做的事情，根本不需要使用<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> )是在页面上创建一个隐藏的<iframe>，其中包含Tab_Click_v00.html页面--然后发布到该页面。

因为表单的目标已经在<iframe>中的页面上，所以当前页面不应该再填充。而且由于<iframe>是隐藏的，用户不应该看到任何不寻常的东西。

票数 2

Stack Overflow用户

发布于 2013-09-23 20:58:31

在使用jQuery Tabs控件的情况下，您可以使用window.location.hash并绑定到load事件(并使用active选项显示适当的选项卡)：

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18968632

复制

相似问题

问如何防止在提交表单后恢复到以前的选项卡
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止在提交表单后恢复到以前的选项卡EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止在提交表单后恢复到以前的选项卡
EN