drhe80011 2014-03-08 21:02
浏览 67
已采纳

ajax表单提交无效

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
LastName=$lname
Mail=$mail
Detail=$detail
Year=$year
Date=$date
--------------------
");
echo "Your Data has been submited.";
  • 写回答

2条回答 默认 最新

  • doubi8383 2014-03-08 21:06
    关注

    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 e.g.

    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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 求daily translation（DT）偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler
  • ¥15 关于#python#的问题：自动化测试