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

时间:2014-03-26 02:47:41

标签: jquery ajax forms submit submit-button

所以我可以在提交后更改提交按钮上的文字。喜欢发送消息'它将成为发送的#39;提交后。是否可以将文本返回“发送消息”。几秒钟后?表单在AJAX中处理。

谢谢!

1 个答案:

答案 0 :(得分:1)

我们假设您的表单的ID为ajax-form,该表单中的输入字段的ID为form-input,名称为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/

希望这可以帮到你。 :)