February 16, 201214 yr I don't ever seem to get a javascript to work. Here's a simple html form which I'm trying to use jquery/ajax to validate and its not quite working. The basic validation bit works but if I input a correct or incorrect combination of email and password, nothing happens. I've hardcoded these values to simplify debugging. Please tell me where I'm going wrong. Thanks Here's the html form <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-\type" content="text/html; charset=utf-8" /> <title>Contact Me</title> <link rel= "stylesheet" href="css/style.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery-1.6.1.min.js" charset="utf-8"></script> <script type="text/javascript" src="js/login.js" charset="utf-8"></script> </head> <body> <div id="content"> <h1>Login</h1> <p id="results"></p> <form id="login" action="login.php" method="post" /> <p id="emailP">Email Address: <input type="text" name="email" id="email"> <span class="errorMessage" id="emailError">Please enter your email address</span></p> <p id="passwordP">Password: <input type="password" name="password" id="password"> <span class="errorMessage" id="passwordError">Please enter your password</span></p> <p><input type="submit" name="submit" value="Login" class="formbutton"/></p> <input type="hidden" name="submitted" value="TRUE" /> </form> </div> </body> </html> js file $(function() { $('.errorMessage').hide(); $('#login').submit(function() { var email, password; if ($('#email').val().length >= 6) { email = $('#email').val(); $('#emailP').removeClass('error'); $('#emailError').hide(); } else { $('#emailP').addClass('error'); $('#emailError').show(); } if ($('#password').val().length > 0) { password = $('#password').val(); $('#passwordP').removeClass('error'); $('#passwordError').hide(); } else { $('#passwordP').addClass('error'); $('#passwordError').show(); } if (email && password) { var data = new Object(); data.email = email; data.password = password; var options = new Object(); options.data = data; options.dataType = 'text'; options.type = 'get'; options.success = function(response) { if (response == 'CORRECT') { $('#login').hide(); $('#results').removeClass('error'); $('#results').text('You are now logged in!'); } else if (response == 'INCORRECT') { $('#results').text('The submitted credentials do not match those on file!'); $('#results').addClass('error'); } else if (response == 'INCOMPLETE') { $('#results').text('Please provide an email address and password.'); $('#results').addClass('error'); } else if (response == 'INVALID_EMAIL') { $('#results').text('Please enter your email address.'); $('#results').addClass('error'); } }; // end of options.success function definition options.url = 'login_ajax.php'; $.ajax(options); } // end of email && password IF return false; }); }); and login_ajax.php file <?php if (isset($_GET['email'], $_GET['password '])) { if (filter_var($_GET['email'], FILTER_VALIDATE_EMAIL)) { if (($_GET['email'] == 'email@company.com') && ($_GET['password'] == 'testpass') ) { echo 'CORRECT'; } } else { echo 'INCORRECT'; } } else { echo 'INVALID_EMAIL'; } } else { echo 'INCOMPLETE'; } ?>
February 17, 201214 yr There's an error in your login_ajax.php script. There's an extra bracket in the code that's breaking the if/else functions. If you delete the "}" on line 6 it should work.
February 17, 201214 yr Author Thanks for replying. That worked. Oddly though it didn't work at first even though I refreshed multiple times.
Create an account or sign in to comment