भेजने से दो के साथ एक jQuery ajax प्रपत्र बटन प्रस्तुत

Question

मैं एक रूप है कि इस तरह दिखता है:

<form action="/vote/" method="post" class="vote_form"> 
    <input type="hidden" name="question_id" value="10" /> 
    <input type="image" src="vote_down.png" class="vote_down" name="submit" value="down" /> 
    <input type="image" src="vote_up.png" class="vote_up" name="submit" value="up" /> 
</form> 

जब मैं करने के लिए बाध्य फ़ॉर्म के सबमिट करें ($("vote_form").submit()), मैं जो छवि के लिए उपयोग किया प्रतीत नहीं उपयोगकर्ता ने क्लिक किया। तो मैं क्या मैं कोशिश

• वापसी झूठी की परवाह किए बिना छवि को ही ($(".vote_down, .vote_up").click()) है, जो हमेशा फ़ॉर्म सबमिट होने पर क्लिक करने के लिए बाध्य करने के लिए कोशिश कर रहा हूँ;
• event.stopPropogation(); या
• event.preventDefault();

क्योंकि ये सभी फॉर्म इवेंट हैं।

1. मैं form.submit() घटना के लिए अपने $ .post() संलग्न करना चाहिए, और यदि हां, मैं कैसे बताऊँ जो इनपुट उपयोगकर्ता पर क्लिक किया, या

2. मैं संलग्न करना चाहिए मेरी छवि पर $ .post() क्लिक करें, और यदि हां, तो मैं फ़ॉर्म को सबमिट करने से कैसे रोकूं।

यहाँ मेरी jQuery कोड अब कैसा दिखता है:

$(".vote_up, .vote_down").click(function (event) { 
    $form = $(this).parent("form"); 
    $.post($form.attr("action"), $form.find("input").serialize() + { 
     'submit': $(this).attr("value") 
    }, function (data) { 
     // do something with data 
    }); 
    return false; // <--- This doesn't prevent form from submitting; what does!? 
}); 

Answer 1

एम्मेट के जवाब के आधार पर, इस के लिए मेरे आदर्श ठीक बस प्रपत्र के जावास्क्रिप्ट के साथ ही सबमिट करते हैं, इस तरह मारने के लिए किया गया था:

$(".vote_form").submit(function() { return false; }); 

और वह पूरी तरह से काम किया।

पूर्णता के लिए, मूल पोस्ट में मेरे कुछ जेएस कोड को थोड़ा प्यार चाहिए। उदाहरण के लिए, जिस तरह से मैं serialize फ़ंक्शन में जोड़ रहा था वह काम नहीं कर रहा था।यह आपने क्या किया:

$(".vote_form").submit(function() { return false; }); 
$(".vote_up, .vote_down").click(function(event) { 
    $form = $(this).parent("form"); 
    $.post($form.attr("action"), $form.serialize() + "&submit="+ $(this).attr("value"), function(data) { 
     // do something with response (data) 
    }); 
}); 

Answer 2

मैं कैसे return false और preventDefault अपना काम करने में विफल नहीं मिलता है। हो सकता है कि लिंक की गई छवियों के साथ छवि बटन की जगह का प्रयास करें:

<a href="#" class="vote_down"><img src="vote_down.png"/></a> 

$('#vote_form > a').click(function(e) { 
    e.preventDefault(); 

    //one way to know which image was clicked 
    alert($(this).attr('class')); 

    $.post(... 
}); 

तुम हमेशा सुनिश्चित कर सकते हैं कि एक रूप है, प्रस्तुत घटना से जुड़ कर प्रस्तुत नहीं करता है जैसे:

$('#vote_form').submit(function() { 
    return false; 
}); 

Answer 3

जोड़ने का प्रयास करें ऑनसबमिट = "return false , " आपके प्रपत्र, और फिर जावास्क्रिप्ट के साथ अपने पर्चे को जमा:

<form action="/vote/" method="post" name="vote_form" class="vote_form" onsubmit="return false;"> 
    <input type="hidden" name="question_id" value="10" /> 
    <input type="image" src="vote_down.png" class="vote_down" name="submit" value="down" onclick="imageClicked(this)"/> 
    <input type="image" src="vote_up.png" class="vote_up" name="submit" value="up" onclick="imageClicked(this)"/> 
</form> 

<script> 
function imageClicked(img) { 
    alert(img.className); 
    document.forms["vote_form"].submit(); 
} 
</script> 

Answer 4

तुम भी प्लगइन से jQuery की कोशिश कर सकते हैं जो ajax के माध्यम से रूपों प्रस्तुत करने के लिए अच्छा उपकरण के सभी प्रकार के रूप में।

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

Answer 5

फार्म प्लगइन का सहारा (जो आप का उपयोग करना चाहिए) आप के बजाय घटना प्रस्तुत निपटने की जानी चाहिए बिना। कोड बहुत मूल के करीब रहें हैं:

$("form").submit(function()) { 
    $.post($(this).attr("action"), $(this).serialize(), function(data) { 
    // work with the response 
    }); 
    return false; 
}); 

Answer 6

एक अन्य समाधान एक छिपी हुई फ़ील्ड का उपयोग करने के लिए, और ऑनक्लिक ईवेंट अपने मूल्य को अद्यतन है:

$form.serialize() + "&submit="+ $(this).attr("value") 

यहाँ मेरा पूरा jQuery कोड है। यह आपको जावास्क्रिप्ट से एक्सेस करता है, साथ ही साथ सर्वर पर जहां छुपा क्षेत्र पोस्ट किया जाएगा।

Answer 7

आप छवियों के क्लिक पर सबमिट फॉर्म को ट्रिगर कर सकते हैं। यह preventDefault() के साथ काम करेगा।

var vote; 
$(".vote_up, .vote_down").click(function(event) { 
    vote = $(this).attr("class"); 
    $(".vote_form").trigger("submit"); 
}); 

$(".vote_form").submit(function(event) { 
    $form = $(this); 
    $.post($form.attr("action"), $form.serialize() + "&submit="+ vote, function(data) { 
     // do something with response (data) 
    });  
    event.preventDefault(); 
}); 

Answer 8

var form = jQuery('#myform'); 

var data = form.serialize(); 

// add the button to the form data 
var btn = jQuery('button[name=mybuttonname]').attr('value'); 
data += '&yourpostname=' + btn; 

var ajax = jQuery.ajax({ 
    url: url, 
    type: 'POST', 
    data: data, 
    statusCode: { 
     404: function() { 
      alert("page not found"); 
     } 
    } 
}); 
... rest of your code ...