Форма JQuery остается статичной - страница не проверяется на лету - PullRequest
Новая
       16

Форма JQuery остается статичной - страница не проверяется на лету

1 голос
/ 16 марта 2011

У меня проблемы с контактной формой, использующей jquery.

Я использовал этот код несколько раз, но на этот раз я изменил div и классы иметь осмысленные имена.

Все работает, просто когда вы нажимаете submit, вы физически перенаправляетесь на send.php вместо данных, помещаемых в заполнитель div.

Это сводит меня с ума, поэтому мне было интересно, могут ли еще несколько пар глаз заметить что-нибудь?

Спасибо

Martin

Все 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"));

}

?>

Ответы [ 3 ]

1 голос
/ 16 марта 2011

вы используете jquery, поэтому нет необходимости использовать window.addEvent('domready', function(){

Ваш код JS должен выглядеть следующим образом: 

$('#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;
});
1 голос
/ 16 марта 2011

Я обычно использую protectDefault (), например, 

<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>
1 голос
/ 16 марта 2011

window.addEvent('domready',... от MooTool.Поскольку вы используете Jquery, вам, возможно, придется добавить 

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

раньше.Да, и похоже, что FancyUpload работает только с MooTool, не забудьте включить это.

...