CODEWITHSUNDEEP
javascriptjqueryajaxformszurb-foundation
Siddig Zeidan
Siddig Zeidan

Reputation: 3

Foundation Abide refreshing the page even when I have return false

this is wrecking my head! So, first of all, I want to say that I love foundation! But I have a problem with Abide and form submittion. This is the code I have for my contact form

 $("#myForm").on('valid', function(e){
           e.preventDefault();
         var name = $("input#name").val();
         var email = $("input#email").val();
         var msg = $("textarea#message").val();

         var dataString = 'name=' + name +
         '&email=' + email +
         '&msg=' + msg;

         $.ajax({
            type:"POST",
            url:"php/mail.php",
            data: dataString,
            success: function(){
               $(".contactform").html("<div id = 'thanks'></div>");
            $('#thanks').html("<h2>Thanks</h2>")
               .append("<p> Dear " + name + " I will contact you soon </p>")
               .hide()
               .fadeIn(1500);
         }
         });
    return false;
      });

I used an online video tutorial for it. The thing is, that when I hit submit, it refreshes the page even though I have included return false there. But here is where it gets weird... If I take out Jquery from my page, the contact form script works perfectly, however, I need Jquery functionality for plugins in my page. I have also went to the github and made the fix on the page to the abide file, but still no luck. If you want to take a look at my page, to have some context, its here

www.siddigzeidan.com/app

Thank you so much in advance!

Upvotes: 0

Views: 986

Answers (1)

Sven Finger
Sven Finger

Reputation: 543

The problem in your code is, that you're reacting at the valid event of #myForm and not on the submit event. If you look into foundation.abide.js, you'll see what i mean.

To solve your problem you have to move your code to the submit event:

Wrong:

$("#myForm").on('valid', function(e){

Right:

$("#myForm").on('submit', function(e){

There is also a good hint, matching all three events valid invalid submit at once, on github:

$("#myForm").on("valid invalid submit", function(e){
    e.stopPropagation();
    e.preventDefault();
    if(e.type === "valid"){
        // AJAX call
    }
});

Upvotes: 3

Related Questions