在twitter bootstrap向导中提交个人表单

Question

I am using twitter bootstrap from wizard, and i want to submit 4 form in wizard, http://vadimg.com/twitter-bootstrap-wizard-example/examples/basic-formvalidation.html#

Below is my code on each next button press,

       onNext: function (tab, navigation, index) {
        if(index == 1) {
            if(form_header.valid() === true) {

                    $('#report_header_fm').submit(function(){
                    console.log('test123');
                    $.ajax({
                        type: "POST",
                        url: baseURL + "index.php/addNewReport",
                        data: $("#report_header_fm").serialize(),
                        success: function(data)
                        {
                            console.log('test');
                        }

                        });  //Ajax end
                });

                }
            else
            {
                 return false;
            }
            }
            handleTitle(tab, navigation, index);

            },

I have form with 5 inputs and id=report_header_fm,

Now when i click on next, i can see form validation occurs but form does not get submitted, Note- I am not clicking on submit button but there is next button--

<input type="submit" class="btn green-haze" value="Save">

So what i want is to submit a form when clicked on next, here validation occurs when click on next but submit is not happening, I could not see 'test123' in console,

In short, how do i submit form without hitting submit button?

Thanks,

Answer 1

Here is a list of things you can change here to make it work, hopefully. Try it out.

onNext: function (tab, navigation, index) {
        var wizard = this;
        if(index == 1) {
            if(form_header.valid() === true) {
                    //below line are not needed, so comment it out 
                    //$('#report_header_fm').submit(function(){
                    console.log('test123');
                    $.ajax({
                        type: "POST",
                        url: baseURL + "index.php/addNewReport",
                        data: $("#report_header_fm").serialize(),
                        success: function(data)
                        {
                            console.log('test');
                            //At this point you will need to call the show method with index of tab you want to move to.
                            wizard.show(2);
                        }

                        });  //Ajax end
                //});
                  // this would run before the ajax completes
                  return false;
            } else {
                 return false;
            }
 }

Answer 2

onNext: function (tab, navigation, index) {
    if(index == 1) {
        if(form_header.valid() === true) {
                $.ajax({
                    type: "POST",
                    url: baseURL + "index.php/addNewReport",
                    data: $("#report_header_fm").serialize(),
                    success: function(data)
                    {
                        console.log('test');
                        this.show(2);
                    }

                    });
        } else {
             return false;
        }
 }

Answer 3

onNext: function (tab, navigation, index) {
                if(index == 1) {
            if(form_header.valid() === true) {

                    console.log('test123');
                    $.ajax({
                        type: "POST",
                        url: baseURL + "index.php/addNewReport",
                        data: $("#report_header_fm").serialize(),
                        success: function(data)
                        {
                            console.log('test');
                           //index of tab 
                           // this will move to next tab only after getting successful response    
                           $('#rootwizard').bootstrapWizard('show',1);
                        }

                        });  //Ajax end

                 //required so that control does not move to next tab unless response is fetched
                  return false;
            } else {
                 return false;
            }
 }