ajax form submiting is not working
Question
I am trying to load the php code without refreshing the page but some how my Ajax cod is not working.what part is wrong ?
I wouldn't use jquery or other frameworks by the way. Is the problem with my javascript code ? Shoud I use jquery for this or it can be done without it ? What is the advantages of using jquery ? thank you.
html and javascript :
<html>
<head>
<title>Submit your info</title>
<script type="text/javascript">
function submited()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("stext").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","submit.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="submit.php" method="POST" onsubmit="submited()">
<fieldset>
<legend style="color:red">Complete the fields:</legend>
<table>
<tr><td>Name:</td><td><input type="text" name="f_fname"></br></td></tr>
<tr><td>Last Name:</td><td><input type="text" name="f_lname"></br></td></tr>
<tr><td>Mail:</td><td><input type="email" name="f_mail"></br></td></tr>
<tr><td>Your Resume:</td><td><textarea name="f_detail"></textarea></br></td></tr>
<tr><td>Experience:</td><td>less than 1 year:<input type="radio" name="f_year" value="one"/></td></tr>
<tr><td></td><td>1-3 years:<input type="radio" name="f_year" value="onetothree"/></td></tr>
<tr><td></td><td>more than 3 years:<input type="radio" name="f_year" value="three"/></td></tr>
</table>
<input type="submit" value="send">
</fieldset>
</form>
<div id="stext"></div>
</body>
</html>
php :
<?php
require("pdate.php");
$fname=$_POST['f_fname'];
$lname=$_POST['f_lname'];
$mail=$_POST['f_mail'];
$detail=$_POST['f_detail'];
$year=$_POST['f_year'];
$date=pdate("y-m-d h:i:s");
$fp=fopen("database.txt","a");
fwrite($fp,"Name=$fname\n\rLastName=$lname\n\rMail=$mail\n\rDetail=$detail\n\rYear=$year\n\rDate=$date\n\r--------------------\n\r");
echo "Your Data has been submited.";
2 answers
solution1
1 ACCPTED 2014-03-08 21:06:59
You need to use return false in the submited() function to stop submitting the form. Also using jquery is much more simple.
Also you do not send the data to your script, which you should do by using eg
xmlhttp.send("f_fname="+f_fname+"&f_lname="+f_lname);
instead of
xmlhttp.send();
But remember to assign the values to variables. You can do it by giving the inputs the ID and assign the variable in js. So with that 2 edited (you should add the rest by yourself) in your script it would be like this:
<html>
<head>
<title>Submit your info</title>
<script type="text/javascript">
function submited()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("stext").innerHTML=xmlhttp.responseText;
}
}
var f_fname = document.getElementById('f_fname').value;
var f_lname = document.getElementById('f_lname').value;
xmlhttp.open("POST","submit.php",true);
xmlhttp.send("f_fname="+f_fname+"&f_lname="+f_lname);
return false;
}
</script>
</head>
<body>
<form action="submit.php" method="POST" onsubmit="submited()">
<fieldset>
<legend style="color:red">Complete the fields:</legend>
<table>
<tr><td>Name:</td><td><input type="text" id="f_fname" name="f_fname"></br></td></tr>
<tr><td>Last Name:</td><td><input type="text" id="f_fname" name="f_lname"></br></td></tr>
<tr><td>Mail:</td><td><input type="email" name="f_mail"></br></td></tr>
<tr><td>Your Resume:</td><td><textarea name="f_detail"></textarea></br></td></tr>
<tr><td>Experience:</td><td>less than 1 year:<input type="radio" name="f_year" value="one"/></td></tr>
<tr><td></td><td>1-3 years:<input type="radio" name="f_year" value="onetothree"/></td></tr>
<tr><td></td><td>more than 3 years:<input type="radio" name="f_year" value="three"/></td></tr>
</table>
<input type="submit" value="send">
</fieldset>
</form>
<div id="stext"></div>
</body>
</html>
solution2
0 2014-03-08 21:09:06
Try this, Add return false;
function submited()
{
..
return false;
}
HTML:
<form action="submit.php" method="POST" onsubmit="return submited()">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.