2010-11-24 18 views
6

मेरे पास एक AJAX फ़ॉर्म है जिसे मैं एक jQuery के साथ <input type="button"> का उपयोग कर स्थापित कर रहा हूं। क्लिक करें।इनपुट प्रकार = AJAX के साथ इनपुट प्रकार = "बटन" के बजाय "सबमिट करें"?

समस्या यह है कि, क्योंकि <input type="submit"> फॉर्म में नहीं है, फॉर्म पारंपरिक तरीके से सबमिट नहीं होता है, इसलिए फॉर्म वैधकर्ता हमेशा काम नहीं करते हैं, और एंटर बटन दबाकर कुछ भी नहीं होता है।

यदि मैं क्लिक किया गया इनपुट सबमिट करता हूं, जब इसे क्लिक किया जाता है (या दर्ज हिट इत्यादि), पृष्ठ फिर से लोड होता है जैसे कि यह AJAX रूप नहीं है।

मुझे यहां क्या याद आ रही है?

उत्तर

11

सबमिट बटन का उपयोग करें। सबमिट बटन डिफ़ॉल्ट ब्राउज़र व्यवहार के मामले में अधिक संगत होगा, जैसे एंटर दबाकर। फिर, सबमिट ईवेंट पर, फॉर्म जमा करने को रद्द करें और अपना AJAX कोड चलाएं।

<form onsubmit="return false;"> 
<!--Blah Blah Blah--> 
<input type="submit"> 
</form> 

आप jQuery का उपयोग कर रहे हैं, तो आप एक अधिक "स्वच्छ" विधि

$('#form_id').bind('submit',function(e) { 
    e.preventDefault(); //Will prevent the submit... 
    //Add additional code here 
}); 
+0

अगर वह के रूप में के jQuery का उपयोग कर घटना प्रस्तुत देता उपयोग कर सकते हैं, वहाँ 'ऑनसबमिट =" return false के लिए आवश्यकता नहीं है; "पुरानी कार्यक्षमता। 'e.preventDefault()' पहले से ही चाल है। –

+2

@ रॉबर्ट कोरिटनिक: मुझे यह पता है। मैं वह करने के लिए दो तरीकों की पेशकश कर रहा था जो वह कर रहा था। – Kranu

4

बल्कि परिवर्तन प्रपत्र के submit व्यवहार करने और अपने <input type="submit"> बटन के रूप में अच्छी तरह से रख:

$("form").submit(function(e){ 
    e.preventDefault(); 
    // do ajax submition 
    $.ajax({ 
     url: "SomeURL", 
     type: "POST", 
     data: $(this).serializeArray(), 
     success: function(data, status, xhr) { 
      // do the success stuff 
     }, 
     error: function(xhr, status err) { 
      // do the error stuff 
     } 
    }); 
}); 

लाभ: अच्छी बात यह सभी मामलों में काम करेंगे जब आप हिट प्रपत्र के इनपुट में से किसी पर ENTER है तत्व या सबमिट बटन पर क्लिक करें। यह हमेशा अपवाद के बिना काम करेगा।

संबंधित मुद्दे