如何制作Ajax联系表格

Question

PS edited to remove unnecessary code

Can you tell me what I'm doing wrong here? The error log doesn't show a thing.

Here's my html, js, and php.

sample.js

  // this is to prevent page refresh, right? stepsForm.prototype.options = { onSubmit : function() { return false; } }; // submits the form, but i add some js in sample.html, so this one will not work. stepsForm.prototype._submit = function() { this.options.onSubmit( this.el ); } 

sample.html

 <div class="container"> <section> <form id="theForm" class="simform" autocomplete="off" action="form-process.php"> <div class="simform-inner"> <ol class="questions"> <li> <span><label for="q1">What's your name / full name?</label></span> <input id="q1" name="q1" type="text" /> </li> <li> <span><label for="q2">What's your email address?</label></span> <input id="q2" name="q2" type="text" data-validate="email" /> </li> <li> <span><label for="q3">What's your phone number?</label></span> <input id="q3" name="q3" type="text" data-validate="phone" /> </li> <li> <span><label for="q4">Type your question below?</label></span> <input id="q4" name="q4" type="text" /> </li> </ol> <!-- /questions --> <button class="submit" type="submit">Send answers</button> <div class="controls"> <button class="next"></button> <div class="progress"></div> <span class="number"> <span class="number-current"></span> <span class="number-total"></span> </span> <span class="error-message"></span> </div> <!-- / controls --> </div> <!-- /simform-inner --> <span class="final-message"></span> </form> <!-- /simform --> </section> </div> <!-- /container --> <script src="js/classie.js"></script> <script src="js/stepsForm.js"></script> <!-- this is the script that will replace the one in the sample.js --> <script> var theForm = document.getElementById('theForm'); new stepsForm(theForm, { onSubmit: function(form) { classie.addClass(theForm.querySelector('.simform-inner'), 'hide'); var name = $("#q1").val(); var email = $("#q2").val(); var number = $("#q3").val(); var message = $("#q4").val(); $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", dataType: "json", url: "form-process.php", data: JSON.stringify({ name: name, email: email, number: number, message: message }), success: function(response) { var data = response.d; var messageEl = theForm.querySelector('.final-message'); messageEl.innerHTML = 'Thank you! We\\'ll be in touch.'; classie.addClass(messageEl, 'show'); } }); } }); </script> 

sample.php

  $EmailTo = "mail@mail.com"; $Subject = "New Message Received"; // prepare email body text $Body = ""; $Body .= "Name: "; $Body .= $name; $Body .= "\\n"; $Body .= "Email: "; $Body .= $email; $Body .= "\\n"; $Body .= "Phone Number: "; $Body .= $number; $Body .= "\\n"; $Body .= "Message: "; $Body .= $message; $Body .= "\\n"; // send email $success = mail($EmailTo, $Subject, $Body, "From:".$email); // redirect to success page 

so the step for this process is get the input from html, process it with ajax (js), then send it to sample.php to mail it, right? but I cant seem to pass the ajax process or sample.php. my code result in blank page and no outgoing email.

Since I'm new to php and js, I mostly reverse engineer the source to make it suitable for me. This time I have taken the "minimalist form interface" from codrops.

and this is also my first post in SO, so please be gentle :)

Answer 1

You chose a very complicated example. Here is a MUCH simpler AJAX contact form to learn from.

index.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/index.js" type="text/javascript"></script>

<!--  Whatever code you have above the contact form  -->

<!--  A very simple contact form -->
<div id="frmContact">
    Name: <input id="name" type="text" />
    Email: <input id="email" type="text" />
    Comment: <textarea id="comment" rows="4" cols="40"></textarea>
    <button id="mybutt">Send</button>
</div>

index.js

$(document).ready(function(){
    $('#mybutt').click(function(){
        var na = $('#name').val();
        var em = $('#email').val();
        var cm = $('#comment').val();

        if (na=='' || em=='' || cm==''){
            alert("Please complete all fields");
            return false;
        }

        $.ajax({
            type: 'post',
             url: 'your_php_ajax_file.php',
            data: 'na='+na+'&em='+em+'&cm='+cm,
            success: function(d){
                if (d.length) alert(d);
            }
        }); //END ajax
    }); //END #mybutt.click
});

your_php_ajax_file.php

<?php

    function sanitize($data) {
        return htmlentities(strip_tags(mysql_real_escape_string($data)));
    }

    // sanitize your inputs 
    $na = sanitize($_POST['na']);
    $em = sanitize($_POST['em']);
    $cm = sanitize($_POST['cm']);

    $dt = date('Y-M-d H:i:s');

    $body = '
        <div style="width:100%;text-align:center;margin:0 0 30px 0;font-family:Arial;font-size:30px;font-weight:bold;">Website Contact Form</div>
        <div style="text-align:left;margin:10px 0;font-family:Arial;font-size:22px;">'.$dt.'</div>
        <div style="text-align:left;margin:10px 0;font-family:Arial;font-size:22px;">'.$na.'</div>
        <div style="text-align:left;margin:10px 0;font-family:Arial;font-size:22px;">'.$em.'</div>
        <hr style="color:#cccccc;">
        <div style="text-align:left;margin:10px 0;font-family:Arial;font-size:22px;">'.$cm.'</div>
    ';


    $headers = "";
    $headers .= "Content-type: text/html; charset=iso-8859-1\n";
    $headers .= "From: website@example.com\n";
    $headers .= "Organization: example.com\n";
    $headers .= "X-Priority: 3\n";
    $headers .= "X-Mailer: PHP". phpversion() ."\n" . PHP_EOL;
    $msg = '<!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">';
    $msg .= $body;

    mail($to, $subject, $msg, $headers);
    mail('youremail@hotmail.com', 'Contat form', $msg, $headers);

    echo 'Contact form sent';

---

Regarding AJAX, here are some good posts for getting the basics of AJAX:

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

NB: Note that the PHP AJAX processor code cannot be part of the same PHP file (eg index.php) that you are calling it from (or else it won't work and the entire page will be echoed back to you as the "ajax response")