Question

我有一个HTML表单发布到php脚本，然后通过电子邮件发送给我表单内容。我也使用javascript表单验证和一些jquery ajax，以便页面不会重新加载。

HTML -

<form action="mail.php" class="contactus" onsubmit="return ValidateRequiredFields();"   name="contactus" method="POST">
<p class="floatleft" style="width:200px; background-color:#FF0000; line-height:50px; margin:0; padding:0;">Nameeeeee</p> <input class="sizetext" type="text" maxlength="10" name="name">
<div style="clear:both"></div>
<p class="floatleft" style="width:200px;">Email</p> <input class="sizetext" type="text" maxlength="10" name="email">
<div style="clear:both"></div>
<p class="floatleft" style="width:200px;">Telephone</p> <input class="sizetext" type="text" maxlength="10" name="telephone">


<p>Priority</p>
<select name="priority" size="1">
<option value="Low">Low</option>
<option value="Normal">Normal</option>
<option value="High">High</option>
<option value="Emergency">Emergency</option>
</select>

</select>
<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />

<br />
<input class="buttonstyle" type="submit" value="Send">
</form>

    <div id="formResponse">
        </div>

PHP -

<?php $name = $_POST['name'];
$email = $_POST['email'];
$priority = $_POST['priority'];
$message = $_POST['message'];
$telephone = $_POST['telephone'];
$formcontent="From: $name \n Email: $email \n Telephone Number: $telephone \n Priority: $priority \n Message: $message";
$recipient = "myemailaddress";
$subject = "Contact Form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!";
?>

表单验证和ajax -

<script type="text/javascript" language="JavaScript">


var FormName = "contactus";



var RequiredFields = "name,email,priority,message";



function ValidateRequiredFields()
{
var FieldList = RequiredFields.split(",")
var BadList = new Array();
for(var i = 0; i < FieldList.length; i++) {
    var s = eval('document.' + FormName + '.' + FieldList[i] + '.value');
    s = StripSpacesFromEnds(s);
    if(s.length < 1) { BadList.push(FieldList[i]); }
    }
if(BadList.length < 1) { return true; }
var ess = new String();
if(BadList.length > 1) { ess = 's'; }
var message = new String('\n\nThe following field' + ess + ' are required:\n');
for(var i = 0; i < BadList.length; i++) { message += '\n' + BadList[i]; }
alert(message);
return false;
}

function StripSpacesFromEnds(s)
{
while((s.indexOf(' ',0) == 0) && (s.length> 1)) {
    s = s.substring(1,s.length);
    }
while((s.lastIndexOf(' ') == (s.length - 1)) && (s.length> 1)) {
    s = s.substring(0,(s.length - 1));
    }
if((s.indexOf(' ',0) == 0) && (s.length == 1)) { s = ''; }
return s;
}
// -->
</script>

    <script type="text/javascript">

            $(document).ready(function() {

                $(".contactus").submit(function() {

                    $.post("mail.php", $(".contactus").serialize(),

                        function(data) {
                            $("#formResponse").html(data);
                        }
                    );
                    return false;
                });
            });
        </script>

我想知道的是如何在提交表单后隐藏表单。

Answer 1

$(".contactus").on('submit', function() {
    $this = $(this);
    $.post("mail.php", $(".contactus").serialize(), function(data) {
         $("#formResponse").html(data);
         $this.hide()
    });
    return false;
});

或者你可以试试：

$(document).ready(function() {
    $(".contactus").on('submit', function(e) {
        e.preventDefault();
        $this = $(this);
        $.ajax({
           type: 'POST',
           url: "mail.php",
           data: $(".contactus").serialize()
        }).done(function() { //done will only hide if the submit is successful, using always instead will alway hide the form
           $this.hide();
        });
    });
});

Answer 2

尝试

$('form.contactus').submit(function() {
  $(this).hide();
});

提交后隐藏html表单？

2 个答案: