javascript - Formspree (HTML) 和 JavaScript 不能同时工作。 ( toast 图书馆)

Question

我正在使用 Formspree - https://formspree.io/将我的表单重定向到我的电子邮件，因为我在静态页面上托管我的网站。

我还使用外部库 Toastr ( http://codeseven.github.io/toastr/ ) 在用户单击表单的“提交”按钮后显示一个小通知。

问题是我无法让 Formspree 和 Toastr 同时运行。当我实现这两个功能时，所有功能都不起作用。

代码:(请说明是否需要添加更多以使问题更清楚)。

<form action="http://formspree.io/emailhere" method="POST">
       <div>
         <div class="row">
          <div class="6u 12u(mobile)">
         <input type="text" name="name" id="name" placeholder="Name" />
            </div>
               <div class="6u 12u(mobile)">
                  <input type="email" name="_replyto" id="email" placeholder="Your Email" />
             </div>
               </div>
              <div class="row">
                <div class="12u">
                 <input type="text" name="subject" id="subject" placeholder="Subject" />
                   </div>
                </div>
                 <div class="row">
                    <div class="12u">
                    <textarea name="message" id="message" placeholder="Message"></textarea>
                 </div>
              </div>
           <div class="row 200%">
            <div class="12u">
          <ul class="actions"> //Pressing submit redirects to a 'thank you' page
   <li> <input name="submit" type="submit" value="Send" id="submit"/> </li>
  <li> <input type="reset" value="Clear Form" class="alt" />  </li>
        </ul>
          </div>
           </div>
              </div>
                </form>

现在，当您按下提交按钮时，它会将您重定向到 Formspring 感谢页面。当我为 toast 通知添加 Javascript 时，它甚至不执行此操作，这意味着 JavaScript 以某种方式“破坏”了提交按钮的功能。

     $(document).on('click', '#submit', function(evt){
    evt.preventDefault();
    toastr.success('Thanks for the email, will be in touch promptly.');
});

感谢您的关注。

编辑:所以我希望它们能一起工作。这是 HTML 代码，您可以在按下提交按钮后选择重定向页面:

<input type="hidden" name="_next" value="//site.io/thanks.html" />

我想要它，所以它不会重定向到任何地方，但会执行我的 JS 函数通知。

Answer 1

您正在阻止点击处理程序中的默认行为(重定向到表单 URL)。简单地删除

evt.preventDefault();

它应该可以工作(尽管很明显，因为您的页面正在重定向，所以 Toastr 弹出窗口将不可见)。

如果你想让它在新标签页中打开，你应该阻止默认行为(就像你现在所做的那样)，然后 open the URL manually .