简体   繁体   中英

AngularJS wait submit the Form (ng-submit)

I have one Form, In this I submit this form when it loads.

I want that when this page is load it waits for some number of seconds then it submit this form. I don't want to submit this form by using any button, It should be Auto Submit form. Is it possible?

My html page code is given below

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

My controller code is given below

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();
        }
    }])
]);

I am using AngularJS.

You could try the timeout service for Angular

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

Use $timeout method to call automatically submit for after specific interval

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

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

Maybe you can use $timeout or if you want do something else when this something end you submit, you can use otherwise Promises.

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

or

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

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

Like this .controller('appController', ['$rootScope', '$scope', '$state', '$window', 'globalService', 'dataServices', '$timeout', function ($rootScope, $scope, $state, $window, globalService, dataServices, $timeout)

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

A simple to use method would be to do this

In your View (HTML)- disable the submit button
<button ng-readonly="button_readonly" ng-disabled="button_disabled" name="Submit">SUBMIT</button>


In the controller, these values are originally set to false
$scope.button_readonly = false;
$scope.button_disabled = false;

because of angular data binding. you can then do your logic.
if logic returns successfully (whether ajax, or input validation etc, then you can set the above to true


on success:
Set to true
$scope.button_readonly = true;
$scope.button_disabled = true;

at this point: your button is now clickable. thus, it is ready to be pushed (submit) to php

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

To answer your question. Since you don't want to use the button add the hidden attribute to the button. Then periodically check to see if the values have changed. when they do, add the submit logic. ie. if button_readonly = true; submit

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM