表单提交后如何防止页面跳转？答案

【问题标题】：How can I prevent page from jumping after form submit?表单提交后如何防止页面跳转？
【发布时间】：2016-09-26 13:19:04
【问题描述】：

我使用的是 Shopify 主题，我已根据需要对其进行了编辑。我选择将时事通讯订阅表单从页面底部移到顶部，以便将其嵌入到主图像中。当用户提交表单时，页面跳转到底部（表单曾经所在的位置）。下面是网站和表单的代码。

www.hoo-gah.co.uk

<div class="signup-form">
           {% if settings.footer_signup_action == empty %}
               {% form 'customer' %}
             {% if form.posted_successfully? %}
               <h4>{{ 'layout.signup.post_success' | t }}</h4>
               <script>window.scroll(0,1000000)</script>
             {% else %}
                   <input type="hidden" id="contact_tags" name="contact[tags]" value="prospect,newsletter"/>
                   <span class="input-block">
                     <input type="email" placeholder="{{ 'layout.signup.email' | t }}" class="required" value="" id="mailinglist_email" name="contact[email]" /><input class="compact" type="submit" value="Subscribe" />
                   </span>
             {% if form.errors %}
                   {% for field in form.errors %}
                   <p class="error">{{ field | capitalize }} - {{ form.errors.messages[field] }}</p>
                   {% endfor %}
             {% endif %}
            {% endif %}
           {% endform %}
           {% else %}
           <form action="{{ settings.footer_signup_action }}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
            <span class="input-block hero-input">
              <input type="email" class="required email" placeholder="{{ 'layout.signup.email' | t }}" value="" id="mce-EMAIL" required name="EMAIL" /><input class="compact" type="submit" name="subscribe" value="Subscribe" />
            </span>
           </form>
          {% endif %}
</div>

我认为 window.scroll(0,1000000) 行会对此负责，但是即使我删除该行或将值更改为 (0,0) 屏幕仍然会在提交时跳转，所以我想知道这是否在某处被覆盖。

如果有人对如何使页面滚动到顶部而不是底部有任何想法，将不胜感激。

感谢您的宝贵时间！

【问题讨论】：

没有看到你的 JavaScript 很难说，但你试过点击event.preventDefault();吗？
我在类似的帖子中将此视为解决方案，但有人建议这会阻止表单完全提交。
除非您使用 JavaScript 提交表单。由你决定。你能把所有相关的 JS 都贴出来吗？
恐怕找不到相关的JS。正如你所看到的，我有点超出我的深度！我认为 OZ 有所作为，但是在 settings_data.json 文件中编辑表单操作值会产生一些意想不到的效果。

标签： javascript jquery html css forms

【解决方案1】：

将表单元素中action="/contact#contact_form"中的#contact_form去掉，生活会重新美丽。

#contact_form 告诉浏览器滚动到表单。删除它不会有其他影响。

要明确的是，这是要更改的形式：

<form method="post" action="/contact#contact_form" id="contact_form" class="contact-form" accept-charset="UTF-8"><input type="hidden" value="customer" name="form_type"><input type="hidden" name="utf8" value="✓">

                       <input type="hidden" id="contact_tags" name="contact[tags]" value="prospect,newsletter">
                       <span class="input-block">
                         <input type="email" placeholder="Enter your email..." class="required" value="" id="mailinglist_email" name="contact[email]"><input class="compact" type="submit" value="Subscribe">
                       </span>


                       <p class="error">Email - can't be blank</p>



                </form>

应该是：

<form method="post" action="/contact" id="contact_form" class="contact-form" accept-charset="UTF-8"><input type="hidden" value="customer" name="form_type"><input type="hidden" name="utf8" value="✓">

                       <input type="hidden" id="contact_tags" name="contact[tags]" value="prospect,newsletter">
                       <span class="input-block">
                         <input type="email" placeholder="Enter your email..." class="required" value="" id="mailinglist_email" name="contact[email]"><input class="compact" type="submit" value="Subscribe">
                       </span>


                       <p class="error">Email - can't be blank</p>



                </form>

【讨论】：

嗨。谢谢回复！只是想让您知道我已经看到您的回复并希望您是对的 - 我只是无法找到这部分代码...... shopify 嵌套文件的方式有时会使查找内容变得棘手。一旦我得到它的工作，我会回来标记为已回答:) 谢谢！
编辑：我可以在“属性”选项卡> input.compact > form > outerHTML 下看到使用inspect 元素 - outerHTML 似乎是 action="/contact#contact_form" 的继承来源。不过目前不确定如何编辑或覆盖 outerHTML。
编辑 2：已经找到将代码更改为 action="/contact" 的位置，但是现在提交表单时，这似乎在新窗口中打开了页面，这是一种奇怪的行为.. .
@JackWatson 我可以看到这个吗？这很奇怪，因为 # 部分根本没有发送到服务器。只有添加 target="_blank" 才会产生这种影响
@JackWatson 为什么你的表格中有 target="_blank" ？？？，这是以前不存在的。我实际上将它复制到我的答案中，但它不存在

【解决方案2】：

我知道这是旧的，但我今天遇到了同样的问题。我必须回答，因为我还不能评论。另外，基于 O_Z 的回答：

你应该替换这段代码：

 {% form 'customer' %}

这个

{% form 'customer', action:'/contact' %}

我猜这是正确的做法。 Shopify 中没有很好地（或根本没有）记录，但您可以直接从 html 文件中添加元素（操作、类、数据类型等），就像上面的示例一样。在我的情况下，提交表单后，页面默认保持在顶部并且不再滚动。

【讨论】：