how to stop both javascript and php messages appearing

Question

In the code below I have two types of validation. I use a javascript validaton which displays the error message for when the user does not select a course form the "Course" drop down menu.

Then I have a php validation where that if it does not contain a row for the result from the query, then it displays a message stating that no assessments are found.

The problem I am having though is that if the user does not select a course from the "Course" drop down menu and they click on the submit button, it displays both the javascript validation and the php validation.

This is incorrect, what should happen is that :

• if the user has not selected a course, then it should simply show only the javascript validation and not the php validation.

  • if the user has selected a course from the drop down menu and submits the form, but it then cannot find any results from the query, then it should display the php validation.

My question is what do I need to change in the code in order to be able to not show both validation messages at the same time and show only the correct validation messages when they should be shown?

Javascript

function validation() {

    var isDataValid = true;

    var courseTextO = document.getElementById("coursesDrop");
    var moduleTextO = document.getElementById("modulesDrop");

    var errModuleMsgO = document.getElementById("moduleAlert");

    if (courseTextO.value == "") {
        $('#targetdiv').hide();
        $('#assessmentForm').hide();
        $('#updateForm').hide();
        $('#submitupdatebtn').hide();
        errModuleMsgO.innerHTML = "Please Select a Course";
        isDataValid = false;
    } else {
        errModuleMsgO.innerHTML = "";
    }
    return isDataValid;

}​

PHP/HTML

<?php

// connect to the database
include('connect.php');


/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    die();
}


$sql = "SELECT CourseId, CourseNo, CourseName FROM Course ORDER BY CourseId"; 

$sqlstmt=$mysqli->prepare($sql);

$sqlstmt->execute(); 

$sqlstmt->bind_result($dbCourseId, $dbCourseNo, $dbCourseName);

$courses = array(); // easier if you don't use generic names for data 

$courseHTML = "";  
$courseHTML .= '<select name="courses" id="coursesDrop">' . PHP_EOL; 
$courseHTML .= '<option value="">Please Select</option>' . PHP_EOL;  

$outputcourse = "";

while($sqlstmt->fetch()) 
{

    $course = $dbCourseId;
    $courseno = $dbCourseNo;
    $coursename = $dbCourseName; 

    $courseHTML .= "<option value='" . $course . "'>" . $courseno . " - " . $coursename . "</option>" . PHP_EOL;  

    if (isset($_POST['courses']) && ($_POST['courses'] == $course)) {
        $outputcourse = "<p><strong>Course:</strong> " . $courseno .  " - "  . $coursename . "</p>";
    }

} 

$courseHTML .= '</select>'; 

?>

<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validation();">
    <table>
        <tr>
            <th>Course: <?php echo $courseHTML; ?></th>
        </tr>
    </table>
    <p>
        <input id="moduleSubmit" type="submit" value="Submit Course and Module" name="moduleSubmit" />
    </p>
    <div id="moduleAlert"></div>
    <div id="targetdiv"></div>
</form>


<?php

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

    $sessionquery = "
    SELECT SessionId, SessionName, SessionDate, SessionTime, CourseId, SessionActive
    FROM Session
    WHERE (CourseId = ? AND SessionActive = ?)
    ORDER BY SessionName 
    ";

    $active = 1;

    $sessionqrystmt=$mysqli->prepare($sessionquery);
    // You only need to call bind_param once
    $sessionqrystmt->bind_param("si",$course, $active);
    // get result and assign variables (prefix with db)

    $sessionqrystmt->execute(); 

    $sessionqrystmt->bind_result($dbSessionId,$dbSessionName,$dbSessionDate,$dbSessionTime, $dbCourseId, $dbSessionActive);

    $sessionqrystmt->store_result();

    $sessionnum = $sessionqrystmt->num_rows();   

    if($sessionnum == 0) {
        echo "<p><span style='color: red'>Sorry, You have No Assessments under this Module</span></p>";
    } 
    else 
    { 
        echo "";
    }

    ...

}
?>

Answer 1

you could replace

if (isset($_POST['moduleSubmit']))

by

if (isset($_POST['coursesDrop']) && $_POST['coursesDrop']!="")

That way you can prevent php to make a request when there is no need for this, That's if you want to do the validation server side.

If you want to prevent the form to be submited when submit button is clicked (client side),

you could replace onsubmit="return validation();" by onclick="validation();" on the submit button. And if the data passes the validation call $("#yourForm").submit().

EDIT Here you'll find the complete code as requested

JAVASCRIPT

function validation() {

    var isDataValid = true;

    var courseTextO = document.getElementById("coursesDrop");
    var moduleTextO = document.getElementById("modulesDrop");

    var errModuleMsgO = document.getElementById("moduleAlert");

    if (courseTextO.value == "") {
        $('#targetdiv').hide();
        $('#assessmentForm').hide();
        $('#updateForm').hide();
        $('#submitupdatebtn').hide();
        errModuleMsgO.innerHTML = "Please Select a Course";
        isDataValid = false;
    } else {
        errModuleMsgO.innerHTML = "";
    }

    if(isDataValid){
        $("#myForm").submit();
    }

}​

PHP HTML

// connect to the database
include('connect.php');


/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    die();
}


$sql = "SELECT CourseId, CourseNo, CourseName FROM Course ORDER BY CourseId"; 

$sqlstmt=$mysqli->prepare($sql);

$sqlstmt->execute(); 

$sqlstmt->bind_result($dbCourseId, $dbCourseNo, $dbCourseName);

$courses = array(); // easier if you don't use generic names for data 

$courseHTML = "";  
$courseHTML .= '<select name="courses" id="coursesDrop">' . PHP_EOL; 
$courseHTML .= '<option value="">Please Select</option>' . PHP_EOL;  

$outputcourse = "";

while($sqlstmt->fetch()) 
{

    $course = $dbCourseId;
    $courseno = $dbCourseNo;
    $coursename = $dbCourseName; 

    $courseHTML .= "<option value='" . $course . "'>" . $courseno . " - " . $coursename . "</option>" . PHP_EOL;  

    if (isset($_POST['courses']) && ($_POST['courses'] == $course)) {
        $outputcourse = "<p><strong>Course:</strong> " . $courseno .  " - "  . $coursename . "</p>";
    }

} 

$courseHTML .= '</select>'; 

?>

<form id="myForm" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
    <table>
        <tr>
            <th>Course: <?php echo $courseHTML; ?></th>
        </tr>
    </table>
    <p>
        <input id="moduleSubmit" type="button" value="Submit Course and Module" name="moduleSubmit" onclick="validation();" />
    </p>
    <div id="moduleAlert"></div>
    <div id="targetdiv"></div>
</form>


<?php

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

    $sessionquery = "
    SELECT SessionId, SessionName, SessionDate, SessionTime, CourseId, SessionActive
    FROM Session
    WHERE (CourseId = ? AND SessionActive = ?)
    ORDER BY SessionName 
    ";

    $active = 1;

    $sessionqrystmt=$mysqli->prepare($sessionquery);
    // You only need to call bind_param once
    $sessionqrystmt->bind_param("si",$course, $active);
    // get result and assign variables (prefix with db)

    $sessionqrystmt->execute(); 

    $sessionqrystmt->bind_result($dbSessionId,$dbSessionName,$dbSessionDate,$dbSessionTime, $dbCourseId, $dbSessionActive);

    $sessionqrystmt->store_result();

    $sessionnum = $sessionqrystmt->num_rows();   

    if($sessionnum == 0) {
        echo "<p><span style='color: red'>Sorry, You have No Assessments under this Module</span></p>";
    } 
    else 
    { 
        echo "";
    }

    ...

}
?>