Menu icon Foundation
Abide Page Refresh

Hey everybody! Siddig emailed us with a question about abide validation. Let's help him out!

--

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
Siddig

abidevalidationjquery

Hey everybody! Siddig emailed us with a question about abide validation. Let's help him out!

--

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
Siddig

Parker Gibson over 5 years ago

Used the same tutorial, having the exact same problem. The fix for Foundation 4 is not the same for Foundation 5. Anyone help?

Dominic Brown about 5 years ago

Same here, same problem!

But in my case, with or without jQuery, it is still refreshing the page and not sending emails...

Dominic Brown about 5 years ago

Okay, I went through a couple of articles on the web. Made a little modification to the code and it finally worked for me.
First I've let the ...foundation.abide.js as is or don't link it (it's already in the foundation.min.js).
Make sure $(document).foundation(); is placed after.

here is the code

 $('#myForm').submit(function(e) {
    //prevent default form submitting.
    e.preventDefault()

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

      //Data for reponse
      var dataString = 'name=' + name +
        '&email=' + email +
        '&message=' + message;

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

Really, I'm just a designer, not sure why this way is actually working for me.

Daniel Vassilev over 4 years ago

Thanks a lot Dominic. Your method sure worked for me. I still have a small problem though - the sending of the data from the form happens only after one hits the SUBMIT button twice. Any ideas why?

adm666 over 4 years ago

Try disable "sending" form on submitting.

You can either^ disable button, or disable the whole form form submitting.

There are few way to do this, but the simpiest is like:

.....

$('#myform').submit(function(){
$('input[type=submit]', this).attr('disabled', 'disabled');
});

Or do the same with "submit" button only.

document.getElementById("YourSubmitButtonId").disabled = true;

Daniel Vassilev over 4 years ago

Hi adm666,

thanks for this prompt reply. Unfortunately I'm not that good with JS and I think I'd need some more explanation here. Can you paste the entire code after your suggested correction, because I'm not sure where to put those in the code. That will be great. Thanks in advance!

Daniel