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 求一个图片中的成交量选股公式
  • ¥30 关于#python#的问题:我想要的是这79个大特征对于房屋售价的最大的影响前十名(相关搜索:随机森林)
  • ¥15 使用matlab计算自定义特殊函数的二重积分,改变积分顺序所得的结果不同的问题?
  • ¥15 mysql做碎片化处理老是报错怎么办
  • ¥15 如何正确在vs2010中初始化map对象
  • ¥30 mmdet3d模型部署问题
  • ¥15 comsol仿真反射率、吸收率时峰值位置和深度不对!
  • ¥30 Visual Studio找不到sdk,如何解决?
  • ¥15 labview与机器之间网口通信发送指令
  • ¥15 迪杰斯特拉算法,考虑时延,带宽