Formspree (HTML) and JavaScript not working simultaneously. (Toastr library)

Question

I'm using Formspree - https://formspree.io/ to redirect my forms to my email as I'm hosting my website on a static page.

I'm also using an external library Toastr (http://codeseven.github.io/toastr/) to make a small notification appear once the user clicks the 'Submit' button for the form.

The problem is that I cannot get Formspree and Toastr to run at the same time. When I implement both of them, none of the features work.

Code: (Please say if I need to add more for the problem to be clearer).

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

Now when you press the submit button it redirects you to a Formspring thank you page. When I add the Javascript for the toast notification it does not even do this meaning the JavaScript 'disrupts' the submit button functionality somehow.

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

Thanks for looking.

Edit: So I want it so both of them work together. This is the code for HTML were you can choose the redirect page after you press the submit button:

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

I want it so it does not redirect anywhere but does do my JS function notification.

score 1 · Answer 1 · edited May 23 '17 at 11:45

1

You're preventing the default behavior (to redirect to the form URL) in your click handler. Simply remove

evt.preventDefault();

And it should work (although obviously, since your page is being redirected, the Toastr popup won't be visible).

If you want it to open in a new tab, you should prevent the default behavior (as you do currently) and then open the URL manually.

edited May 23 '17 at 11:45

Community

1
1

answered Sep 11 '15 at 21:26

Birjolaxew

807
9
25

Wow, it was as simple as that. Thanks! Now the example you linked to still opens a new window making the notification redundant, anyway to get passed this? – bob9123 Sep 11 '15 at 21:44
The answers all open new tab – bob9123 Sep 11 '15 at 21:47
@bob9123 You need to decide (and make it clear) whether you _want_ the redirect, or you don't. If you simply want to make the request in the background, you should use `preventDefault`, and then make the request with XMLHttpRequest (commonly known as AJAX) – Birjolaxew Sep 11 '15 at 22:10
I don't want to redirect. The default code as it is redirects to it's own formspree page and the " " means so you can customize the redirect. However I don't want to and putting preventDefault at the end only brings the toastr notification. It does not actually send the form. I will try looking at the XMLrequest. Have not seen this before. – bob9123 Sep 11 '15 at 22:14
I'm not really sure how to go about this. – bob9123 Sep 11 '15 at 23:04

score 1 · Answer 2 · answered Sep 11 '15 at 21:38

The best way to get around this is to use a button element instead of the submit input element. This would require you to submit the information to an endpoint of some sort using ajax and then notifying the browser of the submission using your javascript function. All of this is to avoid the redirect that happens when you use the default browser behavior to submit the form. If you don't use ajax, you have to redirect due to default browser behavior.

Formspree (HTML) and JavaScript not working simultaneously. (Toastr library)

2 Answers2