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

Question

我正在使用一个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)，屏幕仍然会跳到submit上，所以我想知道它是否被覆盖了。

如果有人对如何使页面滚动到顶部而不是底部有任何想法，这将是非常感谢的。

耽误您时间，实在对不起!

Answer 1

在表单元素中从#contact_form中删除action="/contact#contact_form"，生活将再次美丽。

#contact_form告诉浏览器滚动到没有其他影响的form.Removing。

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

<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>

Answer 2

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

您应该替换这段代码：

 {% form 'customer' %}

由这一个

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

我想这是正确的方法。Shopify中没有很好的文档(或者根本没有)，但是您可以添加元素(动作、类、数据类型等)。直接从您的html文件，就像上面的例子。在我的例子中，表单提交后，页面默认保持在顶部，不再滚动。