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

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，验证成功后，表单被处理并显示感谢页面，否则显示错误。我想要做的是，当用户点击提交时，提交按钮的值应该变为 'processing...' 并被禁用。如果验证 return 出错，提交按钮应该 return 到正常状态。

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

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

已编辑

对不起 post，我没有看到你的 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

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

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

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

Change ajax form submit value and state onClick

javascript

forms

ajax

jquery

submit