javascript - 多次提交表单数据，PHP不通过表单POST请求发送数据消息

Question

尝试制作一个非常简单的表单。我使用 Jquery Ajax 向 PHP 页面发送 POST 请求，然后该页面将表单数据写入 SQL 数据库，并返回成功/错误消息，该消息应通过 javascript 警报显示。

警报总是给出未定义的消息。

作为一个额外的有点奇怪的问题，进一步提交表单似乎每次都会将表单的实际提交量增加一次(没有页面刷新，第二次提交将发送数据两次，第三次提交将发送3次等)。这可能不是一个关键任务问题，因为实际上我永远不会允许用户在没有页面刷新的情况下多次发送此表单，但是为了我自己的学习(和理智!)，我真的很想弄清楚为什么它是这样的这样做。

这很可能是一个非常简单的问题，如果是这样，我提前道歉......我第一次尝试服务器通信。

非常感谢您的帮助，如果需要任何其他信息，请告诉我:)

代码

HTML

<form id ="zombieForm" method="post">


     <select name="multi1">         
<option value="4">placeholder value 4</option>
<option value="3">placeholder value 3</option>
<option value="2">placeholder value 2</option>
<option value="1">placeholder value 1</option>
</select>
    <br><br>
<p>placeholder</p>
<select name="multi2" required>
    <option value=""></option>
<option value="4">placeholder value 4</option>
<option value="3">placeholder value 3</option>
<option value="2">placeholder value 2</option>
<option value="1">placeholder value 1</option>
</select>
    <br><br>
<p>placeholder 2</p>
    <select name="multi3"> 
        <option value=""></option>
        <option value="4">placeholder value 4</option>
<option value="3">placeholder value 3</option>
<option value="2">placeholder value 2</option>
<option value="1">placeholder value 1</option>
</select>
    <br><br>
<p>placeholder 3</p>
    <select name="multi4">
        <option value=""></option>
<option value="4">placeholder value 4</option>
<option value="3">placeholder value 3</option>
<option value="2">placeholder value 2</option>
<option value="1">placeholder value 1</option>
</select>
    <br><br>
<p>placeholder 4</p>
    <select name="multi5">
<option value=""></option>
<option value="4">placeholder value 4</option>
<option value="3">placeholder value 3</option>
<option value="2">placeholder value 2</option>
<option value="1">placeholder value 1</option>
</select>
    <br></br>
      <p>placeholderbool1</p>
    <input type="radio" name="radio1" value="4" checked>yes
        <br></br>
<input type="radio" name="radio1" value="1">no
<br><br>
    <p>placeholderbool2</p>
    <input type="radio" name="radio2" value="4" checked>yes
        <br></br>
<input type="radio" name="radio2" value="1">no
<br><br>
<p>placeholderbool3</p>
    <input type="radio" name="radio3" value="4" checked>yes
        <br></br>
<input type="radio" name="radio3" value="1">no
<br><br>
<p>placeholderbool4</p>
    <input type="radio" name="radio4" value="4" checked>yes
        <br></br>
<input type="radio" name="radio4" value="1">no
<br><br>
<p>placeholderbool5</p>
    <input type="radio" name="radio5" value="4" checked>yes
        <br></br>
<input type="radio" name="radio5" value="1">no
<br><br>    

        <p>Gender</p>
<input type="radio" name="gender" value="male" checked>Male
        <br></br>
<input type="radio" name="gender" value="female">Female
<br><br>
    <input type="radio" name="gender" value="other">Other
      <br><br>
<p>Where are you from?</p>
<select name="location">
<option value=""></option>
<option value="Asia">Asia</option>        
<option value="Africa">Africa</option>
<option value="Antartica">Antartica</option>
<option value="Australia">Australia</option>
<option value="Europe">Europe</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
</select>
      <br><br>
<p>How old are you?</p>
<select name="age">
<option value=""></option>
<option value="<18">Under 18 </option>
<option value="18-25">18-25 </option>
<option value="25-40">25-40</option>
<option value="40-50">40-50</option>
<option value="50+">50+ </option>
</select>

<input type="submit" value="Submit" id ="formButton">
</form> 

Javascript(使用 Jquery 2.1.4 和 Jquery validate 1.14.0)

$(document).ready(function () {
    console.log("jquery ready");
    // jQuery.validator.setDefaults({
    //    debug: true
    // });
    var form = $("form");
    form.validate();
    $("#formButton").click(function () {
        var isValid = form.valid();
        if (isValid) {
            alert("Valid: " + form.valid() + "form validation passed");
            var frm = $('#zombieForm');
            frm.submit(function (ev) {
                $.ajax({
                    type: "POST",
                    url: "form_validation.php",
                    data: frm.serialize(),
                    success: function (data) {
                        if (data.error) {
                            alert("error" + " " + data.error);
                        } else {
                            alert("success" + data.message + " " + data.sql);
                        }
                    }
                });
                ev.preventDefault();
            });
        } else {
            alert("form validation failed");
        }
    });
}); 

PHP

    <html>
  <head>
    <title>Untitled</title>
  </head>
  <body>
 <?php
$servername = "localhost";
$username = "server";
$password = "pass";
$dbname = "db";
$multi1 = $_POST[multi1];
$multi2 = $_POST[multi2];
$multi3 = $_POST[multi3];
$multi4 = $_POST[multi4];
$multi5 = $_POST[multi5];
$radio1 = $_POST[radio1];
$radio2 = $_POST[radio2];
$radio3 = $_POST[radio3];
$radio4 = $_POST[radio4];
$radio5 = $_POST[radio5];
$gender = $_POST[gender];
$age = $_POST[age];
$location = $_POST[location];



// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = $conn->prepare("INSERT INTO zc_Answers(dateCreated, multi1, multi2, multi3, multi4, multi5, radio1, radio2, radio3, radio4, radio5, gender, age, location) VALUES (Now(), ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)");



$sql->bind_param("iiiiiiiiiisss", $multi1, $multi2, $multi3,  $multi4,  $multi5, $radio1, $radio2, $radio3, $radio4, $radio5, $gender, $age,  $location); //s = string, i = number
$sql->execute(); //execute the query;
$sql->close(); //close the statement.

if (!$sql) {
echo json_encode(array("error" => $sql , $conn =>error));

} else {
 echo json_encode(array("message" => "New record created successfully"));
}

$conn->close();
?> 

**编辑 console.log(data) 数据 **

"<html>
  <head>
    <title>Untitled</title>
  </head>
  <body>

Notice: Use of undefined constant multi1 - assumed 'multi1' in /var/form_validation.php on line 11

Notice: Use of undefined constant multi2 - assumed 'multi2' in /var/form_validation.php on line 12

Notice: Use of undefined constant multi3 - assumed 'multi3' in /var/form_validation.php on line 13

Notice: Use of undefined constant multi4 - assumed 'multi4' in /var/form_validation.php on line 14

Notice: Use of undefined constant multi5 - assumed 'multi5' in /var/form_validation.php on line 15

Notice: Use of undefined constant radio1 - assumed 'radio1' in /var/form_validation.php on line 16

Notice: Use of undefined constant radio2 - assumed 'radio2' in /var/form_validation.php on line 17

Notice: Use of undefined constant radio3 - assumed 'radio3' in /var/form_validation.php on line 18

Notice: Use of undefined constant radio4 - assumed 'radio4' in /var/form_validation.php on line 19

Notice: Use of undefined constant radio5 - assumed 'radio5' in /var/form_validation.php on line 20

Notice: Use of undefined constant gender - assumed 'gender' in /var/form_validation.php on line 21

Notice: Use of undefined constant age - assumed 'age' in /var/form_validation.php on line 22

Notice: Use of undefined constant location - assumed 'location' in /var/form_validation.php on line 23
{"message":"New record created successfully"} 

  </body>
</html>
"

Answer 1

第一个问题已在评论部分解决。非常感谢 Marc B 帮助我完成这件事。

多表单问题与提交后多次绑定(bind)到表单的“提交”事件有关。我还没有完全弄清楚为什么它会这样做，但一个简单的解决方案是在 ajax 函数之前取消绑定(bind)然后重新绑定(bind)事件。这似乎已经解决了:

更改:

var frm = $('#zombieForm');
            frm.submit(function (ev) {
                $.ajax({

至

 var frm = $('#zombieForm');
$(frm).unbind('submit').bind('submit',function(ev) {
                               $.ajax({