如何防止浏览器在表单提交时打开新页面？答案

【问题标题】：How to prevent browser from opening a new page on form submit?如何防止浏览器在表单提交时打开新页面？
【发布时间】：2017-06-01 05:10:27
【问题描述】：

网页中有一个电子邮件订阅表单，
当有人输入他的电子邮件并点击提交按钮时，
我们不希望这样页面被重定向到表单操作网址，
我们只希望它的提交按钮文本值被转换为另一个文本，
类似于“谢谢！ "。
这怎么可能？我应该通过ajax吗？还是javascript？
表格如下：

<form class="ml-block-form" action="//app.mailerlite.com/webforms/submit/myownID" data-code="myownID" method="POST" target="_blank">
<div class="form-group ml-field-email ml-validate-required ml-validate-email">
    <input class="newsletter-email" type="email" name="fields[email]" placeholder="Email*"/>
</div>
<input type="hidden" name="ml-submit" value="1" />
<p>
    <input class="newsletter-submit" type="submit" value="Get Updates!"/>
</p>

【问题讨论】：

删除target="_blank"
将输入类型从提交更改为按钮
您不想发布任何类型的数据？只是改变文字？或者您想在不重新加载的情况下将所有数据提交到服务器，并且在成功提交后您想更改文本并可能禁用表单？
@axel.michel 完全正确！我想在提交成功后更改文本。

标签： javascript jquery html ajax forms

【解决方案1】：

对于初学者，请从您的 form 标记中删除 target="_blank"。

然后，在您的 jQuery 中，按照以下方式执行操作：

$(".ml-block-form").submit(function(){
    var vals = $(this).serialize();

    $.ajax({
        url: "postpage.php",  
        method: "POST",
        data: vals,
        success: function(data) {
            $("#formsubmit").val("Thank you!");
        }
    });

    return false; // prevent from submit
});

我也更改了您的 HTML，因为它最初非常混乱。如果需要，您当然可以添加其他元素：

<form class="ml-block-form" action="" data-code="myownID" method="post">
    <input id="mainval" type="email" name="fields[email]" placeholder="Email*">
    <input id="hiddenval" name="ml-submit" value="1" />
    <input id="formsubmit" type="submit" value="Get Updates!"/>
</form>

【讨论】：

您可以将数据更改为 '$(this).serialize()' 以摆脱变量声明。
还有一个想法，如果您使用$(this).attr('action') 作为 AJAX 部分中 url 的值（并且不要从 HTML 代码中删除原始值），它可以/可以使用和不使用javascript。
@axel.michel 可能 :) 但我个人更喜欢这种方式
我认为没有理由通过删除表单操作来禁用基本功能，并且您应该始终尽可能简单。在脚本代码中使用硬编码的 URL 更难维护，而且在大多数情况下只是多余的。
谢谢，问题解决了，但是不知道为什么提交按钮的值没有变成“谢谢！”点击提交按钮后。

【解决方案2】：

代替

<input class="newsletter-submit" type="submit" value="Get Updates!"/>

使用

<button id="newsletter-submit" value="Get Updates!"/>

（请注意，我将class 更改为id）

然后使用jQuery来处理按钮的点击：

$("#newsletter-submit").click(function () {
    $(this).prop("value", "Thank You!");
    // do something else with the input values e.g. send them via ajax to a server script
});

【讨论】：

按钮没有可见值。像这样，您将创建一个空按钮。您可以更改该值...
还是错了。与输入元素相反，按钮包含文本或其他 HTML 标记，这就是您所看到的，所以它必须是：<button>Get updates</button> 和 jQuery 部分 $(this).text('Thank you')。无论如何，如果用户点击输入，这仍然会提交表单。

【解决方案3】：

您可以简单地删除target="blank"，因为blank 值会在新的window 中打开链接文档。

【讨论】：

这仍然会重新加载页面（而不是在新窗口中），但这将是他想要避免的新页面加载。