jquery - 在提交按钮上将文本更改回默认值

Question

所以我可以在提交后更改提交按钮上的文本。就像从“发送消息”一样，提交后它将变为“已发送”。几秒钟后是否可以将文本返回到“发送消息”？表单在 AJAX 中处理。

谢谢！

Answer 1

假设您有一个表单，其 id 为ajax-form，该表单中的输入字段具有 id:form-input和 name: title，以及一个 id 为 的提交按钮submit-btn。现在，让我们把 ajax 作为打击：

var ajaxForm   = $('#ajax-form'),
    submitBtn  = ajaxForm.find('#submit-btn');
ajaxForm.on('submit', function(e) {
  e.preventDefault();
  $.ajax({
    type: 'POST',
    url: ajaxForm.prop('action'),
    data: {
      title: ajaxForm.find('input').val()
    },
    dataType: 'json',
    beforeSend: function() {
      submitBtn.text('Send message');
    },
    success: function() {
      submitBtn.text('Sent');
    },
    complete: function() {
      setTimeout(function() {
        submitBtn.text('Send message'); // Change it back after 4 seconds
      }, 4000);
    }
  });
});

您可能需要添加错误处理程序。有关更多信息，请参阅 jQuery AJAX 文档： http ://api.jquery.com/jQuery.ajax/

希望这可以帮助你。:)