javascript - 在 Twitter Bootstrap 向导中提交个人表单

Question

我正在使用向导中的 twitter bootstrap，我想在向导中提交 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”，

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

谢谢

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