提交后清除PHP表单

时间:2015-01-30 03:33:48

标签: javascript php forms

O.k我见过类似的问题,但似乎无法使其发挥作用。我希望在提交表单时,字段会被清除。

这是我的PHP:

<?php $name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent="From: $name \n Message: $message";
$recipient = "EMAIL ADDRESS";
$subject = "Unriddle contact form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo '<p style="margin-top: 1em; font-color: #66CC00;">Thank you!</p>'; ?>

这是我的HTML:

<form action="mail.php" method="post">
<a class="form-row">
  <p>Name</p>
  <input id="iname" type="text" class="text-input required default" name="name" value="" />
</a>
<a class="form-row">
  <p>Email</p>
  <input id="email" type="text" class="text-input required email default" name="email" value="" />
</a>
<a class="form-row">
  <p>Message</p>
  <textarea id="message" class="text-area" name="message" cols="40" rows="8"></textarea>
</a>
<br />
<input class="btn-submit" type="submit" value="Send" name="submit" />

这是我的JS

jQuery(document).ready(function($) {
var $loading = $('<div class="loading"><img src="/js/loading.gif" alt="" /></div>');
$(".default").each(function(){
    var defaultVal = $(this).attr('title');
    $(this).focus(function(){
        if ($(this).val() == defaultVal){
            $(this).removeClass('active').val('');
        }
    });
    $(this).blur(function() {
        if ($(this).val() == ''){
            $(this).addClass('active').val(defaultVal);
        }
    })
    .blur().addClass('active');
});
$('.btn-submit').click(function(e){
    var $formId = $(this).parents('form');
    var formAction = $formId.attr('action');
    defaulttextRemove();
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    $('li',$formId).removeClass('error');
    $('span.error').remove();
    $('.required',$formId).each(function(){
        var inputVal = $(this).val();
        var $parentTag = $(this).parent();
        if(inputVal == ''){
            $parentTag.addClass('error').append('<span class="error">Required field</span>');
        }
        if($(this).hasClass('email') == true){
            if(!emailReg.test(inputVal)){
                $parentTag.addClass('error').append('<span class="error">Enter a valid email address</span>');
            }
        }
    });
    if ($('span.error').length == "0") {
        $formId.append($loading.clone());
        $('fieldset',$formId).hide();
        $.post(formAction, $formId.serialize(),function(data){
            $('.loading').remove();
            $formId.append(data).fadeIn();
        });
    }
    e.preventDefault();
});
});

function defaulttextRemove(){
$('.default').each(function(){
    var defaultVal = $(this).attr('title');
    if ($(this).val() == defaultVal){
        $(this).val('');
    }
});

}

有一种简单的方法吗?我需要添加哪些代码以及在哪里?如果你可以帮助我那会很棒,但请具体说明我应该在哪里添加代码行。

给你力量!感谢

1 个答案:

答案 0 :(得分:1)

在您的ajax请求成功时添加重置,或者如果您希望每次都在提交添加时清除。

if ($('span.error').length == "0") {
        $formId.append($loading.clone());
        $('fieldset',$formId).hide();
        $.post(formAction, $formId.serialize(),function(data){
            $('.loading').remove();
            $formId.append(data).fadeIn();
            $formId.reset();// to reset
        });
    }