Learn Ajax submitted friends, may wish to refer to it, you will understand some of the skills.
because of the problem of the code itself, the cloud habitat community has been revised, welcome to test.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>ajax message </title> <style type=" Text/css "> * {padding:0; margin:0;} Li {list-style:none;} Body {background: #f9f9f9; font-size:14px;} #explain {height:60px; border-bottom:1px solid #999999; background: #eee; font-size:14px; color: #666; text-align:ce Nter line-height:60px; #explain a {color: #990000; font-weight:bold; text-decoration:none; border-bottom:1px dotted #990000;} #explain a:hover {border-bottom:2px solid #990000;} #explain Strong {color: #990000;} #box {width:450px; padding:10px; border:1px solid #ccc; background: #f4f4f4; margin:10px auto;} #fill_in {margin-bottom:10px;} #fill_in Li {padding:5px 0;} #fill_in. text {width:380px;ight:30px; Padding:0 10px; border:1px solid #ccc; line-height:30px; font-size:14px; font-family:arial; #fill_in textarea {width:380px; height:100px; line-height:20px; padding:5px 10px; border:1px solid #ccc; font-siz e:14px; font-family:arial; Overflow:auto; Vertical-align:top; #fill_in. btn {border:none; width:100px height:30px; border:1px solid #ccc; background: #fff; color: #666; font-s ize:14px; position:relative; left:42px; } #message_text {Display:none;} #message_text h2 {font-size:14px; padding:6px 0 4px 10px; background: #ddd; border-bottom:1px solid #ccc;} #message_text li {background: #f9f9f9; border-bottom:1px solid #ccc; color: #666; overflow:hidden;} #message_text h3 {padding:10px; font-size:14px; line-height:24px;} #message_text p {padding:0 10px 10px; text-indent:28px; line-height:20px;} </style> <script type= "Text/javascript" > var obtn = null; var oform = null; var otext = null; var Otextarea = Null var timer = null; var speed = 0; var oLi = null var oH3 = null; var oP = null; Window.onload = function () {obtn = document.getElementById ("btn"); Obtn.onclick = GetValue; }; function GetValue () {document.getElementById ("Message_text"). Style.display = "block"; Oform = document.getElementsByTagName ("form") [0]; Otext = document.getElementById ("text"); Otextarea = document.getElementsByTagName ("textarea") [0]; Oul = document.getElementById ("Message_text"). getElementsByTagName ("ul") [0]; Oform.onsubmit = function () {return false;}; if (Otext.value = = "" | | Otextarea.value = = "") {alert ("Just two boxes, you're not finished yet?") "); Return } oLi = document.createelement ("Li"); OH3 = document.createelement ("h3"); OP = document.createelement ("P"); oh3.innerhtml = Otext.value; op.innerhtml = Otextarea.value; if (Oul.childnodes[0]) {Oul.insertbefore (oli,oul.childnodes[0]); else {oul.appendchild (oLi); } oli.appendchild (oH3); Oli.appendchild (OP); Otext.value = ""; OtextareA.value = ""; var h = oli.offsetheight; OLi.style.height = ' 0px '; if (timer) {clearinterval (timer); Timer = setinterval ("Gotime" ("+h+") ", 35); Gotime (h); function Gotime (target) {var top = Oli.offsetheight; Speed + 3; Top + = speed; if (Top > Target) {top = target; Speed *=-0.7; } if (Top===target && math.abs (Speed) < 3) {clearinterval (timer); timer = null; OLi.style.height = target + "px"; } oLi.style.height = top + "px"; </script> </head> <body> <div id= "Explain" > may wish to submit a few more messages try ......</div> <div id= "box" ; <ul id= "fill_in" > <form> <li> Name: <input id= "text" type= "text" class= "text"/></li> <li > Content: <textarea id= "Content" ></textarea></li> <li><input id= "btn" type= "Submit" value= " Submit "class=" BTN "/></li> </form> </ul> <div id=" Message_text "> <h2> show Message </h2> &L T;ul></ul> </div> </diV> </body> </html>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
