फॉर्म पोस्ट करने के लिए jquery का उपयोग करने के लिए आप मौजूदा HTML फॉर्म को कैसे ओवरराइड करते हैं?

Question

मेरे पास एक साधारण रूप है कि मैं वर्तमान में उपनाम अपडेट करने के लिए सर्वर पर वापस पोस्ट कर रहा हूं। मैं जो jQuery कोड जोड़ता हूं (फॉर्म को बदलने के बिना) ताकि पृष्ठ रीफ्रेश नहीं होगा, लेकिन इसके बजाय jquery पृष्ठभूमि में फॉर्म पोस्ट करेगा और उसके बाद सर्वर से उत्तर वाला एक चेतावनी संदेश पॉप अप करेगा?

<form method="post" action="http://www.myserver.com/update_nickname" name="input"> 
    Quick form to test update_nickname:<br> 
    New nickname:<input type="text" value="BigJoe" name="newNickname"><br> 
    <input type="submit" value="Submit"> 
</form> 

<script src="jquery-1.4.2.min.js" type="text/javascript"> </script> 

Answer 1

try reading this.

या

$("form").submit(function(e){ 
    var form = $(this); 
    $.ajax({ 
     url : form.attr('action'), 
     type : form.attr('method'), 
     data : form.serialize(), // data to be submitted 
     success: function(response){ 
      alert(response); // do what you like with the response 
     } 
    }); 
    return false; 
}); 

Answer 2

आपको "सबमिट" ईवेंट से जुड़ने और डिफ़ॉल्ट कार्रवाई को रोकने के लिए jQuery का उपयोग करने की आवश्यकता है। यह थोड़ा और अधिक कुशल हो जाएगा अपने फार्म और उपनाम इनपुट उनके नाम करने के लिए इस्तेमाल करता है, तो इसके अलावा में id की:

<script type="text/javascript"> 
    jQuery(function($){ 
     $("form[name=input]").submit(function(e){ 
     e.preventDefault(); // Keep the form from submitting 
     var form = $(this); 

     // Use the POST method to post to the same url as 
     // the real form, passing in newNickname as the only 
     // data content 
     $.post(form.attr('action'), { newNickname: form.find(':text').val() }, function(data){ 
      alert(data); // Alert the return from the server 
     }, "text"); 
     }); 
    }); 
</script> 

Answer 3

वहाँ सिर्फ इस के लिए एक प्लगइन है।

http://jquery.malsup.com/form/