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

时间:2017-12-19 13:14:50

标签: javascript jquery html css tabs

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

查看我的图片

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

1 个答案:

答案 0 :(得分:0)

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