Question

我制作了这个典型的表单，尝试提交但是出现了一些问题。使用ajax的淡入消息工作，但表单未提交，我无法想象为什么我想出了我回应“连接问题”的PHP错误消息...任何想法如何解决以下将非常感谢！

所以这是我的HTML代码：

    <!DOCTYPE html>
<html>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Basic Form</title>
        <meta name="description" content="A basic fade in form">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<title>Enable Disable Submit Button Based on Validation</title>
<style>
body{width:50%;min-width:200px;font-family:arial;}
#frmDemo {background: #98E6DB;padding: 40px;overflow:auto;}
#btn-submit{padding: 10px 20px;background: #555;border: 0;color: #FFF;display:inline-block;margin-top:20px;cursor: pointer;font-size: medium;}
#btn-submit:focus{outline:none;}
.input-control{padding:10px;width:100%;}
.input-group{margin-top:10px;}
#error_message{
    background: #F3A6A6;
}
#success_message{
    background: #CCF5CC;
}
.ajax_response {
    padding: 10px 20px;
    border: 0;
    display: inline-block;
    margin-top: 20px;
    cursor: pointer;
    display:none;
    color:#555;
}
</style>
</head>
<body>
<h1>jQuery Fade Out Message after Form Submit</h1>          
<form id="frmDemo" action="form4.php" method="post">


   <div class="input-group">Name </div>
   <div>
        <input type="text" name="name" id="name" class="input-control" />
   </div>

   <div class="input-group">Message </div>
   <div>
        <textarea name="comment" id="comment" class="input-control"></textarea>
   </div>

   <div class="input-group">Lastname </div>
   <div>
        <input type="text" name="lastname" id="lastname" class="input-control" />
   </div>

   <div style="float:left">
        <button type="submit" name="btn-submit" id="btn-submit">Submit</button>
    </div>
    <div id="error_message" class="ajax_response" style="float:left"></div>
    <div id="success_message" class="ajax_response" style="float:left"></div>
</form> 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>         
<script>
$("#frmDemo").submit(function(e) {
    e.preventDefault();
    var name = $("#name").val();
    var comment = $("#comment").val();
    var lastname = $("#lastname").val();

    if(name == "" || comment == "" || lastname == "" ) {
        $("#error_message").show().html("All Fields are Required");
    } else {
        $("#error_message").html("").hide();
        $.ajax({
            type: "POST",
            url: "form4.php",
            data: { name:name, comment:comment, lastname:lastname },  // *** Modify this
            success: function(data){
                $('#success_message').fadeIn().html(data);
                setTimeout(function() {
                    $('#success_message').fadeOut("slow");
                }, 2000 );
            }
        });
    }
})
</script> 
</body>
</html>

，这是我使用的php：

        <?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "form4";

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

if(isset($_POST['name']) && isset($_POST['comment']) && isset($_POST['lastname'])) { // **Change this

    $name = $_POST['name'];
    $comment = $_POST['comment'];
    $lastname = $_POST['lastname'];

    $sql = "INSERT INTO step4 (name, comment, lastname) VALUES ('{$name}', '{$comment}' '{$lastname}')";

    if ($conn->query($sql)) {
    echo "New record created successfully";
    } else {
    echo "Error: " . $sql . "<br>" . $conn->error;
    }

} else {
    echo "Either Name or Comment field not set";    // **Change this
}

$conn->close();
?>

Answer 1

您必须包含数据的对象...而不是查询字符串。因为你正在使用POST。同样通过它的外观，你正在检查是否设置了submitForm。所以你需要加入它。

$.ajax({
        type: "POST",
        url: "post-form.php",
        data: {submitForm:true, name:name, comment:comment},
        success: function(data){
            $('#success_message').fadeIn().html(data);
            setTimeout(function() {
                $('#success_message').fadeOut("slow");
            }, 2000 );

        }
    });

或者你可以完全使用表格。但是不要忘记更改后端变量以检查“btn-submit”。因为它在表格上有一个字段。

  if(isset($_POST['btn-submit'])){ // rest of code

和jquery

  var form = $('#frmDemo').serialize();
  $.ajax({
    type: "POST",
    url: "post-form.php",
    data:form,
    success: function(data){
        $('#success_message').fadeIn().html(data);
        setTimeout(function() {
            $('#success_message').fadeOut("slow");
        }, 2000 );

    }
});

Answer 2

您正在以错误的方式使用isset()。你也使用了错误的变量名。试试这个

<script>
$("#frmDemo").submit(function(e) {
    e.preventDefault();
    var name = $("#name").val();
    var comment = $("#comment").val();
    var lastname= $("#lastname").val();  //**lastname

    if(name == "" || comment == "" ) {
        $("#error_message").show().html("All Fields are Required");
    } else {
        $("#error_message").html("").hide();
        $.ajax({
            type: "POST",
            url: "post-form.php",
            data: { name:name, comment:comment, lastname:lastname  },   // ***lastname
            success: function(data){
                $('#success_message').fadeIn().html(data);
                setTimeout(function() {
                    $('#success_message').fadeOut("slow");
                }, 2000 );
            }
        });
    }
})
</script>

和您的post-form.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "form4";

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

if(isset($_POST['name']) && isset($_POST['comment']) && isset($_POST['lastname'])) { // **Change this

    $name = $_POST['name'];
    $comment = $_POST['comment'];
    $lastname = $_POST['lastname'];

    $sql = "INSERT INTO step4 (name, comment, lastname) VALUES ('{$name}', '{$comment}' '{$lastname}')";

    if ($conn->query($sql)) {
    echo "New record created successfully";
    } else {
    echo "Error: " . $sql . "<br>" . $conn->error;
    }

} else {
    echo "Either Name or Comment field not set";    // **Change this
}

$conn->close();
?>

希望这有帮助。

Answer 3

这一个

如果（isset（$ _ POST [ 'submitForm']））{ } 也许应该是

如果（isset（$ _ POST [ 'BTN-提交']））{ }

没有时间测试强硬

使用Jquery AJAX＆amp;提交表单PHP7

3 个答案: