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

Question

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

检查下面的图片

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

这是我下面的代码

我的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"')?>

Answer 1

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