Question

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

以下是每次按下按钮的代码，

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

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

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

<div ng-repeat="Event.ParticipantPledge in Event.dataArray track by $index">
    <div>
    <span ng-if="item.Id != Event.ParticipantPledge.Id">{{item.PaymentReceived | currency}}</span>
    <input type="number" ng-if="item.Id == Event.ParticipantPledge.Id" name="paymentReceived" ng-bind="Event.ParticipantPledge.PaymentReceived" required />
    <button onclick="updateValue($index,updatedValue)">Update</button>
</div>
</div>



updateValue(id,value){
    $scope.Event.dataArray[id].ParticipantPledge.PaymentReceived = value;
}

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

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

谢谢，

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

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

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

3 个答案: