提交表单后如何使用“加载”更改按钮文本，以及在提交角度后如何重置表单

Question

 var app = angular.module('snc', []); app.controller('contactForm', function($scope, $http) { $scope.user = {}; $scope.submitForm = function() { $http({ method: 'POST', url: 'php-form/form.php', data: $scope.user, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) .success(function(data) { console.log(data); if (!data.success) { if ($scope.errorName = data.errors.name) { $(".alert-set").removeClass('alert-danger'); $(".alert-set").removeClass('alert-success'); $(".alert-set").fadeIn(1000); $(".alert-set").removeClass("hide"); $(".alert-set").fadeOut(5000); $(".alert-set").addClass('alert-warning'); $(".Message-txt").text(data.errors.name); } else if ($scope.errorMobile = data.errors.mobile) { $(".alert-set").removeClass('alert-danger'); $(".alert-set").removeClass('alert-success'); $(".alert-set").fadeIn(1000); $(".alert-set").removeClass("hide"); $(".alert-set").fadeOut(5000); $(".alert-set").addClass('alert-warning'); $(".Message-txt").text(data.errors.mobile); } else if (data.errors.email == 'fail') { $(".alert-set").removeClass('alert-danger'); $(".alert-set").removeClass('alert-success'); $(".alert-set").fadeIn(1000); $(".alert-set").removeClass("hide"); $(".alert-set").fadeOut(5000); $(".alert-set").addClass('alert-warning'); $(".Message-txt").text('Sorry, Failed to send E-mail.'); } else { $(".alert-set").removeClass('alert-warning'); $(".alert-set").removeClass('alert-success'); $(".alert-set").fadeIn(1000); $(".alert-set").removeClass("hide"); $(".alert-set").fadeOut(5000); $(".alert-set").addClass('alert-dnager'); $(".Message-txt").text('somthing went wrong please try again.'); } } else { $(".alert-set").removeClass('alert-danger'); $(".alert-set").removeClass('alert-warning'); $(".alert-set").fadeIn(1000); $(".alert-set").removeClass("hide"); $(".alert-set").fadeOut(5000); $(".alert-set").addClass('alert-success'); $(".Message-txt").text(data.message); this.submitForm = {}; } }); }; }); 

 <form name="queryForm" ng-submit="submitForm()" novalidate> <div class="form-group"> <label for="Name">Name:<span class="text-danger">*</span></label> <input type="text" class="form-control" ng-model="user.name" id="name" placeholder="Enter Your Name"> </div> <div class="form-group"> <label for="Mobile">Mobile:<span class="text-danger">*</span></label> <input type="number" class="form-control" ng-model="user.mobile" id="mobile" placeholder="Enter Your Mobile Number"> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" ng-model="user.email" id="email" placeholder="Enter Your Email"> </div> <div class="form-group"> <label for="Message">Message:</label> <textarea type="text" class="form-control" ng-model="user.message" id="name" placeholder="Enter Your Message" rows="4"></textarea> </div> <button type="submit" class="btn btn-snc">Submit</button> <div class="alert alert-dismissible alert-set"> <strong class='Message-txt'></strong> </div> </form> 

I have a simple contact form it has to send query data to php page and I want to disable button and change button text after submitting form and also full form reset after submit. I tried but I always get some type of angular error. Can you help me to solve it and if you are a Angular Developer then can you please check this form and let me know if I need to change something.

Answer 1

An assignation is not a comparison:

$scope.errorName = data.errors.name ;

… is an assignation which means: put the data.errors.name into the $scope.errorName variable.

$scope.errorName == data.errors.name 

… is a comparison which means: data.errors.name is equal to $scope.errorName .

If you use an assignation instead of a comparison, the result will always be true as long as the value is true-like.

So:

if ( a = 1 ) { /* always true */ }

if ( a == 1 ) { /* true only if `a` is equal to 1 */

if ( a === 1 ) { /* true only if `a` is strictly equal to 1 */

if ( a = "false" ) { /* always true (a string not empty is true) */ }

if ( a == "false" ) { /* true only if `a` is equal to "false" */

if ( a === "false" ) { /* true only if `a` is strictly equal to "false" */

The strictly above means of the same type . For instance:

1 == "1"  // => true

1 === "1" // => not true. The Former is a Number, the latter is 
          //    a String.

Answer 2

To reset the form, you could use something like:

(Mind: you've got two name ID. An ID should be UNIQ on your page).

 function onSubmit() { $('#submit_button').text('Loading…'); resetForm(); } function resetForm() { for(let id of ['name','mobile','email', 'message']) { $("#"+id).val(''); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="queryForm" ng-submit="submitForm()" novalidate> <div class="form-group"> <label for="Name">Name:<span class="text-danger">*</span></label> <input type="text" class="form-control" ng-model="user.name" id="name" placeholder="Enter Your Name"> </div> <div class="form-group"> <label for="Mobile">Mobile:<span class="text-danger">*</span></label> <input type="number" class="form-control" ng-model="user.mobile" id="mobile" placeholder="Enter Your Mobile Number"> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" ng-model="user.email" id="email" placeholder="Enter Your Email" value="some text"> </div> <div class="form-group"> <label for="Message">Message:</label> <textarea type="text" class="form-control" ng-model="user.message" id="message" placeholder="Enter Your Message" rows="4">Some text</textarea> </div> <button id="submit_button" type="button" class="btn btn-snc" onclick="onSubmit()">RESET FORM</button> <div class="alert alert-dismissible alert-set"> <strong class='Message-txt'></strong> </div> </form> 

Answer 3

You should avoid the typo like:

$(".alert-set").addClass('alert-dnager');

To avoid it, try to keep your code as clean as possible. You'll be able to avoid a lot of errors, you'll have a better understanding of your code, and other people can help you more efficiency.

Your if error statement could become:

.success(function(data) {
  console.log(data);
  if ( false === data.success) {

    // Typo error avoiding: NOT plain-text USE variables
    let alertClass = '.alert-set';
    let errMessage = '' ;

    // Reduce the amount of code
    $(alertClass)
     .addClass('alert-warning')
     .removeClass('alert-success')
     .fadeIn(1000)
     .removeClass("hide")
     .fadeOut(5000)
     .removeClass('alert-danger') ;

    // Treat only what you have to treat
    // You could use a lambda function, too:
    //   let errMessage = function(val){ return ... }(actual value);

    if ( $scope.errorName == data.errors.name )
    {
      errMessage = data.errors.name ;
    } 
    else if ( $scope.errorMobile == data.errors.mobile )
    {
      errMessage = data.errors.mobile ;
    } 
    else if (data.errors.email == 'fail')
    {
      errMessage = 'Sorry, Failed to send E-mail.';
    } 
    else {
      errMessage = 'somthing went wrong please try again.' ;
    }

    // Only one action
    $(".Message-txt").text(errMessage) ;

Now we can work ;-).

Keep in mind that we don't want to help you if your code is not clean and if we can't understand at a first glance what's going on.