Javascript 在PHP表单上提交必填字段后加载Div_Javascript_Php_Jquery_Html

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

javascript php jquery html

Javascript 在PHP表单上提交必填字段后加载Div,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我有一个隐藏的div，我正在点击提交按钮加载。我也有。表格的脚本不应该为空。什么是正确的方法，使得php发送结果并且隐藏的div在所有必需字段完成之前不会加载？它当前正在加载隐藏的div，并在我单击submit时立即发送结果。我做错了什么 <?php $name = $_POST['name']; $address = $_POST['address']; $city = $_POST['city']; $state = $_POST['state']; $phone = $_POST['

我有一个隐藏的div，我正在点击提交按钮加载。我也有。表格的脚本不应该为空。什么是正确的方法，使得php发送结果并且隐藏的div在所有必需字段完成之前不会加载？它当前正在加载隐藏的div，并在我单击submit时立即发送结果。我做错了什么

<?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>

您的表单ID是表单，而不是myContact。将表单id更改为myContact

然后有两个onsubmit事件，一个在jQuery中，另一个在内联onsubmit中。尝试将它们合并为一个，以避免意外行为

此外，如果验证失败，请确保在submit事件函数中返回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:

谢谢你，埃德加。如何合并这两个OnSubmit？您只需将return validateForm放在$'myContact'.Submit函数的最后一个位置即可{函数，就在您有注释的地方//此处验证了其他组OK，我试图将我的表单ID更改为myContact。我还插入了返回validateForm，但返回了一个错误。我是否用分号关闭validateForm？这是一个错误，我很抱歉，当我单击您的链接时看到以下消息：解析错误：语法错误，un第248行预期$end in/home/content/87/5237487/html/razor chic of atlanta/sign-up.php你能找到链接吗？

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