0

我已经使用 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>

谢谢，瑞安

4

3 回答 3

1

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

$('form').submit(function() {
  ... get all values.
  ... ajax post the values to the server.
  return false;
});
于 2013-07-31T20:31:25.743 回答
1

表单中的“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;
});
于 2013-07-31T20:38:57.903 回答
0

如果您使用的是 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;
});
于 2013-07-31T20:30:54.057 回答