How to display error message inside a pop up window instead of moving to a new page?

Question

I'm new to php, and I'm new here and I don't know if it's right for me to ask a question in such a long manner. I'm sorry if that's not how it is done here.

• I have the following code which is used to enter a question and it's four choices.
• 4 choices are entered in text boxes with a radio button corresponding to each.
• The button clicked out of those 4 will be the value of $correct
• $difflevel, $agegroup and $catId are again, the values from a set of radio buttons.

The following is my code

    if(isset($_POST['submit']))
    {

    extract($_POST);
    $question=mysqli_real_escape_string($con,$question);
    $option[0]=mysqli_real_escape_string($con,$option[0]);
    $option[1]=mysqli_real_escape_string($con,$option[1]);
    $option[2]=mysqli_real_escape_string($con,$option[2]);
    $option[3]=mysqli_real_escape_string($con,$option[3]);

    mysqli_query($con,"insert into questions(question, op1,op2,op3,op4,correct,difflevel,ageGroup,catId) values
    ('$question','$option[0]','$option[1]','$option[2]','$option[3]',$correct,$difflevel,$ageGroup,$catId)") or die("Some error");

    $questionId = mysqli_insert_id($con);

    if($_POST['catId']=="")//QUESTIONS MUST CONTAIN AT LEAST ONE CATEGORY
        die("Please select category of the question entered.");

    if($_POST['difflevel']=="")//DIFFICULTY LEVEL SHOULD BE SET
        die("Please select difficulty of the question entered.");

    if($_POST['ageGroup']=="")//AGEGROUP SHOULD BE SET
        die("Please select age group of the question entered.");

    if($_POST['correct']=="")//CORRECT ANSWER SHOULD BE SET
        die("Please select correct answer for the question entered.");
    }

Since all fields are mandatory, I need an error report if not all are filled(or clicked). Right now, when the error occur, it's taken to a new page, and hence all that I typed are lost and I have to type them again. So instead of going to the next page, is it possible to show a pop-up window with the error so that I can correct the mistake and continue from where I stopped? Any help is so much appreciated. Thanks in advance.

Answer 1

If you allow the user to POST the form by clicking the submit button, the page will redirect to the action parameter of form tag. You will then lose all entered data on the form. There are workarounds to overcome this using this method but it is a little bit quirky.

But instead of posting form using standard html form elements, post the form using AJAX, then the page will not redirect/refresh, and all previously entered form data will be preserved. Then parse response text and put corresponding error messages accordingly.

Here is an example:

<form>
    <input type="text" id="someText" value="" /><br />
    <button id="submit_button">Submit</button>
</form>

<script type="text/javascript">

$(function(){
    $("#submit_button").click(function(){
        var someText = $("#someText").val();
        $.post("/handle_ajax.php",{someText:someText},function(resp){
            if(resp !== "OK"){
                alert("ERROR OCCURED "+resp)
            }
        });
    });
});

</script>

here is very simple php ajax handler

<?php

if(empty($_POST["someText"])){
    echo "someText field cannot be left blank";
}else{
    echo    "OK";
}

?>

Now if you want to be fancy, instead of alerting the error message, put all error messages in a pretty html form in to the form, and clear them if all went ok.

Answer 2

Make use of JavaScript alert

    <?php
if(isset($_POST['submit']))
{

    extract($_POST);
    $question=mysqli_real_escape_string($con,$question);
    $option[0]=mysqli_real_escape_string($con,$option[0]);
    $option[1]=mysqli_real_escape_string($con,$option[1]);
    $option[2]=mysqli_real_escape_string($con,$option[2]);
    $option[3]=mysqli_real_escape_string($con,$option[3]);

    mysqli_query($con,"insert into questions(question, op1,op2,op3,op4,correct,difflevel,ageGroup,catId) values
    ('$question','$option[0]','$option[1]','$option[2]','$option[3]',$correct,$difflevel,$ageGroup,$catId)") or die("Some error");

    $questionId = mysqli_insert_id($con);

    if($_POST['catId']=="")//QUESTIONS MUST CONTAIN AT LEAST ONE CATEGORY
        echo "<script>alert('Please select category of the question entered.')</script>";
    exit;
        //die("Please select category of the question entered.");

    if($_POST['difflevel']=="")//DIFFICULTY LEVEL SHOULD BE SET
        echo "<script>alert('Please select difficulty of the question entered')</script>";
    exit;

    if($_POST['ageGroup']=="")//AGEGROUP SHOULD BE SET
        echo "<script>alert('Please select age group of the question entered.')</script>";
    exit;

    if($_POST['correct']=="")//CORRECT ANSWER SHOULD BE SET
        echo "<script>alert('Please select correct answer for the question entered.')</script>";
    exit;
}

Answer 3

You can use java script validation.So, if some one tries to submit the form without filling in mandatory fields, you can pop an alert message. jQuery validation library handles this perfectly.