Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

jquery - Send HTML Form Select Option to PHP validation via Ajax

I'm trying to send a form to php for validation before inserting data into mySQL. I'm trying to use AJAX to do it. I am unable to get through the validation process when sending a <select> <option>. If I remove the validation for the <select <option> the form processes as expected. When sending via AJAX I get the following response in console:

Response in console

When I process the form by just sending it without AJAX, the validation works fine. Below is my code:

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Validate SelectWith Ajax</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <form id="frm" action="process.php" method="post" novalidate>
            <label for="yourOptions">Your Options</label>
            <select id="yourOptions" name="yourOptions" required>
                <option value="" hidden selected>Select One</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
                <option value="5">Option 5</option>
            </select>
            <input type="submit" value="Submit" name="Submit">
            <?php echo "hello"; ?>
        </form>
        <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous">
        </script>
        <script src="ajax.js"></script>
    </body>
</html>

PHP

<?php

$errors = array();
$data = array();

if($_SERVER["REQUEST_METHOD"] === "POST") {

    if($_POST["yourOptions"] == "") {
        $errors["yourOptions"] = "Please Select One";
    }

    if(!empty($errors)) {
        $data["success"] = false;
        $data["errors"] = $errors;

    } else {
        $data["success"] = true;
        $data["message"] = "Success!";

    }
    echo json_encode($data);
}
?>

jquery AJAX

alert("loaded");
$(document).ready(function() {

    $("#frm").submit(function(event) {
        alert("sub");
        event.preventDefault();

        console.log(typeof document.getElementById("yourOptions"));

        $(".form-group").removeClass("is-invalid");
        $(".text-muted").remove();

        var formData = {
            "yourOptions"       : $("input[name=yourOptions]").val()
        };

        $.ajax({
            type        : "POST",
            url         : "process.php",
            data        : formData,
            dataType    : "json",
            encode      : true
        })

        .done(function(data) {

            console.log(data);

            if(!data.success) {

                if(data.errors.yourOptions) {
                    $("#yourOptions").addClass("is-invalid");
                    $("#frm").append("<span class='text-muted'>" + data.errors.yourOptions + "</span>");
                }

            } else {
                $("form").append("<span class='alert alert-success'>" + data.message + "</span>");
            }
        })
        .fail(function(data) {
            alert("failed");
            console.log;
        });
    });
});

The data-type is object, but then again, so were the other fields. How do I get php to process the selected option?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Replace

$("input[name=yourOptions]").val()

with

$( "#yourOptions" ).val()

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...