0
У меня есть HTML-файл, файл JavaScript и файл PHP. JavaScript используется для проверки ввода пользователя, а затем для передачи формы на страницу PHP.Отправка формы PHP из JavaScript
Функция проверки правильной работы, но форма не будет отправляться из 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>
В чем вопрос? –
Пожалуйста, используйте http://codepad.org/ для добавления кода и предоставления демонстрации. Трудно понять вашу проблему – pal4life
, пожалуйста, обратитесь к этому SO-потоку о том, как правильно использовать отправку формы AJAXA с помощью PHP –