表单数据提交多次，PHP不发送带有表单POST请求的数据消息

时间：2015-08-05 19:04:04

标签： javascript php jquery ajax forms

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

警报始终提供未定义的消息。

作为一个额外的稍微奇怪的问题，表格的进一步提交似乎每次增加表格的实际提交一次（没有页面刷新，第二次提交将发送数据两次，第三次提交将发送3次等）。这可能不是一个关键任务问题，因为实际上我永远不会允许用户在没有页面刷新的情况下多次发送此表单，但是对于我自己的学习（和理智！）id真的想要深入了解其原因这样做。

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

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

码

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验证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（数据）数据** 

"<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>
"

1 个答案:

答案 0 :(得分：1)

第一个问题在评论部分得到解决。非常感谢marc B帮我解决这个问题。

多形式问题与＆＃34;提交＆＃34;事件在提交后多次绑定到表单。我还没弄清楚为什么它这样做，但一个简单的解决方案是取消绑定然后在ajax函数之前重新绑定事件。这似乎解决了它：

改变：

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

到

 var frm = $('#zombieForm');
$(frm).unbind('submit').bind('submit',function(ev) {
                               $.ajax({
相关问题
最新问题