1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How do I complete this AJAX form

Discussion in 'Programming' started by Codelang, Dec 8, 2021.

  1. #1
    Hi, how do I get this form to function well, when you click on send message, it only has an alert-success class on the HTML, so all messages come as green even if it's an error message. Thank you

    Here is the HTML
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Ajax Contact Form</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    </head>
    <body>
    
        <!-- ajax contact form -->
        <section style="margin-top: 50px;">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <div class="card">
                            <h5 class="card-header">Ajax Contact Form</h5>
                            <div class="card-body">
                                <form class="contact__form" method="post" action="mail.php">
                                   
                                    <!-- form message -->
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="alert alert-success contact__msg" style="display: none" role="alert">
                                                Your message was sent successfully.
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end message -->
    
                                    <!-- form element -->
                                    <div class="row">
                                        <div class="col-md-6 form-group">
                                            <input name="name" type="text" class="form-control" placeholder="Name" required>
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <input name="email" type="email" class="form-control" placeholder="Email" required>
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <input name="phone" type="text" class="form-control" placeholder="Phone" required>
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <input name="subject" type="text" class="form-control" placeholder="Subject" required>
                                        </div>
                                        <div class="col-12 form-group">
                                            <textarea name="message" class="form-control" rows="3" placeholder="Message" required></textarea>
                                        </div>
                                        <div class="col-12">
                                            <input name="submit" type="submit" class="btn btn-success" value="Send Message">
                                        </div>
                                    </div>
                                    <!-- end form element -->
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="main.js"></script>
    </body>
    </html>
    HTML:
    This is the JavaScript
    (function ($) {
        'use strict';
    
        var form = $('.contact__form'),
            message = $('.contact__msg'),
            form_data;
    
        // Success function
        function done_func(response) {
            message.fadeIn().removeClass('alert-danger').addClass('alert-success');
            message.text(response);
            setTimeout(function () {
                message.fadeOut();
            }, 2000);
            form.find('input:not([type="submit"]), textarea').val('');
        }
    
        // fail function
        function fail_func(data) {
            message.fadeIn().removeClass('alert-success').addClass('alert-success');
            message.text(data.responseText);
            setTimeout(function () {
                message.fadeOut();
            }, 2000);
        }
       
        form.submit(function (e) {
            e.preventDefault();
            form_data = $(this).serialize();
            $.ajax({
                type: 'POST',
                url: form.attr('action'),
                data: form_data
            })
            .done(done_func)
            .fail(fail_func);
        });
       
    })(jQuery);
    Code (JavaScript):

    And this is the PHP
    <?php
    
        if ($_SERVER["REQUEST_METHOD"] == "POST") {
    
            # FIX: Replace this email with recipient email
            $mail_to = "demo@gmail.com";
           
            # Sender Data
            $subject = trim($_POST["subject"]);
            $name = str_replace(array("\r","\n"),array(" "," ") , strip_tags(trim($_POST["name"])));
            $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
            $phone = trim($_POST["phone"]);
            $message = trim($_POST["message"]);
           
            if ( empty($name) OR !filter_var($email, FILTER_VALIDATE_EMAIL) OR empty($phone) OR empty($subject) OR empty($message)) {
                # Set a 400 (bad request) response code and exit.
                http_response_code(400);
                echo "Please complete the form and try again.";
                exit;
            }
           
            # Mail Content
            $content = "Name: $name\n";
            $content .= "Email: $email\n\n";
            $content .= "Phone: $phone\n";
            $content .= "Message:\n$message\n";
    
            # email headers.
            $headers = "From: $name <$email>";
    
            # Send the email.
            $success = mail($mail_to, $subject, $content, $headers);
            if ($success) {
                # Set a 200 (okay) response code.
                http_response_code(200);
                echo "Thank You! Your message has been sent.";
            } else {
                # Set a 500 (internal server error) response code.
                http_response_code(500);
                echo "Oops! Something went wrong, we couldn't send your message.";
            }
    
        } else {
            # Not a POST request, set a 403 (forbidden) response code.
            http_response_code(403);
            echo "There was a problem with your submission, please try again.";
        }
    
    ?>
    PHP:

     
    Codelang, Dec 8, 2021 IP