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

Question

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

检查下面的图片

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

下面是我的代码

我的下一个标签函数的 Javascript

 $('.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() 阻止按钮上的默认表单事件。