从 JavaScript 提交 PHP 表单

我有一个HTML文件，JavaScript文件和一个PHP文件。JavaScript 用于验证用户输入，然后将表单传递到 PHP 页面。

验证功能运行良好，但表单不会从 JavaScript 提交到 PHP 文件。

仍然无法弄清楚我出了什么问题，为什么JavaScript不会将表单数据提交到PHP文件中，以及如何在提交后显示PHP页面

.HTML：

<div class = "formtext">
<p>
<form id = "formtext" name="survey" method="post" action="formtext.php">
<table id="surveytable" width="300" border="1">
<tr>
<td>
    Name: 
        <input type = "text" id="userName" 
name="name" onkeyup="document.getElementById('mirror').innerHTML=this.value" />
    <br/ >
    Your name: <span id="mirror"></span>
</td>
</tr>
<tr>
<td>
    Number: 
        <input type = "text" id="userNumber" 
name="number" onkeyup="document.getElementById('mirror1').innerHTML=this.value" />
    <br />
    Your number: <span id="mirror1"></span>
</td>
</tr>
<tr>
<td>
    Email: 
        <input type = "text" id="userEmail" 
name="email" onkeyup="document.getElementById('mirror2').innerHTML=this.value" />
    <br />
    Your email: <span id="mirror2"></span>
</td>
</tr>
<tr>
<td>
    Gender:<br />
    <input type="radio" name="gen" id="userGender" value="Decline"
checked/> Decline<br />
        <input type="radio" name="gen" id="userGender" value="Male" />Male<br />
        <input type="radio" name="gen" id="userGender" value="Female" /> Female
<tr>
<td>
    Major:
        <select name="major" id="userMajor">
    <option value="" selected="selected">Select Major</option>
        <option value="Computer Science">Computer Science</option>
        <option value="Information Technology">Information Technology</option>
        <option value="Engineering">Engineering</option>
        <option value="Biology">Biology</option>
    <option value="Other">Other</option>
        </select>
</td>
</tr>
<tr>
<td>
    Hobbies:<br /> 
        <input name="hob" id="userHobby" type="checkbox" value="Running, 
" + " " />Running<br /> 
        <input name="hob" id="userHobby" type="checkbox" value="Sleeping, 
" + " "/>Sleeping<br />
    <input name="hob" id="userHobby" type="checkbox" value="Fishing, 
" + " "/>Fishing<br />
    <input name="hob" id="userHobby" type="checkbox" value="Other" />Other
</td>
</tr>
</table>
        <p>
        <input type="button" value="Enter" onclick="Survey()"/>
    </p>
    </form>
    </div>
</form>

JavaScript：

function Survey()
{
if (!ValidateForm())
{        
return false;
}

else {
var userName = document.forms[0].name.value+"<br />";
var userNumber = document.forms[0].number.value+"<br />";
var userEmail= document.forms[0].email.value+"<br />";
var sex;
  if (document.forms[0].gen[0].checked)
    sex=document.forms[0].gen[0].value;
  else if (document.forms[0].gen[1].checked)
    sex=document.forms[0].gen[1].value;
  else if (document.forms[0].gen[2].checked)
    sex=document.forms[0].gen[2].value;
var userGender = sex+"<br />";
var userMajor = document.forms[0].major.value+"<br />"; 
var hobby=new Array()
var counter=0;
  for (i=0;i<document.forms[0].hob.length;i++)
  {
    if (document.forms[0].hob[i].checked)
    {
        hobby[counter]=document.forms[0].hob[i].value;
        counter++;
    }
  }
var hobPick="";
for (n=0;n<hobby.length;n++)
    hobPick+=hobby[n];
var userHobby = hobPick;
document.getElementById("printName").innerHTML = userName
document.getElementById("printNumber").innerHTML = userNumber
document.getElementById("printEmail").innerHTML = userEmail
document.getElementById("printGender").innerHTML = userGender
document.getElementById("printMajor").innerHTML = userMajor
document.getElementById("printHobby").innerHTML = userHobby

document.getElementById('formtext').submit();
}
}
function ValidateForm()
{
if (document.forms[0].name.value.length === 0) 
{
alert("Name is Required");
    return false;
}
else if
(document.forms[0].number.value.length === 0) 
{
alert("Number is Required");
    return false;
}
else if
(document.forms[0].email.value.length === 0) 
{
alert("Email is Required");
    return false;
}
else if
(document.forms[0].userMajor.value === "")
{
    alert("Major is Required");
        return false;
}
else if
(document.forms[0].userHobby[0].checked === false && 
document.forms[0].userHobby[1].checked=== false &&
document.forms[0].userHobby[2].checked === false &&
document.forms[0].userHobby[3].checked === false)
{
    alert("hobby is Required");
        return false;
}
else
{   
return true;
}
}

.PHP：

<table id='userInputTbl' width='600' border='1'>
<tr> 
<td id='tblName' colspan='6'> 
<strong>You Submitted: </strong><br />
</td>
</tr>
<tr>
<td><strong>Name:</strong><br />
</td>
<td> <?echo $_POST["printName"]?></td>
</tr>
<tr>
<td><strong>Number:</strong><br /></td>
<td> <?echo $_POST['printNumber']?></td>
</tr>
<tr>
<td><strong>Email:</strong><br /></td>
<td> <?echo $_POST['printEmail']?></td>
</tr>
<tr>
<td><strong>Gender:</strong><br /></td>
<td> <? echo $_POST['printGender']?></td>
</tr>
<tr>
<td><strong>Major:</strong><br /></td>
<td> <? echo $_POST['printMajor']?></td>
</tr>
<tr>
<td><strong>Hobbies:</strong><br /></td>
<td> <? echo $_POST['printHobby']?></td>
</tr>
</table>