发送操作后更改按钮的背景颜色（单击后）

Question

你好，我有一个联系表，我想用 PHP 来做。我有提交按钮，我想在所有字段都准备好按下时，在发送电子邮件时更改我的按钮。我的按钮中的第一个是背景颜色为黄色的文本，文本是“发送”。当我按下按钮并发送电子邮件时，我想将背景颜色更改为红色，并且我想在文本旁边添加一个图标，文本在“已发送”中进行了修改。我该怎么做？

Answer 1

<script src="jquery.min.js"></script>

<script >
 function button(){
    //your ajax code for sending data  
  /*  function retrieveData(){
        $.post('server.php',{}, function(data){ 
   });*/

   $("#button").attr('value', 'Sent');
   $("#button").css("background-color","red")
}
</script>

<input type="button" id="button" name="button" value="Send" onclick="button()">

试试这个。你可以用javascript来做。

Answer 2

您有一个带有一些输入和一个提交按钮的表单。

您希望在填写完所有表单字段后操作提交按钮，并最终在单击提交按钮后再次操作它。

您需要做的是编写一些 javascript（普通香草或 jQuery，选择最适合您的）来处理表单中的两件事

1. 表单的输入字段（用于首次提交按钮更改）： 将事件附加到输入字段以根据需要检查验证，并相应地更改提交按钮。
2. 表单的提交按钮（用于第二次提交按钮更改）： 将点击事件附加到提交按钮（并确保阻止默认设置，因此一旦提交按钮被点击，它将以您希望的方式进行操作。

我给你写了一个例子，在我的场景中，我的表单中有两个输入和一个提交按钮，默认情况下它是禁用和灰色的。 一旦填写了所有表单字段（非空），提交按钮就会变为活动状态（禁用属性删除和颜色更改） - 最后，当单击提交按钮时，它会将其颜色更改为绿色，以表明它被点击了。

$('#myForm input').on('keyup',function(){
    var validated = true;
    $('#myForm input').each(function(){
        if($(this).val() === ''){
        validated = false;
    }
    });
    if(validated){
      $('#submitBtn').removeClass('disabled').prop('disabled',false);
    }else{
      $('#submitBtn').addClass('disabled').prop('disabled',true);
    }
});

$('#submitBtn').on('click',function(e){
    e.preventDefault();
    e.stopImmediatePropagation();
    $(this).addClass('submited').prop('disabled',true);

    // the rest of your code for submission..
 });

下面是一个简单的完整工作示例： https://jsfiddle.net/wx9gonrh/

当然，您可以使用此示例并根据自己的需要对其进行修改，或者以此为指导从头开始编写自己的示例。

在您的情况下，您可能希望仅在电子邮件成功发送后才合并一个异步方法来更改提交按钮（例如，ajax 完成\完成事件）

希望对你有帮助！