更改AJAX表格提交价值和状态onClick

我有一个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，并且在成功验证后，处理表单并显示了感谢页面，显示了其他错误。我想做的是，当用户单击提交用户时，提交按钮值应更改为"处理..."并被禁用。如果验证返回错误，则提交按钮应返回正常状态。

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

您唯一需要的是修改按钮本身，尝试以下

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

编辑

对不起，对于错误的帖子，我没有看到您的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执行之前执行。

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

下面的摘要做技巧

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

相关内容

最新更新

热门标签：