表单提交后不加载页面答案

【问题标题】：Do Not Load Page After Form Submit表单提交后不加载页面
【发布时间】：2013-08-01 13:31:06
【问题描述】：

我已经使用 cgimail 创建了一个基本的 HTML 联系表单并且一切正常，但是我无法让它在表单提交后避免重定向到某个地方。我正在尝试在页面顶部使用引导警报。

如何让表单提交，然后阻止它重定向？

代码如下：

      <form method="post" action="/cgi-bin/cgiemail/forms/email.txt">
        <fieldset>
          <h2 id="contact-header">Contact</h2>
          <label>Name:</label>
          <input type="text" name="yourname" placeholder="" autofocus>
          <label>Email Address:</label>
          <input type="email" name="email" value="" placeholder="">
          <label>Phone:</label>
          <input type="tel" name="phone" value="" placeholder="">
          <label>Message:</label>
          <textarea name="message" rows="2"></textarea>
          <br>
          <button type="submit" id="formSubmit" class="btn">Send</button>
          <input type="hidden" name="success" value="">
        </fieldset>
      </form>

谢谢，瑞恩

【问题讨论】：

标签： html forms cgi

【解决方案1】：

如果您使用的是 jQuery，那么您可以尝试取消 submit 事件。首先给你的表单一个id

HTML：

<form id="myform" ...

JavaScript：

$('#myform').on('submit', function(e) {
    e.preventDefault();

    $.ajax({
        url: '/cgi-bin/cgiemail/forms/email.txt',
        type: 'post',
        data: $(this).serialize()
    });

    return false;
});

【讨论】：

我刚刚更新了我的答案，举例说明了如何使用AJAX 调用提交表单。

【解决方案2】：

您有两个直接的选择。您可以使用 jQuery 及其 forms plugin 将其转换为 ajax 操作，或者您可以滚动您自己的等价物。它看起来像这样（使用 jQuery）：

$('form').submit(function() {
  ... get all values.
  ... ajax post the values to the server.
  return false;
});

【讨论】：

【解决方案3】：

表单中的“action”属性告诉它将浏览器发送到该 email.txt，然后它可以控制是否将您重定向到另一个页面。默认情况下，它至少会将您重定向到帖子的 email.txt 页面，但很可能 cgi 在发布到该页面时会做额外的事情。

使用 jQuery AJAX，您可以执行以下操作（此代码跳过错误检查）：

$('form').submit(function() { 
    var data = { };
    data.yourname = $(this).find('input[name="yourname"]').val();
    data.message = $(this).find('textarea[name="message"]').val();
    // do the same as above for each form field. 
    $.post("/cgi-bin/cgiemail/forms/email.txt", data, function() { 
        //add the alert to the form.
        $('body').prepend('div class="alert">Success!</div>');
    });
    return false;
});

【讨论】：