JQuery窗體保持靜態 - 頁面不會即時驗證

Question

我在使用jQuery的聯繫表單時遇到了一些問題。

我以前使用過相同的代碼幾次，但這次我更改了divs和類 以獲得有意義的名稱。

一切正常，只是當你按下提交時，你實際上被帶到send.php而不是被放置在佔位符div中的數據。

這讓我很生氣，所以我想知道是否還有幾雙眼睛可以發現一些東西？

感謝，

馬丁

所有JS包括在頁面的頭：

<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>  

聯繫部分：

 <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 &來源：http://ask.altervista.org/demo/jquery-form-remains-static-page-doesnt-validate-on-the-fly/

你正在使用jQuery，所以沒有必要使用你的js代碼window.addEvent('domready', function(){

應該是這樣的：

$('#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',...是從MooTool。由於您使用Jquery，您可能需要添加

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

之前。哦，看起來FancyUpload只能用於MooTool，不要忘記包含它。

Answer 3

我通常使用preventDefault（）方法，像這樣

<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>