如何使用'加载'更改按钮文字提交表格后,以角度提交后重置表格

时间:2017-10-28 04:20:33

标签: javascript jquery angularjs forms



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>
&#13;
&#13;
&#13;

我有一个简单的联系表单,它必须将查询数据发送到php页面,我想在提交表单后禁用按钮并更改按钮文本,并在提交后重置完整表单。我试过,但我总是得到某种类型的角度误差。你能帮我解决一下吗?如果你是Angular开发人员,那么请你查一下这个表格,告诉我是否需要改变一些东西。

3 个答案:

答案 0 :(得分:1)

分配不是比较:

$scope.errorName = data.errors.name ;

...是一项分配,意思是:将data.errors.name放入$scope.errorName变量。

$scope.errorName == data.errors.name 

...是一种比较,表示:data.errors.name等于$scope.errorName

如果使用赋值而不是比较,只要值为真,结果将始终为真。

所以:

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" */

上面的严格表示相同类型的 。例如:

1 == "1"  // => true

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

答案 1 :(得分:1)

要重置表单,您可以使用以下内容:

(介意:您已经有两个name ID。您的网页上的ID应该是UNIQ。

&#13;
&#13;
function onSubmit()
{
  $('#submit_button').text('Loading…');
  resetForm();
}

function resetForm()
{
  for(let id of ['name','mobile','email', 'message'])
  {
    $("#"+id).val('');
    
  }
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

你应该避免这样的拼写错误:

char b[2][10];
strcpy(b[0], "banana");
strcpy(b[1], "apple");
printf("%s", *(b+1));

为避免这种情况,请尽量保持代码清洁。您将能够避免许多错误,您将更好地理解您的代码,而其他人可以帮助您提高效率。

您的$(".alert-set").addClass('alert-dnager'); 声明可能会变为:

if error

现在我们可以工作了; - )。

请注意,如果您的代码不干净且我们无法理解乍看之下发生了什么,我们不想帮助您。