Formspree（HTML）和JavaScript不能同时工作。 （Toastr图书馆）

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

您在点击处理程序中阻止了默认行为（重定向到表单网址）。只需删除

evt.preventDefault();

它应该可以工作（尽管显然，由于您的页面被重定向，Toastr弹出窗口将不可见。）

如果您希望在新标签页中打开它，则应该阻止默认行为（正如您当前所做的那样），然后open the URL manually。

Answer 2

解决此问题的最佳方法是使用button元素而不是submit input元素。这将要求您使用ajax将信息提交到某种端点，然后使用您的javascript函数通知浏览器提交。所有这些都是为了避免在使用默认浏览器行为提交表单时发生的重定向。如果您不使用ajax，则必须重定向，因为默认的浏览器行为。