How to validate a form in a bootstrap modal using PHP?

Question

As soon as the form is submitted, the form is not validated and the modal is closed because the page is refreshed. I want the modal to stay open on submitting the form. The php is given below:

<?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);
        }

    };
}

Here is the HTML of the modal, the PHP is embedded in the HTML, where the error messages should be shown when the form is validated after submission:

<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>

This is the JS code:

$(".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());

I answered a very similar question yesterday and added an example: http://stackoverflow.com/questions/42602864/php-show-alert-before-excuting-the-code/42602972#42602972 — Yolo, Mar 05 '17 at 14:05
Ajax is the way to go as you need to submit the form and get the response without refreshing the page. — neophyte, Mar 05 '17 at 14:58

score 0 · Answer 1 · edited May 23 '17 at 12:25

0

If you don't want the page being refreshed, you should submit your form using Ajax, this link should help you, jQuery Ajax POST example with PHP

edited May 23 '17 at 12:25

Community

1
1

answered Mar 05 '17 at 13:55

julien

86
2
8

Thanks this is what I was looking for! – Jovan Gligorević Mar 07 '17 at 08:52

How to validate a form in a bootstrap modal using PHP?

1 Answers1