प्रोटोटाइप का उपयोग करके अजाक्स के माध्यम से एक फॉर्म सबमिट करें और परिणाम div

Question

अपडेट करें मैं सोच रहा हूं कि मैं अजाक्स (प्रोटोटाइप फ्रेमवर्क का उपयोग करके) के माध्यम से एक फॉर्म कैसे सबमिट कर सकता हूं और "परिणाम" div में सर्वर प्रतिक्रिया प्रदर्शित कर सकता हूं।

<form id="myForm" action="/getResults"> 
    [...] 
    <input type="submit" value="submit" /> 
</form> 
<div id="result"></div> 

मैं एक जावास्क्रिप्ट समारोह (जो Ajax.Updater उपयोग करता है) करने के लिए "ऑनसबमिट" (फार्म पर) और "onclick" (इनपुट पर), लेकिन रूप है संलग्न करने के लिए करने की कोशिश की: एचटीएमएल इस तरह दिखता है फ़ंक्शन समाप्त होने के बाद भी "गैर-अजाक्स" सबमिट किया गया है (इसलिए पूरा पृष्ठ परिणामों द्वारा प्रतिस्थापित किया गया है)।

Answer 1

प्रोटोटाइप एपीआई के पृष्ठों को Form.Request और Event हैंडलिंग पर देखें।

मूल रूप से, अगर आपके पास इस:

<form id='myForm'> 
.... fields .... 
<input type='submit' value='Go'> 
</form> 
<div id='result'></div> 

आपका js होगा, और अधिक या कम:

Event.observe('myForm', 'submit', function(event) { 
    $('myForm').request({ 
     onFailure: function() { .... }, 
     onSuccess: function(t) { 
      $('result').update(t.responseText); 
     } 
    }); 
    Event.stop(event); // stop the form from submitting 
}); 

Answer 2

आपको AJAX फ़ंक्शन से मूल्य को वापस करने की आवश्यकता है, जो मानक फ़ॉर्म सबमिट करता है।

<form id="myForm" onsubmit="return myfunc()" action="/getResults"> 


function myfunc(){ 
    ... do prototype ajax stuff... 
    return false; 

}

प्रपत्र भी पर ऑनसबमिट का उपयोग करते हुए, जो प्रवेश कुंजी के साथ प्रस्तुत उपयोगकर्ताओं कैप्चर करता है।

Answer 3

आपको पहले serialize your form की आवश्यकता है, तो का उपयोग करके Ajax Updater पर कॉल करें और इसे क्रमबद्ध फ़ॉर्म डेटा पास करें। परिणाम तब आपके द्वारा निर्दिष्ट तत्व में दिखाई देगा।

Answer 4

आप onsubmit घटना के डिफ़ॉल्ट कार्रवाई को रोकने के लिए की जरूरत है।

उदाहरण के लिए:

function submit_handler(e){ 
    Event.stop(e) 
} 

अधिक जानकारी पर stopping default event behavior in Prototype »