在 twitter 引导向导中提交单个表单答案

【问题标题】：submit individual form in twitter bootstrap wizard在 twitter 引导向导中提交单个表单
【发布时间】：2015-07-03 05:36:23
【问题描述】：

我正在使用向导中的 twitter 引导程序，我想在向导中提交 4 个表单， http://vadimg.com/twitter-bootstrap-wizard-example/examples/basic-formvalidation.html#

下面是我每次按下下一个按钮时的代码，

       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);

            },

我有 5 个输入和 id=report_header_fm 的表单，

现在当我点击下一步时，我可以看到表单验证发生但表单没有被提交，注意-我没有点击提交按钮但有下一步按钮--

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

所以我想要的是在单击下一步时提交一个表单，这里在单击下一步时会发生验证但没有发生提交，我在控制台中看不到“test123”，

简而言之，如何在不点击提交按钮的情况下提交表单？

谢谢，

【问题讨论】：

标签： javascript jquery forms twitter-bootstrap formwizard

【解决方案1】：

以下是您可以在此处更改以使其正常工作的内容列表，希望如此。试试看。

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;
            }
 }

【讨论】：

非常感谢，它成功了，我只是从 If 条件中移除了 return false，因为它没有移动到向导的下一个选项卡，我没有使用 var Wizard，顺便说一句，再次感谢..
欢迎！支持和/或接受这个作为答案会很好。

【解决方案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;
        }
 }

【讨论】：

【解决方案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;
            }
 }

【讨论】：