JQuery Form remains static - page doesn't validate on the fly

Question

I'm having some problems with my contact form using jquery.

I've used this same code several times before but this time I've changed divs and classes to have meaningful names.

Everything works, it's just that when you press submit, you are physically taken to send.php instead of the data being placed in the placeholder div.

It's driving me mad so I was wondering if another few pairs of eyes could spot something?

Thanks,

Martin

All JS includes in the head of the page:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.anchor.js" type="text/javascript"></script>
<script src="js/jquery.fancybox-1.2.6.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.highlight').hover(function(){
        $(this).children().addClass('datahighlight');
    },function(){
        $(this).children().removeClass('datahighlight');
    });
  });
  </script>

<script type="text/javascript">
window.addEvent('domready', function(){
$('contactform').addEvent('submit', function(e) {
new Event(e).stop();
var log = $('form_results').empty().addClass('ajax-loading');
this.send({
update: log,
onComplete: function() {
log.removeClass('ajax-loading');
                       }
                    });
                });
            });
</script>      

Contact section:

        <h2 class="contact">Contact Us</h2>

        <p> Some text</p>

        <div id="log">
            <div id="form_results">
                <!-- SPANNER -->
            </div>
        </div>

        <form method="post" id="contactform" action="send.php"> 

            <p><label for="name">Name</label></p> 
            <input type="text" id=name name=name placeholder="First and last name" tabindex="1" /> 

            <p><label for="email">Email</label></p> 
            <input type="text" id=email name=email placeholder="example@domain.com" tabindex="2" /> 

            <p><label for="comment">Your Message</label></p> 
            <textarea name="comment" id=comment name=comment placeholder="Comments" tabindex="4"></textarea> 

            <input name="submit" type="submit" id="submit" tabindex="5" value="Send Message" /> 

        </form> 


    </section>

Send.php:

<?php

function alpha_numeric($str)
{
    return ( ! preg_match("/^([-a-z0-9])+$/i", $str)) ? FALSE : TRUE;
}

function valid_email($str)
{
    return ( ! preg_match("/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ix", $str)) ? FALSE : TRUE;
}

if ($_POST['name']=='' || strlen($_POST['name'])<3)
{
    $errors[] = 'Please include your name, it helps when contacting you! [needs to be more than 3 characters]';
}

if (valid_email($_POST['email'])==FALSE)
{
    $errors[] = 'At least put a real e-mail address!';
}

if ($_POST['comment']=='' || strlen($_POST['comment'])<3)
{
    $errors[] = 'Please write something, otherwise it\'s pointless contacting us!';
}

if(is_array($errors))
{
    echo '<div id="error-margin">';
    echo '<p class="error"><b>Can\'t send it for the following reasons:</b></p><br />';
    while (list($key,$value) = each($errors))
    {
        echo '<span class="error">'.$value.'</span><br /><br />';
    }
    echo'</div>';
}
else {
    // do something here----store to db, send email
    echo'<div id="success">';
    echo '<p><b>It worked!</b></p>';
    echo '<span>Thanks for contacting us! We\'ll be in touch soon</span>';
    echo'</div>';

    $name = stripslashes($_POST['name']); //sender's name
    $email = stripslashes($_POST['email']); //sender's email


    // The subject
    $subject  = "Message from 4playtheband.co.uk "; //The default subject. Will appear by default in all messages.

    $msg  = "From :   $name \r\n";  // add sender's name to the message
    $msg .= "e-mail : $email \r\n\n";  // add sender's email to the message
    $msg .= "---Message--- \r\n\n\t".stripslashes($_POST['comment'])."\r\n\n";  // the message itself

    // Extras:
    // Display user information such as Ip address and browsers information...
    $msg .= "---User information--- \r\n\n"; //Title
    $msg .= "User IP Address: ".$_SERVER["REMOTE_ADDR"]."\r\n"; //Sender's IP
    $msg .= "Browser: ".$_SERVER["HTTP_USER_AGENT"]."\r\n"; //User agent
    $msg .= "Page User Came From: ".$_SERVER["HTTP_REFERER"]; //Referrer

    // Send!
    (mail('someone', $subject, $msg, "From: $email\r\nReply-To: $email\r\nReturn-Path: $email\r\n"));

}

?>

Answer 1

• DEMO & SOURCE: http://ask.altervista.org/demo/jquery-form-remains-static-page-doesnt-validate-on-the-fly/

you are using jquery, so there is no need to use window.addEvent('domready', function(){

you js code should look like this:

$('#contactform').submit(function() {
    var query = $(this).serialize();
    $('#form_results').fadeOut(500).addClass('ajax-loading');
    $.ajax({
        type: "POST",
        url: "send.php",
        data: query,
        success: function(data) {
            $('#form_results').removeClass('ajax-loading').html(data).fadeIn(500);
        }
    });
    return false;
});

Answer 2

window.addEvent('domready',... is from MooTool. Since you use Jquery you may have to add

<script language="javascript" type="text/javascript">
  jQuery.noConflict();
</script>

before. Oh and it seems that FancyUpload only work with MooTool, don't forget to include that.

Answer 3

i typically use preventDefault() like so

<script type="text/javascript">
  window.addEvent('domready', function(){
    $('contactform').addEvent('submit', function(e) {
      e.preventDefault();
      var log = $('form_results').empty().addClass('ajax-loading');
      this.send({
        update: log,
        onComplete: function() {
          log.removeClass('ajax-loading');
        }
      });
    });
  });
</script>