禁用页面刷新并单击“提交”时转到下一个选项卡

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了禁用页面刷新并单击“提交”时转到下一个选项卡相关的知识,希望对你有一定的参考价值。

我的页面有导航标签,每个导航标签内容都有一个下一步按钮。

检查下面的图片

enter image description here

当您单击下一个按钮时,表单将被保存并转到下一个选项卡,但问题是页面将刷新,因此结果是选项卡将返回到第一个。我该如何解决这个问题?

这是我下面的代码

我的javascript for Next选项卡功能

 $('.btnNext').click(function(){
    $('.nav-tabs > .active').next('li').find('a').trigger('click');
    });

我的ajax提交

  function( data ) {
            if(data.success == true)
            {
                $('#property-submition').addClass("confirmed");
                $('#property-submition').submit();
            }
            else if(data.exists == true)
            {
                // check if same property exists in database
                $('#ajax-indicator-1').hide();
                $('#property-submition').removeClass("confirmed");

                // Show message that this property already exists
                alert("<?php _l("Property already exists"); ?>");
            }........

我的提交表格代码

<?php echo form_open(NULL, array('class' => 'form-horizontal form-estate', 'role'=>'form', 'id'=>'property-submition'))?>   
........
.....
...
..

<?php echo form_submit('', lang('Next'), 'a class="btn btn-primary btnNext"')?>
答案

使用event.preventDefault()防止按钮上的默认表单事件。

以上是关于禁用页面刷新并单击“提交”时转到下一个选项卡的主要内容,如果未能解决你的问题,请参考以下文章

仅在第一次获取数据时转到 TabbedForm 中的选项卡

转到不同页面链接上的特定选项卡单击并切换活动类

如何禁用转到下一个字段并在 Android 上的 keyCode == “enter” (13) 上提交表单

单击选项卡时如何阻止页面提交?

是啥导致用户在提交表单时转到新页面,可以在 JavaScript 中完成吗?

使用 Jsoup 抓取网页时转到下一页