JQuery event.preventdefault and php

Question

I have a question concerning event.preventdefault. I used it on my client side validation just to make sure a username and password were filled in. However when I pressed the submit button and passed the validation on to php I got nothing. I mean when I checked if the form was submitted and did an echo to check I got nothing. But when I did (!isset($_POST['whatever']) I got something. Same goes for check if the fields were empty. I got nothing when I did empty, but got something when I did !empty

Jquery/html code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/verneyCustom.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div class="container">
      <!-- cms login form -->
      <form action="login.php" method="POST" class="form-signin" id="cms-signin">
        <h2 class="form-signin-heading">Please sign in</h2>
        <span class="text-center" id="jsError"></span><!-- display client side errors -->
        <input type="text" class="form-control" id="username" placeholder="Username" autofocus><br/>
        <input type="password" class="form-control" id="password" placeholder="Password"><br/>
        <input type="submit" class="btn btn-lg btn-primary btn-block" id="loginToSystem" value="Sign In">
      </form>
    </div> 

    <!-- include jquery v1.10.2 library to validate client side  -->
    <script src="js/jquery.js"></script>
    <script> 
        //if the form is submitted check if values are ok
        $("#cms-signin").submit(function(event){
            if($('#username').val() == "" || $('#password').val() == ""){
                event.preventDefault();
                $("#jsError").html('You must fill in the form.');
            }else if($('#username').val() == ""){
                event.preventDefault();
                $("#jsError").html('Username is required.');
            }else if($('#password').val() == ""){
                event.preventDefault();
                $("#jsError").html('Password is required.');
            }
        }); 
    </script>
  </body>
</html>

php code

<?php

    //include the connection to the cms database
    require_once($_SERVER['DOCUMENT_ROOT'].'/vcm/_cms/resources/database_connect.php');

    //check if the form was sent
    if(isset($_POST['loginToSystem'])){
        echo 'o';
        //create an array for errors
        $errors = array();

        //check if the username and password fields are empty
        //yes we did a check if jquery on the front but some people disable javascript
        if(empty($_POST['username']) || empty($_POST['password'])){
            echo 'empty';
        }else{
            echo 'ok';
        }
    }
    echo'p';

?>

So basically it echo's 'p' no matter what, but will only echo 'o' if isset is changed to !isset. It will echo empty when left as is, and ok when changed to !empty

Maybe if you add names, and not just ID's to your form elements, as that is what is used when a form is sent, the name and the value of the elements. — adeneo
Also, if the first condition is true, i.e. either username or password is empty, none of the 'else if' conditions are executed, making them totally useless as it is. — adeneo

suhailvs suhailvs · Accepted Answer · 2013-10-04T00:28:46

as adeneo explained you must add name

<form action="login.php" method="POST" class="form-signin" id="cms-signin">
        <h2 class="form-signin-heading">Please sign in</h2>
        <span class="text-center" id="jsError"></span><!-- display client side errors -->
        <input type="text" class="form-control"  name="username" id="username" placeholder="Username" autofocus><br/>
        <input type="password" class="form-control" name="password" id="password" placeholder="Password"><br/>
        <input type="submit" class="btn btn-lg btn-primary btn-block" id="loginToSystem" value="Sign In">
</form>

also you need && not ||

$("#cms-signin").submit(function(event){
        if($('#username').val() == "" && $('#password').val() == ""){
            event.preventDefault();
            $("#jsError").html('You must fill all fields.');
        }
    });

JQuery event.preventdefault and php

1 Answers