2

我正在尝试制作一个简单的时事通讯注册表单，其中包含一个电子邮件地址字段和提交按钮。当用户输入他们的地址并点击提交时，我希望在表单下方显示一条确认消息。实际发生的是消息出现并立即消失。我如何让它保持原样？这是我的代码：

<body>
    <form id="newsletter_signup"> <!-- form action to be added later -->
        <p><input type="text" name="email" id="email" placeholder="your@email.com" />
        <input type="submit" value="Subscribe"></p>
        <div id="feedback"></div>
    </form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>
    $('#newsletter_signup').submit(function() {
        var email_address = $('#email').val();
        $('#feedback').html('Thanks! ' + email_address + ' has been signed up.');
    });
</script>
4

3 回答 3

3

将您的代码更改为此，而是通过 Ajax 请求提交表单：

$('#newsletter_signup').submit(function(e) {
    e.preventDefault();
    $.post('newsletter_signup', function (data){
       var email_address = $('#email').val();
       $('#feedback').html('Thanks! ' + email_address + ' has been signed up.');
    });   
    return false;
});
于 2013-07-05T14:47:32.607 回答
2

它正在消失，因为通过提交表单，您基本上是在刷新整个页面。

要解决此问题，您需要执行以下三件事之一（可能还有其他方法）：

  • 使用 AJAX 调用提交表单；
  • 更改其背后的代码以在页面往返服务器后返回浏览器时触发消息的外观；或者，
  • 在控制返回时拾取的往返行程之前设置一个 cookie，这会触发消息出现。

许多此功能的实现将特定于您在服务器端使用的语言。

于 2013-07-05T14:47:10.137 回答
2

正在提交表单，这会刷新页面。因此，在重新加载页面之前，您的消息会立即显示。您可以使用 ajax 提交表单，这样页面就不会重新加载，或者您可以使用服务器端代码来显示您的感谢信息。

作为旁注，您的代码容易受到 XSS 的攻击，您在页面上显示用户的电子邮件地址。

于 2013-07-05T14:45:21.007 回答