Question

I am creating a comment form based on the jquery validation plugin (http://docs.jquery.com/Plugins/Validation). I am trying to integrate the jquery validation plugin with my form, but am having trouble getting the php response message to appear under the form via ajax.

Currently, the ‘print’ed php message “Form submitted successfully” appears as a browser popup. How do I configure the AJAX / JS to display the php message “Form submitted successfully” underneath the html form?

 <script>
 $(document).ready(function(){
 $("#commentForm").submit(function(){
    if($("#commentForm").validate()){
        $.ajax({
            type: 'POST',
            url: 'process.php',
            data: $(this).serialize(),
            success: function(returnedData){
                alert(returnedData);
            }
        });
    }
    return false; }); });
  </script>

<form class="cmxform" id="commentForm" method="POST" action="process.php">
   <label for="cname">Name</label>
   <input id="cname" name="name" size="25" class="required" minlength="2" />
   <label for="cemail">E-Mail</label>
   <input id="cemail" name="email" size="25"  class="required email" />
   <label for="curl">URL</label>
   <input id="curl" name="url" size="25"  class="url" value="" />
   <label for="ccomment">Your comment</label>
   <textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
<input class="submit" type="submit" value="Submit"/>

And the php is pretty standard too:

<?php

$to      = '[e-mail]';
$subject = 'the subject';
$message = 'hello';
$headers = 'From: [e-mail]';

mail($to, $subject, $message, $headers);

print "Form submitted successfully: <br>Your name is <b>".$_POST['cname']."</b> and your email is <b>".$_POST['email']."</b><br>";
?>

Thanks for any help.

Answer 1

Use jQuery .append() method instead of alert and that’s it! This will append text/html you are sending to client to the form. You could use prepend() if you want to show the message on the top.

success: function(returnedData){
                $('#commentForm').append(returnedData);
            }