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

将输入类型=“提交”的类型更改为HTML =“按钮”HTML

<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;
            }
    });
});

Ajax Post不使用表单验证

2 个答案: