Check if input field empty

Question

I have used the code below elsewhere in my site and it works. For the life of me I can't understand why it doesn't work here. PROBLEM: keeps throwing alert message.

My HTML:

<form action="processForms.php" method="post" id="joinCommitteeForm" class="headForm shadow">
                <div class="outerBlue" style="background:white">
                    <button type="button" id="cancelForm" class="button" title="Cancel">X</button>
                <br><br>
                <h3>Get involved&mdash;join a committee!</h3>

                <?php if(empty($name)||empty($email)||empty($workPhone)){
                echo "<p class='red'>All fields must be filled out...</p><br><br>";
                }?>
                <label for="name" style="width:40px">Name</label><input type="text" name="name" id="name"/><br>
                <label for="email" style="width:40px" class="clear">Email</label><input type="text" name="email" id="email"/><br>
                <label for="phone" style="width:40px;margin-bottom:20px" class="clear">Phone</label><input type="text" name="dayPhone" id="phone"/>
                <hr>
                <p class="clear">Please select a committee from the list below</p><br><br>
                <select name="comName" id="comName" style="width:215px;margin-left:50px;float:left">
                <option value="">Select one...</option>
                <?php
                $sql = mysql_query("SELECT committeeName FROM committeeName ORDER BY committeeName");
                while ($row = mysql_fetch_assoc($sql)){
                    echo "<option value = '".$row['committeeName']."'>".$row['committeeName']."</option>";
                }
                echo "</select>";?>
                <input type="submit" name="submitCommitteeInterest" class="button orange-button clear" value="Submit" style="margin-top:40px"/>
                <div class="clear"></div>
                <p class="small white" style="line-height:1em;margin-top:20px">NSGP never sells or gives away your personal information</p>
            </div>
            </form>

My JS:

$("#joinCommitteeForm").submit(function() {
        if ($.trim($("#email").val()) === "" || $.trim($("#name").val()) === "") {
            alert('All fields are required');
            return false;
        }
    });

Answer 1

What I suspect the problem is here, is that you are testing if $name or $email is empty, but since you never define them, they will always be empty, per PHP empty() docs : "A variable is considered empty if it does not exist or if its value equals FALSE ".

To fix that, you'll need to change your PHP if-statement to:

<?php if(empty($_POST['name'])||empty($_POST['email'])||empty($_POST['dayPhone'])){
  echo "<p class='red'>All fields must be filled out...</p><br><br>";
}?>

Also, your POST parameter $workPhone doesn't seem to exist in your form. I've changed it to dayPhone here.

The variable $_POST will contain all parameters in the POST request from the form that's submitted.