更改 ajax 表单提交值和状态 onClick答案

【问题标题】：Change ajax form submit value and state onClick更改 ajax 表单提交值和状态 onClick
【发布时间】：2017-08-29 16:45:50
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery ajax forms submit

【解决方案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");
     }
   });
});

已编辑

抱歉发错了，我没有看到你的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 执行之前执行。

希望它能解决你的问题。

【讨论】：

嘿 Johuder，thanxxx 为我所做的努力，但是当我点击提交按钮时，整个表单消失了，只显示了“发送表单”。
当您说修改按钮本身时，您是什么意思？ @Johuder
@JaySmoke 抱歉回答晚了，我在发布示例时犯了一个错误，我没有查找您给我们的 HTML 标签，在这种情况下，请让我编辑我的帖子给您是一个更好的答案，当我提到修改提交按钮本身时，我的意思是您必须更改提交按钮的文本和禁用状态。
嗨@Johuder 我遇到了一个错误，我不确定是什么原因造成的，但是当有一个选择输入字段时，整个脚本不起作用。
@JaySmoke 你好，请你发布你当前的代码来帮助你:)

【解决方案2】：

下面的 sn-p 可以解决问题

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

【讨论】：

嗨 Luiz，thanxxx 为我付出的努力，但是当我点击提交时，它会变为处理中......就是这样。未处理该表单。
其实我不懂PHP，所以服务器端可能有错误。你实现了失败处理函数吗？开发工具是否显示了什么？
而且不是很熟悉javascripting 呵呵，你在失败处理程序中放了什么？
几乎任何东西，通常一个警报功能就足够了w3schools.com/jsref/met_win_alert.asp