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

我有一个Ajax表单，用于处理数据而无需刷新页面。一切正常，除了提交按钮不动画，如果你使用Ajax是一个问题。更改ajax表单提交值和状态onClick

我已经尝试了几个建议，从这里的方法得到它动画，但没有运气。

我的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和验证成功后，表格处理和显示感谢您网页其他显示错误。我想要做的是，当用户点击提交时，提交按钮的值应该变为'正在处理...'并被禁用。如果验证返回错误，则提交按钮应该返回到正常状态。

更新： 当我添加一个选择输入到窗体，下面的脚本停止工作。

来源

2017-08-29 Jay Smoke

你需要的仅仅是修改按钮本身，试试这个

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

so beforeSend将在ajax执行之前执行。

希望它能解决您的问题。

来源

2017-08-29 17:01:36

哎Johuder，thanxxx的努力mehn，但是当我点击提交按钮，整个窗体消失，只有“发送表单“显示。 –

当你说修改按钮本身时，你是什么意思？ @Johuder –

@JaySmoke对于迟到回复抱歉，我在发布我的示例时犯了一个错误，我没有寻找您给我们的HTML标签，在这种情况下，请让我编辑我的帖子以给出更好的答案，当我参考修改提交按钮本身时，我的意思是你必须改变提交按钮的文本和禁用状态。 –

下面的代码片段的伎俩

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <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"> 
 
\t $(document).ready(function() { 
 
\t \t 
 
\t \t $('#submitform').submit(function (event) { 
 
\t \t \t event.preventDefault(); 
 
\t \t \t $('input[type="submit"]').val('Processing...'); 
 
\t \t \t $('input[type="submit"]').attr('disabled', true); //assuming that you have a CSS to do that. 
 

 
\t \t \t $.ajax({ 
 
\t \t \t \t type: 'POST', 
 
\t \t \t \t data: $('submit').serialize(), 
 
\t \t \t \t url: $('submit').attr('action') 
 
\t \t \t }).done(function (result) { 
 
\t \t \t \t $('input[type="submit"]').val('Send'); 
 
\t \t \t \t $('input[type="submit"]').attr('disabled', false); 
 
\t \t \t }).fail(function (argument) { 
 
\t \t \t \t // handle faillure 
 
\t \t \t }) 
 

 
\t \t }); 
 

 
\t }); 
 
</script> 
 

 
</body> 
 
</html>

来源

2017-08-29 17:06:58

嗨Luiz，thanxxx的努力，但是当我点击提交时，它变成Processing ...就是这样。表单未处理。 –

实际上，我不知道PHP，所以在服务器端可能会出现错误。你是否实现了失败处理函数？开发工具是否显示了某些内容？ –

我真的不熟悉javascripting hehe，你在失败处理程序中放置了什么？ –

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

回答

相关问题