एचटीएमएल एंकर क्लिक

Question

पर पोस्ट डेटा भेजने के लिए क्या एक एंकर टैग एक एससमिट (कुछ पोस्ट विशेषताओं के साथ) जैसा व्यवहार करना संभव है? कारण मेरे पास एक एंकर टैग है, क्योंकि मैं सबमिट बटन को नापसंद करता हूं और एक सीएसएस चाहता था बटन।

यहाँ अभी मैं क्या कर रहा है (और यह काम नहीं कर रहा)

html फ़ाइल

<div class="footer"><a href="#" id = "test_btn" class="button"><strong>Sign Up</strong></a></div> 

<div class="footer"><a href="#" id = "test2_btn" class="button"><strong>Sign Up</strong></a></div> 

.js फ़ाइल

<script type="text/javascript"> 

$("#test_btn").live("click",function(){ 
    var post_data = {'account_type':"Free"} 
    return $.post("www.someplacehere.com/user_sign_up/1/", post_data); 
}); 

$("#test2_btn").live("click",function(){ 
    var post_data = {'account_type':"Premium"} 
    return $.post("www.someplacehere.com/user_sign_up/1/", post_data); 
}); 
</script> 

मैं एक उचित प्रतिक्रिया मिल, लेकिन यह है मुझे POST डेटा पृष्ठ पर नहीं भेजता है, केवल पृष्ठ के शीर्ष पर (एंकर के कारण) पर रीडायरेक्ट करता है। किसी भी विचार से मुझे उस एचटीएमएल पेज पर पहले से भरने वाले POST डेटा के साथ सही स्थान (एचटीएमएल पेज) पर कैसे निर्देशित किया जाए? जैसा कि आप देखते हैं, यह एक साधारण .submit() नहीं है। अभी शायद एक छिपे हुए फ़ील्ड के साथ जाने जा रहा है और फिर .submit() करें, लेकिन यह सोचकर कि पृष्ठ प्राप्त करने का कोई आसान तरीका है क्योंकि POST ठीक से किया जा सकता है।

धन्यवाद!

Answer 1

हर कोई फिर से आविष्कार बटन रोकें। वे पहले से मौजूद हैं, और वे भी स्टाइल किया जा सकता है।

button[type=submit] { 
    background-color: transparent; 
    border: none; 
    border-bottom: solid blue 1px; 
    color: blue; 
    font-weight: bold; 
    padding: 0px; 
    cursor: pointer; 
} 

यहाँ demo'd: http://jsfiddle.net/MZbLW/

---

मैं यह भी कहना चाहिए कि दुनिया में हर किसी फार्म के अंत में पारंपरिक बटन की तलाश में जा रहा है, और यह देखने के लिए कर रही है उपयोगिता दृष्टिकोण से पूरी तरह से अलग नहीं हो सकता है।

Answer 2

लिंक के लिए क्लिक हैंडलर में, डिफ़ॉल्ट कार्रवाई को रोकने के लिए झूठी वापसी करें।

मैं भी click() फ़ंक्शन का उपयोग नहीं करता, लाइव नहीं।

Answer 3

आपके क्लिक ईवेंट को या तो झूठी वापसी या डिफ़ॉल्ट को रोकने की आवश्यकता है।

AJAX का उपयोग असिंक्रोनस है ताकि आप मान वापस नहीं कर पाएंगे, आपको पूर्ण कॉलबैक में मान मिलना होगा।

http://api.jquery.com/jQuery.post/

Answer 4

कुछ इस तरह शायद करीब आता है:

$(a.submitLink).click(function() { 
    $.post({data: values}); 

    $.post({data2: values2}); 

    return false; 
}); 

कुंजी है कि यहाँ झूठी लौटने लिंक के लिए डिफ़ॉल्ट व्यवहार को रोकता है। यदि आपको पोस्ट के परिणामों के आधार पर अतिरिक्त प्रसंस्करण करने की आवश्यकता है तो आप कॉलबैक फ़ंक्शन के अंदर ऐसा करेंगे। ऐसा कोई कारण नहीं है कि आप अपने एंकरों से जुड़े फ़ंक्शन के अंदर कई AJAX कॉल जारी नहीं कर सकते हैं, लेकिन आपको यह सुनिश्चित करना होगा कि लिंक लिंक के रूप में भी कार्य न करे।

Answer 5

एक त्वरित सोचा क्यों तुम

< बटन प्रकार का उपयोग कर = "सबमिट करें" वर्ग = "पाद लेख" > पंजीकरण </बटन >
बजाय
< इनपुट प्रकार = प्रस्तुत कोशिश मत करो >

इससे आपको अपने बटन को स्टाइल करने की लचीलापन मिलती है और आप इसमें टेक्स्ट भी ले सकते हैं। इसके अलावा आपको कस्टम बटन बनाने और इसे वापस पोस्ट करने के सभी कड़ी मेहनत करने की ज़रूरत नहीं है।

बस इसे एक विचार दें।