提交表单，它打开PHP文件？

Question

我会说明问题。但无论如何，感谢先生。

所以基本上当我提交我提交的表单时，它提交和填充，但它将页面重定向到PHP文件，并在浏览器上显示（不作为警报）：

{"status":"success","message":"Yer message was sent."}

成功验证数据后，显示此

{"status":"fail","message":"Invalid name provided."}

表单未验证时。我想要的是，当表单提交时，它保持在同一页面上，如果status为true或false，它应该警告数组中的消息。

我写下脚本，文件名是：index.html，script.js和post.php

INDEX.HTML

<form action='post.php' id='post_message' name='post_message' method="post">
<p>
<input id='email' type="email" class='post' placeholder="Email goes in here.(Required) " class="width" name="email">
<br>
<input id='fname' type="text" class='post' placeholder="First Name (Required) " name="FirstName"><br>
<input id='lname' type="text" class='post' placeholder="Last Name (Required) " name="LastName"><br>
<input id='website' type="url" class='post' placeholder="Website? (Optional!)" class="width" name="website"><br>
<textarea id='message_text' placeholder="Your Message goes here. (Required, DUH!) " name='message'></textarea>
</p>
<button type="submit" class="submit" id='btnPost'></button>
<input type="hidden" name="action" value="post_message" id="action">
</form>

的script.js

function clearInputs(){
    $("#fname").val('');
    $("#lname").val('');
    $("#email").val('');
    $("#website").val('');
    $("#message_text").val('');
}

$('#btnPost').click(function() {

    var data = $("#post_message").children().serializeArray();

    $.post($("#post_message").attr('action'), data, function(json){

        if (json.status == "fail") {
            alert(json.message);
        }
        if (json.status == "success") {
            alert(json.message);
            clearInputs();
        }
    }, "json");
});

post.php中

<?php
if($_POST){ 
    if ($_POST['action'] == 'post_message') {
    $fname = htmlspecialchars($_POST['FirstName']);
    $lname = htmlspecialchars($_POST['LastName']);
    $email = htmlspecialchars($_POST['email']);
    $website = htmlspecialchars($_POST['website']);
    $message = htmlspecialchars($_POST['message']);
    $date = date('F j, Y, g:i a');
    if(preg_match('/[^\w\s]/i', $fname) || preg_match('/[^\w\s]/i', $lname)) {
        fail('Invalid name provided.');
    }
    if( empty($fname) || empty($lname) ) {
        fail('Please enter a first and last name.');
    }
    if( empty($message) ) {
        fail('Please select a message.');
    }
    if( empty($email)) {
        fail('Please enter an email');
    }

    $query = "INSERT INTO portmessage SET first_name='$fname', last_name='$lname', email = '$email', website = '$website', message = '$message', date = '$date'";
    $result = db_connection($query);

    if ($result) {
        $msg = "Yer message was sent.";
        success($msg);
    } else {
        fail('Message failed, Please try again.');
    }
    exit;
}
}
function db_connection($query) {
    mysql_connect('127.0.0.1', '######', '####')
        OR die(fail('Could not connect to database.'));
    mysql_select_db('####');

    return mysql_query($query);
}

function fail($message) {
    die(json_encode(array('status' => 'fail', 'message' => $message)));
}
function success($message) {
    die(json_encode(array('status' => 'success', 'message' => $message)));
}

＆GT;

是的，它将表单提交到数据库，但我无法克服警报和重定向问题。 再次谢谢！

Answer 1

您可以验证表单客户端（使用javascript）

<强> HTML

<form action='post.php' id='post_message' name='post_message' method="post" onsubmit="return validate_form();">

<强>的Javascript

function validate_form()
{
     var success = true;
     if($("[name=FirstName]").val() == "")
     {
         success = false;
     }
     // your test case goes here
     // you can alert here if you find any error
     return success;
}