0

I have nav-tabs for my page and for each nav-tab contents I have a Next button.

Check my image below

enter image description here

When you click next button the form will be save and go to next tab but the problem is the page will refresh so the result is the tab will go back to the first one. How can I fix this problem??

Here's my code below

my Javascript for Next tab functions

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

My ajax for submit 

  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"); ?>");
            }........

My submit form Code

<?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"')?>
Carlvic Lim
  • 237
  • 1
  • 14
  • You form is submitted with an ajax request ? – Mosè Raguzzini Dec 19 '17 at 13:17
  • 2
    Possible duplicate of [jQuery AJAX submit form](https://stackoverflow.com/questions/1960240/jquery-ajax-submit-form) – Vipin Kumar Dec 19 '17 at 13:17
  • Yes, I'm using ajax but the problem is my page keep refresh when i click next – Carlvic Lim Dec 19 '17 at 13:37
  • @CarlvicLimIt is up to you the design the HTML, such that after successfully submitting the data, the current form is hidden and the new form is shown. I'm guessing in your case the current form is cleared, and that `div` is making way for new form's markup. – Kumar_Vikas Dec 19 '17 at 13:44
  • @VipinKumar Why duplicate? I use ajax in my form same as link and my problem is my page will refresh when click next submit form. – Carlvic Lim Dec 19 '17 at 13:50
  • @Kumar_Vikas All on the tab contents are in one form , I just want to save the query on first tab when you click next button. – Carlvic Lim Dec 19 '17 at 13:53

1 Answers1

0

Prevent default form events on the button using event.preventDefault().

Fryderyk
  • 1
  • 1
  • Thankyou for this. I apply this one but the is problem It will not submit the form. I want to do submit then go to the next tab – Carlvic Lim Dec 19 '17 at 13:57
  • If you use `event.preventDefault() `, the form won't be submitted unless you do it in JavaScript... – Sébastien Dec 19 '17 at 13:59
  • You can submit the form using Javascript then through adding the ajax request into the function fired on the button onclick event set by `element.addEventListener()`. In most cases, that's what you actually need -- the default form submission expects the server to return a new page by default, thus redirecting you. Check out documentation for XMLHttpRequest / jQuery $.ajax / fetch() / axios, depending on your preferences. – Fryderyk Dec 22 '17 at 13:40