Question

网页上有电子邮件订阅表单，当有人输入他的电子邮件并点击提交按钮时，我们不会希望将此页面重定向到表单操作网址，我们只是希望将提交按钮文本值转换为其他文本，类似于“谢谢！”。如何可能？我应该通过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>

Answer 1

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

然后，在 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>

Answer 2

您只需删除target="blank"，因为blank值会在新的window中打开链接的文档。

Answer 3

而不是

<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
});

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

3 个答案: