Envoi d'un formulaire ajax jQuery avec deux boutons de soumission

Question

J'ai une forme qui ressemble à ceci:

<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> 

Quand je lie à présenter de la forme ($("vote_form").submit()), je ne semble pas avoir accès à quelle image l'utilisateur a cliqué sur. Donc, je suis en train de se lier à cliquer sur l'image elle-même ($(".vote_down, .vote_up").click()), qui soumet toujours la forme, que j'essaie

• return false;
• event.stopPropogation(); ou
• événement.preventDefault();

car tous sont des événements de formulaire.

1. Dois-je joindre mon .post de $() à l'événement form.submit(), et si oui, comment puis-je dire à quelle entrée l'utilisateur a cliqué sur, ou

2. Dois-je joindre mon $ .post() au clic sur l'image, et si oui, comment puis-je empêcher le formulaire de soumettre aussi.

Voici ce que mon code jQuery ressemble maintenant:

$(".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

Sur la base de la réponse d'Emmett, mon solution idéale pour c'était juste de tuer soumettre de la forme avec Javascript lui-même, comme ceci:

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

Et totalement travaillé.

Pour être complet, certains de mes codes JS dans le message original ont besoin d'un peu d'amour. Par exemple, la façon dont j'ajoutais à la fonction sérialiser ne semblait pas fonctionner.Cela a fait:

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

Voici mon intégralité du code jQuery:

$(".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

Je ne comprends pas comment return false et preventDefault n'a pas réussi à faire leur travail. Peut-être essayer de remplacer les boutons d'image avec des images liées:

<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(... 
}); 

Vous pouvez toujours veiller à ce qu'une forme ne présente pas en se liant à l'événement présenter, par exemple:

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

Answer 3

Essayez d'ajouter onsubmit = "return false " à votre formulaire, puis de soumettre votre formulaire javascript:

<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

Vous pouvez également essayer le plugin jquery De qui, comme toutes sortes d'outils agréables pour la présentation des formulaires via ajax.

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

Answer 5

Sans avoir recours au plugin formulaire (que vous devez utiliser), vous devriez manutentionneront le soumettre à la place événement. Le code resterait assez proche de l'original:

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

Answer 6

Une autre solution consiste à utiliser un champ caché, et que l'événement onclick mettre à jour sa valeur. Cela vous donne accès à partir de javascript, ainsi que sur le serveur où le champ caché sera affiché.

Answer 7

Vous pouvez déclencher l'envoi du formulaire en cliquant sur les images. Cela fonctionnera avec 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 ...