将HTML表单数据提交到div元素而不刷新页面

问题描述：

I have slide down panel created in JQuery into a table, that panel contains contact form. I need to post that form data, but prevent to reload all page after submit button is hitted, because after page reload, slide down panel also reloads and it shrinks. I need only refresh the div element to get form data to PHP.

<div id="form">
    <form id="form" action="/">
       <br />
                <p>
                <label for="name"><small>Name *</small></label><br />
                  <input type="text" name="name" id="name" value="" size="15" />

                </p>
                <p>
                   <label for="email"><small>Mail *</small></label><br />
                  <input type="text" name="email" id="email" value="" size="15" />

                </p>
                <p>
                <label for="comments"><small>Message *</small></label>
                  <textarea name="comments" id="comments" rows="10" cols="5"></textarea>
                </p>
                <p>
                  <input name="submit" type="submit" id="submit" value="Send" />
                  &nbsp;
                  <input name="reset" type="reset" id="reset" tabindex="5" value="Reset" />
                </p>
              </form>
</div>

我在JQuery中创建了一个向下滑动的面板，该面板包含联系表单。我需要发布表单数据，但是在提交按钮被命中后阻止重新加载所有页面，因为页面重新加载后，向下滑动面板也会重新加载并缩小。我只需要刷新div元素就可以将表格数据传递给PHP。 p>

 ＆lt; div id =“form”＆gt; 
＆lt; form id =“form”action =  “/”＆gt; 
＆lt; br /＆gt; 
＆lt; p＆gt; 
＆lt; label for =“name”＆gt;＆lt; small＆gt;名称*＆lt; / small＆gt;＆lt; / label＆gt;＆lt; br  /＆gt; 
＆lt; input type =“text”name =“name”id =“name”value =“”size =“15”/＆gt; 
 
＆lt; / p＆gt; 
＆lt; p＆gt;  
＆lt; label for =“email”＆gt;＆lt; small＆gt; Mail *＆lt; / small＆gt;＆lt; / label＆gt;＆lt; br /＆gt; 
＆lt; input type =“text”name =“email”id  =“email”value =“”size =“15”/＆gt; 
 
＆lt; / p＆gt; 
＆lt; p＆gt; 
＆lt; label for =“comments”＆gt;＆lt; small＆gt;讯息*＆lt;  ; / small＆gt;＆lt; / label＆gt; 
＆lt; textarea name =“comments”id =“comments”rows =“10”cols =“5”＆gt;＆lt; / textarea＆gt; 
＆lt; / p＆gt; 
  ＆lt; p＆gt; 
＆lt; input name =“submit”type =“submit”id =“ 提交“value =”发送“/＆gt; 
＆amp; nbsp; 
＆lt; input name =”reset“type =”reset“id =”reset“tabindex =”5“value =”重置“/＆gt; \  n＆lt; / p＆gt; 
＆lt; / form＆gt; 
＆lt; / div＆gt; 
  code>  pre> 
  div>

答

first make submit button:

<input name="submit" type="button" id="submit" value="Send" />

Then use this:

$("#submit").click(function(){
  $.post("test.php", $("#form").serialize());
});

http://jsfiddle.net/g3Ubh/

将HTML表单数据提交到div元素而不刷新页面

相关推荐