首页>>表单>>jquery实现不刷新页面的动态表单提交效果(2014-12-21)

jquery实现不刷新页面的动态表单提交效果

 本例未考虑其他，只完整演示无刷新提交表单，没有验证表单和阻止重复提交的问题，本站其他代码有以上的内容可以搜索查看

jquery实现不刷新页面的动态表单提交效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. $(function() {  
  2.   $('.error').hide();  
  3.   $('input.text-input').css({backgroundColor:"#FFFFFF"});  
  4.   $('input.text-input').focus(function(){  
  5.     $(this).css({backgroundColor:"#FFDDAA"});  
  6.   });  
  7.   $('input.text-input').blur(function(){  
  8.     $(this).css({backgroundColor:"#FFFFFF"});  
  9.   });  
  10. /*Download by http://www.codefans.net*/  
  11.   $(".button").click(function() {  
  12.         // validate and process form  
  13.         // first hide any error messages  
  14.     $('.error').hide();  
  15.           
  16.       var name = $("input#name").val();  
  17.         if (name == "") {  
  18.       $("label#name_error").show();  
  19.       $("input#name").focus();  
  20.       return false;  
  21.     }  
  22.         var email = $("input#email").val();  
  23.         if (email == "") {  
  24.       $("label#email_error").show();  
  25.       $("input#email").focus();  
  26.       return false;  
  27.     }  
  28.         var phone = $("input#phone").val();  
  29.         if (phone == "") {  
  30.       $("label#phone_error").show();  
  31.       $("input#phone").focus();  
  32.       return false;  
  33.     }  
  34.           
  35.         var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
  36.         //alert (dataString);return false;  
  37.           
  38.         $.ajax({  
  39.       type: "POST",  
  40.       url: "bin/process.php",  
  41.       data: dataString,  
  42.       success: function() {  
  43.         $('#contact_form').html("<div id='message'></div>");  
  44.         $('#message').html("<h2>Contact Form Submitted!</h2>")  
  45.         .append("<p>We will be in touch soon.</p>")  
  46.         .hide()  
  47.         .fadeIn(1500, function() {  
  48.           $('#message').append("<img id='checkmark' src='images/check.png' />");  
  49.         });  
  50.       }  
  51.      });  
  52.     return false;  
  53.     });  
  54. });  
  55. runOnLoad(function(){  
  56.   $("input#name").select().focus();  
  57. });  
XML/HTML Code
  1. <form name="contact" method="post" action="">  
  2.     <fieldset>  
  3.       <label for="name" id="name_label">Name</label>  
  4.       <input type="text" name="name" id="name" size="30" value="" class="text-input" />  
  5.       <label class="error" for="name" id="name_error">This field is required.</label>  
  6.         
  7.       <label for="email" id="email_label">Return Email</label>  
  8.       <input type="text" name="email" id="email" size="30" value="" class="text-input" />  
  9.       <label class="error" for="email" id="email_error">This field is required.</label>  
  10.         
  11.       <label for="phone" id="phone_label">Return Phone</label>  
  12.       <input type="text" name="phone" id="phone" size="30" value="" class="text-input" />  
  13.       <label class="error" for="phone" id="phone_error">This field is required.</label>  
  14.         
  15.         <br />  
  16.       <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />  
  17.     </fieldset>  
  18.   </form>  

 


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