wizzy886 Posted July 13, 2014 Share Posted July 13, 2014 So basically I am attempting to make my code work with AJAX also to get rid of the page refreshing to the user. It does physically submit the data to the file and write it how it is supposed to be. However the notifications are not working at all. I am not the best at bug shooting JS stuff as I don't use it a lot - but would be grateful if someone can point out where I am going wrong. <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="HandheldFriendly" content="true" /> <link rel="stylesheet" type="text/css" href="css/default.css" /> <script src="scripts/jquery-1.11.1.min.js"></script> <script> $(document).ready(function() { $('#formContainer').submit(function() { var formData = $(this).serialize(); $.post('index.php', formData, processData); function processData(data) { if (data=='1') { $('.form').html('<p>success</p>'); } else if (data=='2') { $('#form').prepend('<p>already exists</p>'); } else if (data=='3') { $('#form').prepend('<p>fail</p>'); } } return false; }); }); </script> <title>WyTraining</title> </head> <body class="background"> <header> <div class="logo"><a href="index.php"><img src="images/logo.png" alt="wyTraining"></a></div> </header> <div class="form"> <div class="title">coming soon</div> <?php /* email entered = 1 */ /* email exists = 2 */ /* email incorrect = 3 */ if($_SERVER['REQUEST_METHOD'] == 'POST') { $trimmed = array_map('trim', $_POST); if(filter_var($trimmed['email'], FILTER_VALIDATE_EMAIL)) { $file = 'data\emails.txt'; if( strpos(file_get_contents($file),$trimmed['email']) == false) { $email = $trimmed['email']; echo '1'; $current = file_get_contents($file); $current .= "$email,\n"; file_put_contents($file, $current); } else { echo '2'; } } else { echo '3'; } } ?> <center><form action="index.php" method="POST" id="formContainer"> <input type="text" name="email" value="" placeholder="enter email to stay updated" autocomplete="off"/> <input type="submit" name="submit" value=" " class="button"/> </form></center> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
fastsol Posted July 14, 2014 Share Posted July 14, 2014 You have 2 of your jquery elements trying to post to id="form" but it should be class instead $('#form') // Should be $('.form') Quote Link to comment Share on other sites More sharing options...
wizzy886 Posted July 14, 2014 Author Share Posted July 14, 2014 (edited) Changes made, and still no alert as to what has happened to the data Live version is up btw = http://wytraining.net Edited July 14, 2014 by wizzy886 Quote Link to comment Share on other sites More sharing options...
Solution fastsol Posted July 14, 2014 Solution Share Posted July 14, 2014 Ok the problem is what I kind of originally thought, it's cause you are sending the ajax request to the same page you're already on. The reponse is the entire page code not just the 123 that you are expecting. You should always send a ajax request to a separate page that only does the request and nothing else. Also you have a 404 error for one of your fonts. NetworkError: 404 Not Found - http://wytraining.net/css/fonts/Roboto-Thin.woff Quote Link to comment Share on other sites More sharing options...
wizzy886 Posted July 14, 2014 Author Share Posted July 14, 2014 Thank you did not know this was required but will structure it like that from now on. Quote Link to comment Share on other sites More sharing options...
fastsol Posted July 14, 2014 Share Posted July 14, 2014 Glad it worked. It's by no means "required", but it certainly helps expecially when dealing with things like you are. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.