Question

我有一个ajax表单，用于处理数据而不刷新页面。一切正常，除了提交按钮没有动画，如果你使用ajax，这是一个问题。

我已经从这里尝试了一些建议来获得动画，但没有运气。

我的ajax脚本是;

$(document).ready(function() {
        $('#submitform').ajaxForm({
            target: '#error',
            success: function() {
            $('#error').fadeIn('slow');
            }
        });
    });

process.php看起来像这样;

<?php

if((strlen($_POST['fname']) < 1 )){

    if(strlen($_POST['amount']) < 1 ){
        $emailerror .= '<span>Kindly enter full name</span>';
    }

} else { ?>
<span>Thank You</span>
<?php } ?>

<?php echo $emailerror; ?>

形式是一种简单的形式;

<form id="submitform" action="process.php" method="post">
<input type="text" name="fname" placeholder="Full Name" />
<select name="values"><option value="1">Value 1</option></select>
<input type="submit" value="Send" />
</form>

当我点击提交时，表单将发送到process.php，并且在成功验证后，表单将被处理并显示感谢页面，否则将显示错误。我想要做的是，当用户点击提交时，提交按钮值应更改为“正在处理...”并被禁用。如果验证返回错误，则提交按钮应返回正常状态。

更新当我向表单添加选择输入时，下面的脚本将停止工作。

Answer 1

您唯一需要的是修改按钮本身，试试这个

$(document).ready(function() {
   var btnSubmit = $('#submitform');
   btnSubmit.ajaxForm({
     target: '#error',
     success: function() {
       $('#error').fadeIn('slow');
       btnSubmit.text("Send form"); // put your normal text
       btnSubmit.removeAttr("disabled");
     },
     error: function() {
       // enable and put the normal text in case of error
       btnSubmit.text("Send form"); // put your normal text
       btnSubmit.removeAttr("disabled");
     },
     beforeSend: function(){
        btnSubmit.text("Proccesing...");
        btnSubmit.attr("disabled", "disabled");
     }
   });
});

EDITED

很抱歉错误的帖子，我没有看到你的HTML标签，所以有你的HTML，请稍微修改你的标记，只需在你的提交按钮上添加一个ID，就像这样

<form id="submitform" action="process.php" method="post">
<input type="text" name="fname" placeholder="Full Name" />
<input id="submitterButton" type="submit" value="Send" />
</form>

然后你可以在JS部分使用。

$(document).ready(function() {
   var btnSubmit = $('#submitterButton');
   $('#submitform').ajaxForm({
     target: '#error',
     success: function() {
       $('#error').fadeIn('slow');
     },
     beforeSend: function(){
        btnSubmit.val("Proccesing...");
        btnSubmit.attr("disabled", "disabled");
     },
     complete: function(){
       btnSubmit.val("Send"); // put your normal text
       btnSubmit.removeAttr("disabled");
     }
   });
});

所以beforeSend将在ajax执行之前执行。

希望它可以解决您的问题。

Answer 2

下面的代码片段可以解决问题

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<form id="submitform" action="process.php" method="post">
<input type="text" name="fname" placeholder="Full Name" />
<input type="submit" value="Send" disabled="disabled" />
</form>

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

<script type="text/javascript">
	$(document).ready(function () {
		
		$('#submitform').submit(function (event) {
			event.preventDefault();
			$('input[type="submit"]').val('Processing...');
			$('input[type="submit"]').attr('disabled', true); //assuming that you have a CSS to do that.

			$.ajax({
				type: 'POST',
				data: $('submit').serialize(),
				url: $('submit').attr('action')
			}).done(function (result) {
				$('input[type="submit"]').val('Send');
				$('input[type="submit"]').attr('disabled', false); 
			}).fail(function (argument) {
				// handle faillure
			})

		});

	});
</script>

</body>
</html>

＆＃13;

更改ajax表单提交值并在onClick上显示状态

2 个答案: