Jump to content

PHP AJAX Email Form


wizzy886
Go to solution Solved by fastsol,

Recommended Posts

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>

Link to comment
Share on other sites

  • Solution

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.