AngularJS等待提交表格(ng-submit)

时间:2017-07-19 12:45:02

标签: javascript jquery angularjs forms

我有一个表单,在此我加载时提交此表单。

我想要在加载此页面时等待几秒钟然后提交此表单。 我不想使用任何按钮提交此表单,它应该是自动提交表单。有可能吗?

我的html页面代码如下所示

<form name="main" ng-submit="submitForm(main_1)">
    <table align="center">
        <tr>
            <td>First Name :</td>
            <td>
                <input type="text" id="txtFirstname" name="txtFirstname" ng-model="verifyData.firstName" /></td>
            <td>Middle Initial :</td>
            <td>
                <input type="text" id="txtMiddlename" name="txtMiddlename" ng-model="verifyData.middleInitial" /></td>
        </tr>
    </table>
    <img src="images/loader.gif" id="loading-image" ng-if="showLoader">
    <div id="load1" ng-if="showLoader"></div>
</form>

我的控制器代码如下所示

angular.module(appConfig.appName)
    .controller('appController', ['$rootScope', '$scope', '$state', '$window', 'globalService', 'dataServices', function ($rootScope, $scope, $state, $window, globalService, dataServices) {
        $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
            window.history.forward();
        });

        $scope.showLoader = false;
        var firstName = document.getElementById('txtFirstname');
        if (firstName != null) {
            var lastName = document.getElementById('txtLastname');
        }

        $scope.submitForm = function () {
            $scope.showLoader = true;
            dataServices.verifyData($scope.verifyData).then(function (response) {
                $state.go(response.redirectURL);
            }, function (res) {
                $rootScope.serviceErrorMsg = res.error;
                $state.go(res.redirectURL);
            });
        }

        if ($scope.verifyData) {
            $scope.submitForm();
        }
    }])
]);

我正在使用AngularJS。

6 个答案:

答案 0 :(得分:0)

您可以尝试Angular的超时服务

$timeout(function () {
        $scope.submitForm();
    }, 2000);

答案 1 :(得分:0)

使用$ timeout方法在特定时间间隔后自动提交

$timeout( function(){
        // call submitform method
    }, 5000 );

答案 2 :(得分:0)

使用$ timeout在控制器初始化后2秒后提交表单: $timeout($scope.submitForm, 2000)

答案 3 :(得分:0)

也许你可以使用$ timeout,或者当你提交这个东西时你想做别的事情,你可以使用其他Promise。

$timeout( function(){ // code }, 3000 );

Some_Function().then(function(){ //YourCode });

答案 4 :(得分:0)

Write the code in $timeout (Note :- Just Insert $timeout as a dependency otherwise it will give error)

喜欢这个 .controller(&#39; appController&#39;,[&#39; $ rootScope&#39;,&#39; $ scope&#39;,&#39; $ state&#39;,&#39; $ window&# 39;,&#39; globalService&#39;,&#39; dataServices&#39;,&#39; $ timeout&#39;,function($ rootScope,$ scope,$ state,$ window,globalService,dataServices,$超时)

For example :- 
$scope.submitForm = function () {
            $scope.showLoader = true;
            dataServices.verifyData($scope.verifyData).then(function (response) {
                $state.go(response.redirectURL);
            }, function (res) {
                $rootScope.serviceErrorMsg = res.error;
                $state.go(res.redirectURL);
            });
        }
$timeout(function(){
 $scope.submitForm();
}, 5000);

答案 5 :(得分:0)

一个简单易用的方法就是执行

在您的视图(HTML)中-禁用“提交”按钮
<button ng-readonly="button_readonly" ng-disabled="button_disabled" name="Submit">SUBMIT</button>


在控制器中,这些值最初设置为false
$scope.button_readonly = false;
$scope.button_disabled = false;

因为角度数据绑定。然后你可以做你的逻辑。
如果逻辑成功返回(无论是ajax还是输入验证等),则可以设置 以上为真


成功:
设置为true
$scope.button_readonly = true;
$scope.button_disabled = true;

此时:您的按钮现在可以单击。因此,可以将其推送(提交)到php

在php中
if(isset($_POST['Submit'])){
 //do your thing
}

回答您的问题。由于您不想使用按钮 将hidden属性添加到按钮。然后定期检查是否 值已更改。当他们这样做时,添加提交逻辑。即。如果button_readonly = true;提交