Ajax Post not working with Form Validation

Question

I tried looking at past posts but didn't see anything that would help my situation. I created an ajax post with validation for my website but for some reason it won't work with the validation. If I drop the code seperately from validation the POST works (without validating).

Chrome is returning a " Uncaught ReferenceError: getdetails is not defined: onclick " error, however I'm lost as to why? Because all the fields have valid data in them when I try the form. Here's my code below:

html code

<input type="submit" name="submit" id="submit_btn" class="button" value="Send" onClick = "getdetails()" />

rsvp-form.js

jQuery.noConflict();
jQuery( document ).ready( function( $ ) {

    jQuery.timer = function(time,func,callback){
      var a = {timer:setTimeout(func,time),callback:null}
      if(typeof(callback) == 'function'){a.callback = callback;}
      return a;
    };

    jQuery.clearTimer = function(a){
      clearTimeout(a.timer);
      if(typeof(a.callback) == 'function'){a.callback();};
      return this;
    };


    /* RSVP Form */

    $('.error').hide();
    $('input.text-input').css({backgroundColor:"#FFFFFF"});
    $('input.text-input').focus(function(){
        $(this).css({backgroundColor:"#ffefae"});
    });
    $('input.text-input').blur(function(){
        $(this).css({backgroundColor:"#FFFFFF"});
    });
    $(".button").click(function() {
        // validate and process form
        // first hide any error messages
        $('.error').hide();
        var name = $("input#name").val();
        if (name == "") {
          $("label#name_error").show();
          $("input#name").focus();
          return false;
        }
        var email = $("input#email").val();
        if (email == "") {
          $("label#email_error").show();
          $("input#email").focus();
          return false;
        }
        var attending = $("input#attending").val();
        if (attending == "") {
          $("label#attending_error").show();
          $("input#attending").focus();
          return false;
        }
        //var dataString = 'name='+ name + '&email=' + email + '&attending=' + attending;
        //alert (dataString);return false;
        function getdetails() {
            var name = $('#name').val();
            var email = $('#email').val();
            var attending = $('#attending').val();
            $.ajax({
            type: "POST",
            url: "/wp-content/themes/Retro/sqlpost/details.php",
            data: {name:name, email:email, attending:attending}
            }).done(function( result ) {
                $('#contact_form').html("<br /><div id='message' style='display:table-cell; vertical-align:middle; text-align:center;'></div>");
                $('#message').html("Thanks for RSVP'ing " +name +",<br />we can't wait to see you!")
                //.hide()
                fadeIn(1500, function() {
                  $('#message');
                });
            })
        }
        return false;
    });
});

runOnLoad(function(){
    $("input#name").select().focus();
});

details.php

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$attending = $_POST['attending'];

mysql_connect("mkschool.db.10611925.hostedresource.com","mkschool","Correct1!");
mysql_select_db("mkschool");
$query="INSERT into students (name, email, attending) VALUES ('".$name."','".$email."','".$attending."')";
mysql_query($query) or die ('Error updating database');
//echo "Thanks for RSVP'ing " .$name. ", we can't wait to see you!"; //
?>

Answer 1

Change the type of the input type="submit" to type="button" the HTML

<input type="button" name="submit" id="submit_btn" class="button" value="Send" onClick = "getdetails()" />

You can also use preventDefault() function of Jquery Libraray.

Answer 2

Remove onClick = "getdetails()" event from your submit button:

<input type="submit" name="submit" id="submit_btn" class="button" value="Send" />

And Modify $(".button").click(); Jquery handler as follows:

$(".button").click(function() {
    // validate and process form
    // first hide any error messages
    $('.error').hide();
    var name = $("input#name").val();
    if (name == "") {
      $("label#name_error").show();
      $("input#name").focus();
      return false;
    }
    var email = $("input#email").val();
    if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }
    var attending = $("input#attending").val();
    if (attending == "") {
      $("label#attending_error").show();
      $("input#attending").focus();
      return false;
    }
    //var dataString = 'name='+ name + '&email=' + email + '&attending=' + attending;
    //alert (dataString);return false;
    var name = $('#name').val();
    var email = $('#email').val();
    var attending = $('#attending').val();
    $.ajax({
        type: "POST",
        url: "/wp-content/themes/Retro/sqlpost/details.php",
        data: {name:name, email:email, attending:attending},
        success: 
            function( result ) {
                $('#contact_form').html("<br /><div id='message' style='display:table-cell; vertical-align:middle; text-align:center;'></div>");
                $('#message').html("Thanks for RSVP'ing " +name +",<br />we can't wait to see you!")
                //.hide()
                fadeIn(1500, function() {
                  $('#message');
                });
                return false;
            }
    });
});