Ajax Post無法與表單驗證一起使用

Question

我嘗試查看過往的帖子，但沒有發現任何可以改善我狀況的信息。 我為我的網站創建了一個帶有驗證的ajax帖子，但由於某種原因，它無法用於驗證。 如果我從驗證中分別刪除代碼，則POST可以正常工作（無需驗證）。

Chrome正在返回“ Uncaught ReferenceError: getdetails is not defined: onclick ”錯誤，但是我迷失了為什么？ 因為當我嘗試表單時所有字段中都包含有效數據。 這是我的代碼如下：

HTML代碼

<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

將輸入的類型type =“ submit”更改為HTML的type =“ button”

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

您還可以使用Jquery Libraray的preventDefault（）函數。

Answer 2

從您的提交按鈕中刪除onClick = "getdetails()"事件：

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

並修改$(".button").click(); jQuery處理程序如下：

$(".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;
            }
    });
});