使用JQuery延迟表单提交

时间:2016-07-27 10:30:56

标签: javascript jquery forms

我正在尝试延迟我的表单提交,以便在输入有效信息时弹出一个警告,告诉用户他们的信息已被记录。然后页面应该在提交表单之前等待X秒。

我设法让警报弹出窗口与我的其他表单一起使用但由于某种原因它不能使用这个。

我将在下面包含我的JQuery代码,任何想法?

由于

这是形式的代码:

$('#addprebooked_form').submit(function(e) {

		if ($('#addprebooked_email').val() != $('#addprebooked_confirmemail').val())
		{
			$("<div class='alert alert-warning' style='position: fixed; bottom: 0;'>The emails you have enter do not appear to match! Please check you have entered the visitors details correctly and try again.</div>").appendTo('#prebook').fadeOut(3000);
			e.preventDefault();
			return false;
		}
		else
		{
			$("<div class='alert alert-success' style='position: fixed; bottom: 0;'>Success! This visitor has been booked in for the time and date specified.</div>").appendTo('#prebook').fadeOut(3000);
			var delay = 3000;
			setTimeout(function () { $(this).submit(); }, delay);
		}

	});

这是我遇到问题的代码:

$('#addevent_form').submit(function(e) {

		if ($('#addevent_form').validate().checkForm() === false)
		{
			e.preventDefault();
			return false;
		}
		else
		{
			$("<div class='alert alert-success' style='position: fixed; bottom: 0;'><p>Success! This event has been scheduled for the time and date specified.</p></div>").appendTo('#createevent').fadeOut(3000);
			var delay = 3000;
			setTimeout(function () { $(this).submit(); }, delay);
		}

	});

1 个答案:

答案 0 :(得分:0)

我认为这不会起作用,因为this处理程序中的setTimeout()不会引用form元素。

同样调用jQuery的submit()方法将进入递归循环,因为它将再次调用submit事件处理程序。

在您的情况下,您需要阻止处理程序中的表单提交,然后在fadeOut()完整处理程序中,您需要调用form元素{{3}方法。

$('#addevent_form').submit(function(e) {
  e.preventDefault();
  if ($('#addevent_form').validate().checkForm()) {
    var form = this;
    $("<div class='alert alert-success' style='position: fixed; bottom: 0;'><p>Success! This event has been scheduled for the time and date specified.</p></div>").appendTo('#createevent').fadeOut(3000, function() {
      form.submit();
    });
  }
});

演示:submit()

注意:我不确定第一个例子是如何工作的