0

検証付きの簡単なphp/ajaxお問い合わせフォームがあります。有効な送信後にすべてのフィールドをクリアしたいので、$( "#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