在 PHP 表单上提交必填字段后加载 Div答案

【问题标题】：Load Div after Submit Required Fields on PHP Form在 PHP 表单上提交必填字段后加载 Div
【发布时间】：2014-02-09 15:34:25
【问题描述】：

我有一个隐藏的 div，我在单击提交按钮时正在加载。我在表单的脚本上也有 .notShouldBeBlank。什么是正确的方法，以便 php 发送结果并且隐藏的 div 在所有必填字段都完成之前不会加载？它目前正在加载隐藏的 div 并在我单击提交后立即发送结果。我做错了什么？

<?php
$name = $_POST['name'];
$address = $_POST['address'];
$city = $_POST['city'];
$state = $_POST['state'];
$phone = $_POST['phone'];
$email = $_POST['email'];

$name = stripslashes($name);
$address = stripslashes($address);
$city = stripslashes($city);
$state = stripslashes($state);
$phone = stripslashes($phone);
$email = stripslashes($email);


$to  = 'myemail@thisismywebsite.com ' . ', ';
$to .= $Email; 

$from = "$Email ";
$subject = 'Look and Learn: Applicant'; 
$message = <<<EOF
<html>
<body bgcolor="#FFFFFF">

<b>Look and Learn: Applicant</b><br /><br />

<b>Name:</b> $name<br />
<b>Address:</b> $address / $city, $state<br />
<b>Phone:</b> $phone<br />
<b>Email:</b> $email<br />

</body>
</html>
EOF;
//end of message

// Additional headers
$headers .= 'From: Razor Chic of Atlanta <info@thebrlab.com>' . "\r\n";
$headers .= "Content-type: text/html\r\n";
$to = "$to";

mail($to, $subject, $message, $headers);

?>


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Sign Up</title>
<link rel="stylesheet" href="css/sign-up.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">


$(document).ready(function() {
$('#submit').click(function() {
$('#thankyou').show();
$("#hidden1").html($("#thankyou").html());
});
});

</script>

<script>
$('#myContact').submit(function () {

$.each($('#myContact .notShouldBeBlank'), function()
{
if($(this).val() == ''){
$(this).after('<span class="error">This field is required.</span>');
}
});

// Other groups validated here
}
</script>

</head>
<body style="overflow: hidden; overflow-x: hidden; overflow-y: hidden;">



<div id="wrap">
<div id="hidden1"></div>
<div style="font-size: 18px; font-weight: bold; font-family: Verdana, Geneva, sans-serif;">
Sign-Up: Look And Learn Class
</div>

<br>

<form id="form" action="" name="myContact" onSubmit="return validateForm()" method="post" enctype="multipart/form-data">
<div>
<label>
<span>Name: *</span><br>
<input name="name" type="text" size="64" placeholder="Name">
</label>
</div>

<div>
<table width="100%" >

<tr>

<td width="230">
<label>
<span>Address: *</span><br>
<input placeholder="Address" size="100" type="text" name="address" maxlength="100">
</label>
</td>

<td width="160">
<label>
<span>City *</span><br>
<input placeholder="City" name="city" type="text" id="city" maxlength="100" />
</label>
</td>

<td width="189">
<label>
<span>State *</span><br>
<input placeholder="State" name="city" type="text" id="city" maxlength="3" />
</label>
</td>
</tr>

</table>
</div>

<div>
<label>
<span>Phone: *</span><br>
<input placeholder="Phone" size="64" type="text" name="phone">
</label>
</div>


<div>
<label>
<span>Email: *</span><br>
<input placeholder="Email address" size="64" type="email" name="email">
</label>
</div>

<div>
<button name="submit" type="submit" id="submit">S  I  G  N    U  P</button>
</div>
</form>
<p>Note: * Fields are required</p>

</div>


<!---- THANK YOU---->
<?php
if($sent){

echo '<div id="thankyou" style="display:block;">';
}
else{
echo '<div id="thankyou" style="display:none;">';
}
?>


<!---- PAY BEGINS ---->
<div id="paynow1-wrapper">
<div id="paynow1">

<form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="business" value="Razorchicofatlanta@gmail.com">
<input type="hidden" name="item_name" value="Look and Learn: Deposit">
<input type="hidden" name="amount" value="100.00">            
<input type="hidden" name="return" value="http://thebrlab.com/razor-chic-of-atlanta/thank-you.html">
<input type="hidden" name="undefined_quantity" value="1">

<input style="background: none" onMouseOver="this.src='images/pay-now-up.png'" onMouseOut="this.src='images/pay-now-down.png'" type="image" src="images/pay-now-down.png" height="41" width="141" border="0" alt="Pay Now" class="button">

</form>

</div>
</div> 
<!---- PAY ENDS ---->


<!---- PAY BEGINS ---->
<div id="paynow2-wrapper">
<div id="paynow2">

<form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="business" value="Razorchicofatlanta@gmail.com">
<input type="hidden" name="item_name" value="Look and Learn: Balance">
<input type="hidden" name="amount" value="99.00">            
<input type="hidden" name="return" value="http://thebrlab.com/razor-chic-of-atlanta/thank-you.html">
<input type="hidden" name="undefined_quantity" value="1">

<input style="background: none" onMouseOver="this.src='images/pay-now-up.png'" onMouseOut="this.src='images/pay-now-down.png'" type="image" src="images/pay-now-down.png" height="41" width="141" border="0" alt="Pay Now" class="button">

</form>

</div>
</div> 
<!---- PAY ENDS ---->



<!---- PAY BEGINS ---->
<div id="paynow3-wrapper">
<div id="paynow3">

<form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="business" value="Razorchicofatlanta@gmail.com">
<input type="hidden" name="item_name" value="Look and Learn: Full Payment">
<input type="hidden" name="amount" value="199.00">            
<input type="hidden" name="return" value="http://thebrlab.com/razor-chic-of-atlanta/thank-you.html">
<input type="hidden" name="undefined_quantity" value="1">

<input style="background: none" onMouseOver="this.src='images/pay-now-up.png'" onMouseOut="this.src='images/pay-now-down.png'" type="image" src="images/pay-now-down.png" height="41" width="141" border="0" alt="Pay Now" class="button">

</form>

</div>
</div> 
<!---- PAY ENDS ---->



<img src="images/thank-you/look-and-learn1.png" />

</div>
<!---- THANK YOU---->


</body>
</html>

【问题讨论】：

标签： javascript php jquery html

【解决方案1】：

您的表单 ID 是“form”，而不是“myContact”。将表单 ID 更改为 myContact。

然后你有 2 个“onsubmit”事件，一个在 jQuery 中，另一个是内联的 (onSubmit)。尝试将它们合并为一个以避免意外行为。

此外，如果验证失败，请确保在提交事件函数上返回 false，以便暂停提交。

更新 1

JavaScript：

$('#myContact').submit(function () {

    $.each($('#myContact .notShouldBeBlank'), function()
    {
        if($(this).val() == ''){
            $(this).after('<span class="error">This field is required.</span>');
            return false;
        }
    });
    /* Uncomment the line below if you really have a validateForm() function */
    // return validateForm()
}

HTML：

<form id="myContact" action="" name="myContact" method="post" enctype="multipart/form-data">

【讨论】：

谢谢埃德加。如何合并两个 onsubmits？
你可以把return validateForm()放在你的$('#myContact').submit(function () {函数的最后，就在你有评论// Other groups validated here的地方
好的，我尝试将表单 ID 更改为“myContact”。我还插入了 return validateForm() 但我得到了一个错误。我是否用分号关闭 validateForm() ？这是我收到的错误thebrlab.com/razor-chic-of-atlanta/sign-up.php
抱歉，当我点击您的链接时，我看到了这条消息：Parse error: syntax error, unexpected $end in /home/content/87/5237487/html/razor-chic-of-atlanta/sign-up.php on line 248
你能打开链接吗？