首页>>表单>>简单的jquery ajax提交表单 无表单验证(2014-11-05)

简单的jquery ajax提交表单 无表单验证

简单的jquery ajax提交表单 无表单验证
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <form id="submit" method="post" name="submit" action="">  
  2.             <fieldset>  
  3.                 <legend>Enter Information</legend>  
  4.                 <label for="fname">Client First Name:</label>  
  5.                 <br>  
  6.                 <input type="text" name="fname" id="fname" class="text" size="20">  
  7.                 <br>  
  8.                 <label for="lname">Client Last Name:</label>  
  9.                 <br>  
  10.                 <input type="text" name="lname" id="lname" class="text" size="20">  
  11.                 <br><br>  
  12.                 <button type="submit" class="button positive"> <img src="tick.png" alt=""> Add Client </button>  
  13.             </fieldset>  
  14.         </form>  
  15.         <div class="success" style="display:none;">  
  16.             <p>Client has been added.</p>  
  17.         </div>  
JavaScript Code
  1. <script type"text="" javascript"="">  
  2. $(document).ready(function(){  
  3.     $("form#submit").submit(function() {  
  4.     // we want to store the values from the form input box, then send via ajax below  
  5.     var fname     = $('#fname').attr('value');  
  6.     var lname     = $('#lname').attr('value');   
  7.           
  8.         $.ajax({  
  9.             type: "POST",  
  10.             url: "ajax.php",  
  11.             data: "fname="+ fname + "&lname=" + lname,  
  12.             success: function(){  
  13.                 $('form#submit').hide();  
  14.                 //$('form#submit :input').val("");  
  15.                 $('div.success').fadeIn();  
  16.             }  
  17.         });  
  18.     return false;  
  19.     });  
  20. });  
  21. </script>  

 


原文地址:http://www.freejs.net/article_biaodan_447.html