如何使用PHP验证引导模式中的表单?

时间:2017-03-05 13:38:42

标签: javascript php html twitter-bootstrap-3

提交表单后,表单不会被验证,模式将被关闭,因为页面已刷新。我希望模式在提交表单时保持开放。 php如下:

<?php
$nameerror = $studentiderror = $emailerror = "";

$subject = "Thank you for voting!";
$body = "Dear $_POST["name"], Thank you for voting for this sustainable initiative. Your vote is appreciated! Lots of love from the Beefarm Committee of the Erasmus Sustainability Hub!";

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

    if ($_POST["submit"]) {

        if (empty(($_POST["name"])) {
            $nameerror = "Please enter your name" }


        if (empty($_POST["studentID"])) {
            $studentiderror .= "Please enter your student ID";

        } else {
            $result = "Thank you for voting!";
            mail($_POST["email"], $subject, $body);
        }

    };
}

以下是模式的HTML,PHP嵌入在HTML中,在提交后验证表单时应显示错误消息:

<div class="container">
    <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">x</button>
                    <h4 class="modal-title">Vote!</h4>
                </div>

                <div class="modal-body">
                    <p>
                        Let us know what you think! <br/>
                        By voting, you as a student can have a say in the realisation of this project. Even if you vote
                        against having bees on campus, your vote is appreciated! <br/> 
                        Thank you!
                    </p>
                    <form id="votingscreen" method="POST">
                        <?php echo $result  ?>
                        <div class="form-group">
                            <label for="name">Name</label>
                            <?php echo $nameerror  ?>
                            <input style="width: 180px" type="text" id="name" name="name" class="form-control" placeholder="Your name">
                        </div>
                        <div class="form-group">
                            <label for="studentID">Student ID</label>
                            <?php echo $studentiderror  ?>
                            <input style="width: 180px" type="text" id="studentID" name="studentID" class="form-control" placeholder="123456AB">
                        </div>
                        <div class="form-group">
                            <label for="email">E-mail</label>
                            <?php echo $emailerror  ?>
                            <input style="width: 180px" type="email" id="email" name="email" class="form-control" placeholder="E-mail">
                        </div>
                        <hr />
                        <div class="radiogroup">
                            <label for="radiogroup"> Bees on campus? </label>
                            <label class="radio-inline">
                                <input type="radio" name="vote" id="voteyesradio" value="yes" checked>
                                Yes
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="vote" id="votenoradio" value="no">
                                No
                            </label>
                        </div>
                        <div class="form-group">
                            <input type="submit" name="submit" id="submitButton" class="btn btn-success btn-block" value="Vote!"/>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

这是JS代码:

$(".contentContainer").css("min-height", $(window).height());
$("#image").css("min-height", $("#beeweek").height());
$(document).ready(function () {

    $("#submitButton").click(function () {

        $("#myModal").modal('show');
    })
});
$(".video-container").css("min-height", $(window).height());

1 个答案:

答案 0 :(得分:0)

如果您不希望刷新页面,则应使用Ajax提交表单,此链接可以为您提供帮助,jQuery Ajax POST example with PHP