0

我有一个使用 jQuery 验证的联系表单。

jQuery 的问题在另一个问题中得到解决。

但是，即使我取出验证并将其作为独立的 PHP 文件，仅包含 HTML 表单和用于发送它的 PHP，我也无法使表单工作。

没有错误。按下提交后页面只是进入一个空白页面，而不是代码中的消息。

这是代码 - 我觉得它非常简单！：

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
if (isset($_POST['submit'])){
}
else {
?>

<meta charset="utf-8" />

<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="**REMOVED**/style.css">


<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {


function isInt(n) {
return typeof n === 'number' && n % 1 == 0;
}

// Form validation
$(".darkBtn").click(function(e) {
e.preventDefault();
var email_check = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,6}$/i;
var email = $("form.form_contact .email").val();

var zipCheck = /[A-Z]{1,2}[0-9R][0-9A-Z]? [0-9][ABD-HJLNP-UW-Z]{2}/i;
var zip = $("form.form_contact .zipcode").val();

var phoneCheck = /^\d+$/;
var phone = jQuery("#contact_form .phone").val();
console.log(phone);

var error = "";

if(!email_check.test(email))
{
error = "Please give a valid email address."

}

if(!zipCheck.test(zip))
{
error = "Please give a valid postcode.";
}

if(!phoneCheck.test(phone) || phone.length != 11)
{
error = "Please give a valid phone number.";
}


// No error ? -> Submit
if(error == "")
{
$(".form_error").hide();
$("form#contact_form").submit();
} else {
$(".form_error").empty().text(error);
$(".form_error").show();
}
});
});


</script>
</head>
<body>
<div class="menu_contact">
<h3>Contact Us</h3>
<hr />
<form method="POST" class="form_contact" id="contact_form">
<label>Title:</label>
<select class="input" name="title">
<option value="no">Please select</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
</select>
<label>Contact Number:</label>
<input type="text" class="input phone" placeholder="Your number" name="number">
<label>First name:</label>
<input type="text" class="input" placeholder="John" name="fname"/>
<label>Surname:</label>
<input type="text" class="input" placeholder="Doe" name="sname"/>
<label>Email:</label>
<input type="email" class="input email" placeholder="something@domain.com" name="email"/>
<label>Postcode:</label>
<input type="text" class="input zipcode" placeholder="CW3 9SS" name="post"/>
<label>Date of birth:</label>
<select class="input dateDay" name="day">
<option>Day</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select class="input dateMonth" name="month">
<option>Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<select class="input dateYear" name="year">
<option>Year</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
</select>
<label>Where did you hear about us:</label>
<select class="input" name="hear">
<option value="google">Google</option>
<option value="recommendation">Recommendation</option>
<option value="email">Email</option>
<option value="Magazine">Magazine</option>
<option value="Facebook">Facebook</option>
<option value="Other">Other</option>
</select>
<div class="form_error" style="display:none;color:red;text-align:center;text-shadow:none;"></div>
<input class="darkBtn submit" type="submit" value="Send my message »" name="submit">
</form>
</div>
<?php
} if (isset($_POST['submit'])) {

$to = "**REMOVED**";
$emailfrom = "**REMOVED**";
$subject = "Insurance Quote";
$message="\r\n Title:" . $title . "\r\n First Name:" . $fname . "\r\n Surname:" . $_POST['sname'] . "\r\n Number: " . $_POST['number1'] . "\r\n Email: " . $_POST['email'] . "\r\n Post: " . $_POST['post'] . "\r\n Day: " . $_POST['day'] . "\r\n Month: " . $_POST['year'] . "\r\n Hear: " . $_POST['hear'];
$headers = "From:" . $emailfrom;

if (mail($to,$subject,$message,$headers) ) {
echo "Thankyou for using **REMOVED**";
}
}

?>
</body>
</html>

**更新：当我删除 jQuery 验证页面发送完美。

但是，如果我保留 jQuery 验证，那么当我按下提交时页面不会执行任何操作。**

4

3 回答 3

3

将提交按钮的名称从“提交”更改为其他名称并尝试。

于 2013-05-18T16:45:30.567 回答
1

您忘记设置表单操作。

<form method="POST" class="form_contact" id="contact_form" action="receiver.php">
于 2013-05-18T15:54:41.293 回答
1

如果您的 Web 服务器访问日志显示您正在接收 POST 请求，则可能是mail(). 尝试添加这个else：

if ($mailerror = mail($to,$subject,$message,$headers) ) {
    echo "Thankyou for using **REMOVED**";
} else {
    echo "Error: cannot send email.";
}

并检查您是否看到错误消息而不是空白页。

（如果不是，请检查浏览器控制台以查看错误是否在 JavaScript 代码中）。

编辑

我还检测到命名输入“提交”的问题（显然它会覆盖表单的默认提交行为，可能在您调用时e.preventDefault(); ），只需重命名它，一切都会变得美好。这是一个有效的解决方案：

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
if (isset($_POST['sent'])){
}
else {
?>

<meta charset="utf-8" />

<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {


function isInt(n) {
return typeof n === 'number' && n % 1 == 0;
}

// Form validation
$(".darkBtn").click(function(e) {
e.preventDefault();
var email_check = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,6}$/i;
var email = $("form.form_contact .email").val();

var zipCheck = /[A-Z]{1,2}[0-9R][0-9A-Z]? [0-9][ABD-HJLNP-UW-Z]{2}/i;
var zip = $("form.form_contact .zipcode").val();

var phoneCheck = /^\d+$/;
var phone = jQuery("#contact_form .phone").val();
console.log(phone);

var error = "";

if(!email_check.test(email))
{
error = "Please give a valid email address."

}

if(!zipCheck.test(zip))
{
error = "Please give a valid postcode.";
}

if(!phoneCheck.test(phone) || phone.length != 11)
{
error = "Please give a valid phone number.";
}


// No error ? -> Submit
if(error == "")
{
$(".form_error").hide();
$('#contact_form').submit();
console.log("sent.");
} else {
$(".form_error").empty().text(error);
$(".form_error").show();
}
});
});


</script>
</head>
<body>
<div class="menu_contact">
<h3>Contact Us</h3>
<hr />
<form method="post" class="form_contact" id="contact_form">
<label>Title:</label>
<select class="input" name="title">
<option value="no">Please select</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
</select>
<label>Contact Number:</label>
<input type="text" class="input phone" placeholder="Your number" name="number">
<label>First name:</label>
<input type="text" class="input" placeholder="John" name="fname"/>
<label>Surname:</label>
<input type="text" class="input" placeholder="Doe" name="sname"/>
<label>Email:</label>
<input type="email" class="input email" placeholder="something@domain.com" name="email"/>
<label>Postcode:</label>
<input type="text" class="input zipcode" placeholder="CW3 9SS" name="post"/>
<label>Date of birth:</label>
<select class="input dateDay" name="day">
<option>Day</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select class="input dateMonth" name="month">
<option>Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<select class="input dateYear" name="year">
<option>Year</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
</select>
<label>Where did you hear about us:</label>
<select class="input" name="hear">
<option value="google">Google</option>
<option value="recommendation">Recommendation</option>
<option value="email">Email</option>
<option value="Magazine">Magazine</option>
<option value="Facebook">Facebook</option>
<option value="Other">Other</option>
</select>
<div class="form_error" style="display:none;color:red;text-align:center;text-shadow:none;"></div>
<input class="darkBtn submit" type="button" value="Send my message »" name="smit">
<input type="hidden" name="sent" value="true"/>
</form>
</div>
<?php
} if (isset($_POST['sent'])) {

$to = "**REMOVED**";
$emailfrom = "**REMOVED**";
$subject = "Insurance Quote";
$message="\r\n Title:" . $_POST['title'] . "\r\n First Name:" . $_POST['fname'] . "\r\n Surname:" . $_POST['sname'] . "\r\n Number: " . $_POST['number'] . "\r\n Email: " . $_POST['email'] . "\r\n Post: " . $_POST['post'] . "\r\n Day: " . $_POST['day'] . "\r\n Month: " . $_POST['year'] . "\r\n Hear: " . $_POST['hear'];
$headers = "From:" . $emailfrom;

echo "Thankyou for using **REMOVED**";
}

?>
</body>
</html>
于 2013-05-18T16:08:58.047 回答