Menu icon Foundation
Abide form submission error

Hi guys,

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

abidevalidation

Hi guys,

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

Paul over 5 years ago

Did you set form to: form id="myForm" data-abide="ajax"