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

标签 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());

最佳答案

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

关于javascript - 如何使用 PHP 验证引导模式中的表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42608994/

相关文章:

javascript - jQuery 查找 id 然后执行操作

javascript - ES6 : Unexpected token import

php - Amazon S3 删除标记

html - 如何让链接填充不同高度的表格单元格?

html - 使用分块编码有什么好处?

javascript - 当与 attr 函数一起使用时,javascript 数组中的元素输出未定义而不是实际值

javascript - 在 angular2 中获取参数

php - 仅使用 PHP 提交表单?没有 JavaScript?

php - 如何减少 PHP 中的图像加载时间

javascript - JavaScript 中的全局变量可在函数内更改