如何在提交表单后使用“加载”更改按钮文本并在以角度提交后重置表单
Posted
技术标签:
【中文标题】如何在提交表单后使用“加载”更改按钮文本并在以角度提交后重置表单【英文标题】：how to change button text with 'Loading' after submit form and reset form after submit in angular 【发布时间】：2018-04-09 17:14:29 【问题描述】：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>我有一个简单的联系表单，它必须将查询数据发送到 php 页面，我想在提交表单后禁用按钮和更改按钮文本，并在提交后重置完整表单。我试过了，但我总是遇到某种角度错误。您能帮我解决这个问题吗？如果您是 Angular 开发人员，请查看此表单，如果我需要更改某些内容，请告诉我。
【问题讨论】：
请也写下你的 angularjs 错误 提交后无法更改提交按钮文本并在提交表单时重置 正如@PrashantPokhriyal 所说，write your angularjs error，不要解释出了什么问题;-)。返回的错误消息究竟是什么？
你知道$scope.errorName = data.errors.name（赋值）和$scope.errorName == data.errors.name（比较）不一样吗？
【参考方案1】：
要重置表单，您可以使用以下内容：
（注意：您有两个name ID。ID 应该是您页面上的 UNIQ）。
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>【讨论】：
哦，这太容易了，谢谢各位。但是加载按钮呢..？ 非常感谢。这对你很有帮助【参考方案2】：分配不是比较：
$scope.errorName = data.errors.name ;
... 是一个赋值，意思是：将data.errors.name 放入$scope.errorName 变量中。
$scope.errorName == data.errors.name
... 是一个比较，意思是：data.errors.name 等于 $scope.errorName。
如果您使用赋值而不是比较，只要该值类似于 true，结果将始终为 true。
所以：
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.
【讨论】：
好的，我改了。但是我如何在提交后重置完整表单 帮助我们为您提供帮助。您能否将console.log(data) 添加到您的答案中，以便我们查看错误是什么？
现在它已修复，我的表单现在运行良好。但我找不到关于更改按钮文本和重置表单的任何答案。【参考方案3】：
你应该避免这样的错字：
$(".alert-set").addClass('alert-dnager');
为避免这种情况，请尽量保持代码干净。您将能够避免很多错误，您将更好地理解您的代码，并且其他人可以帮助您提高效率。
您的if error 声明可能变为：
.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) ;
现在我们可以工作了;-)。
请记住，如果您的代码不干净，或者我们无法第一眼了解发生了什么，我们不想为您提供帮助。
【讨论】：
是的，非常感谢您的建议，但我想在提交后重置表单。并在提交表单时显示加载... 我已经尝试过这段代码，我正在使用角度，当我使用该代码时，它会在提交表单之前显示加载。 对不起@DeepakSaini，我已经尽力了，现在我不得不离开了。勇气！以上是关于如何在提交表单后使用“加载”更改按钮文本并在以角度提交后重置表单的主要内容，如果未能解决你的问题，请参考以下文章