0

我有一个简单的工作 php/ajax 联系表单，带有验证功能。我想在VALID提交后清除所有字段，所以我尝试了 $("#myform")[0].reset(); 请参阅下面的代码。它很好地清除了表单，但问题是当验证不成功时它也会清除所有内容，这真的很烦人。

这是HTML：

<form id="myform" method="post" action="sendEmail.php">

<div id="container">
    <div id="main">

    <p>Name / Company <span>*</span></p> 
    <input type="text" name="name" id="name" />

    <p>Email Address <span>*</span><p> 
    <input type="text" name="email" id="email" />

    <p>Offer / Message <span>*</span></p> 
    <textarea name="message" id="message" rows="6"></textarea>  

    <p><input type="submit" name="submit" id="submit" value="Send Request" /></p>

    <p><ul id="response" /></p>

    </div>
</div>

和PHP：

<?php

$name = trim($_POST['name']);
$email = $_POST['email'];
$message = $_POST['message'];

$site_owners_email = 'sample@yahoo.com'; 
$site_owners_name = 'Joe';

if (strlen($name) < 3) {
    $error['name'] = "* Please enter your name.";   
}

if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
    $error['email'] = "* Please enter a valid email address";   
}

if (strlen($message) < 4) {
    $error['message'] = "* Please leave an offer / message.";
}

if (!$error) {

    require_once('phpMailer/class.phpmailer.php');
    $mail = new PHPMailer();

    $mail->From = $email;
    $mail->FromName = $name;
    $mail->Subject = "Subject"; 
    $mail->AddAddress($site_owners_email, $site_owners_name);
    $mail->Body = $message;

    $mail->Send();

    echo "<li class='success'> Thanks for your request!<br> We will respond to you as soon as possible. </li>";

} # end if no error
else {

    $response = (isset($error['name'])) ? "<li>" . $error['name'] . "</li> \n" : null;
    $response .= (isset($error['email'])) ? "<li>" . $error['email'] . "</li> \n" : null;
    $response .= (isset($error['message'])) ? "<li>" . $error['message'] . "</li>" : null;

    echo $response;
} # end if there was an error sending

?>

最后，js：

$(function() {

var paraTag = $('input#submit').parent('p');
$(paraTag).children('input').remove();
$(paraTag).append('<input type="button" name="submit" id="submit" value="Send Request" />');

$('#main input#submit').click(function() {
    $('#main').append('<img src="images/ajax-loader.gif" class="loaderIcon" alt="Loading..." />');

    var name = $('input#name').val();
    var email = $('input#email').val();
    var message = $('textarea#message').val();

    $.ajax({
        type: 'post',
        url: 'sendEmail.php',
        data: 'name=' + name + '&email=' + email + '&message=' + message,

        success: function(results) {
            $('#main img.loaderIcon').fadeOut(1000);
            $('ul#response').html(results);
            $("#myform")[0].reset();

        }
    }); // end ajax
});

});

我是 php 和 js 的新手，所以我已经粘贴了我的所有代码，如果我做错了什么，对你来说更容易。谢谢你的帮助！

4

1 回答 1

0

嗯，一个好主意是从 PHP 返回一个 JSON 对象，这样您就可以检查 Javascript 上的错误。

PHP：

$result = array(
            "error" => false, 
            "html" => null
);
if(!$is_valid){
    $result["error"] = true;
    $result["html"] = "<b>Error</b>";
}else{
    $result["error"] = false;
    $result["html"] = "<b>Success</b>";
}
echo json_encode($result);

jQuery

$.ajax({
    type: 'post',
    url: 'url.php',
    data: {/*put a cool data here*/},
    dataType : "json", // return a json object

    success: function(result) {
        if(result.error){
            /* On error stuff */
            $("body").append(result.html);
        }else{
            /* On success stuff */
            $("body").append(result.html);
        }
    }
});
于 2013-03-08T16:39:42.380 回答