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

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

我从这里尝试了几种方法来让它变得生动，但没有运气

我的ajax脚本是

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

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>

值1

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

更新：

---

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

您只需要修改按钮本身，请尝试以下操作

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

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

---

希望它能解决您的问题。

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

$（文档）.ready（函数（）{
$（“#submitform”）.submit（函数（事件）{
event.preventDefault（）；
$（'input[type=“submit”]'）.val（'Processing…'）；
$（'input[type=“submit”]”）。attr（'disabled'，true）；//假设您有一个CSS来执行此操作。
$.ajax({
键入：“POST”，
数据：$（'submit'）。序列化（），
url:$（'submit'）.attr（'action'））
}).完成（功能（结果）{
$（'input[type=“submit”]'）.val（'Send'）；
$（'input[type=“submit”]”）。attr（'disabled'，false）；
}).fail（函数（参数）{
//柄钩
})
});
});

hey Johuder，thanxxx谢谢你的努力，但是当我点击提交按钮时，整个表单消失，只显示“发送表单”。当你说修改按钮本身时，你是什么意思@Johuder@JaySmoke很抱歉回答晚了，我在发布我的示例时犯了一个错误，我没有查找您提供给我们的HTML标记，如果是这样的话，请让我编辑我的帖子，给您一个更好的答案，当我提到修改提交按钮本身时，我的意思是您必须更改提交按钮的文本和禁用状态。您好@Johuder我遇到了一个错误，我不确定是什么导致了它，但当有一个选择输入字段时，整个脚本无法工作。@JaySmoke您好，请发布您当前的代码以帮助您：）您好Luiz，thanxxx的努力，但当我点击提交，它改变为处理。。。就这样。表单没有被处理。实际上我不知道PHP，所以可能服务器端有错误。您是否实现了失败处理函数？开发工具展示了什么吗？我对javascripting不是很熟悉。呵呵，你在fail处理程序中放了什么？几乎所有的东西，通常一个警报函数就足够了

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