Reputation: 463

$(form).ajaxSubmit is not a function

I'm trying to use the jquery validate plugin to validate a form and submit the contents with an ajax request.

This code is in the head of my document.

 $(document).ready(function() {
    $('#contact-form').validate({submitHandler: function(form) {
         $(form).ajaxSubmit();   
         contactSuccess() ;
         }
    });
});

The validation works. However, the submission is made normally: On submission, the page reloads. Of course, I've got a non-js fallback behaviour for browsers that don't have js enabled. But I'd like to get the smoother user experience working.

The error that I see in firebug is: $(form).ajaxSubmit is not a function

What could I be doing wrong here?

Upvotes: 46

Answers (8)

Mike Park

Reputation: 10941

I'm guessing you don't have a jquery form plugin included. ajaxSubmit isn't a core jquery function, I believe.

Something like this : http://jquery.malsup.com/form/

UPD

<script src="http://malsup.github.com/jquery.form.js"></script>

UPD - moved to github.io

<script src="https://malsup.github.io/jquery.form.js"></script>

Upvotes: 90

Tomasz

Reputation: 1406

Previous link return Http 404: Use https protocol :

<script src="https://malsup.github.io/jquery.form.js"></script>

Documentation : https://malsup.com/jquery/form/

Upvotes: 1

MiSHuTka

Reputation: 1312

Drupal 8

Drupal 8 does not include JS-libraries to pages automaticly. So most probably if you meet this error you need to attach 'core/jquery.form' library to your page (or form). Add something like this to your render array:

$form['#attached']['library'][] = 'core/jquery.form';

Upvotes: 1

Vishnu Sharma

Reputation: 1383

Ajax Submit form with out page refresh by using jquery ajax method first include library jquery.js and jquery-form.js then create form in html:

<form action="postpage.php" method="POST" id="postForm" >

<div id="flash_success"></div>

name:
<input type="text" name="name" />
password:
<input type="password" name="pass" />
Email:
<input type="text" name="email" />

<input type="submit" name="btn" value="Submit" />
</form>

<script>
  var options = { 
        target:        '#flash_success',  // your response show in this ID
        beforeSubmit:  callValidationFunction,
        success:       YourResponseFunction  
    };
    // bind to the form's submit event
        jQuery('#postForm').submit(function() { 
            jQuery(this).ajaxSubmit(options); 
            return false; 
        }); 


});
function callValidationFunction()
{
 //  validation code for your form HERE
}

function YourResponseFunction(responseText, statusText, xhr, $form)
{
    if(responseText=='success')
    {
        $('#flash_success').html('Your Success Message Here!!!');
        $('body,html').animate({scrollTop: 0}, 800);

    }else
    {
        $('#flash_success').html('Error Msg Here');

    }
}
</script>

Upvotes: 3

Sandeep Kapil

Reputation: 992

this is new function so you have to add other lib file after jQuery lib

<script src="http://malsup.github.com/jquery.form.js"></script>

it will work.. I have tested.. hope it will work for you..

Upvotes: 6

Edgar

Reputation: 29

Try:

$(document).ready(function() {
    $('#contact-form').validate({submitHandler: function(form) {
         var data = $('#contact-form').serialize();   
         $.post(
              'url_request',
               {data: data},
               function(response){
                  console.log(response);
               }
          );
         }
    });
});

Upvotes: 2