enviar un formulario ajax jQuery con dos botones de envío

Question

Tengo una forma que se parece a esto:

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

Cuando ato a presentar ($("vote_form").submit()), no parecen de la forma de tener acceso a qué imagen el usuario hizo clic en. Así que estoy tratando de obligar a hacer clic en la imagen en sí ($(".vote_down, .vote_up").click()), que siempre envía el formulario, independientemente de si lo intento

• return false;
• event.stopPropogation(); o
• event.preventDefault();

porque todos ellos son eventos de formulario.

1. debo adjuntar a mi $ .post() para el evento form.submit(), y si es así, ¿cómo puedo saber qué entrada el usuario hace clic en, o

2. debo adjuntar a mi $ .post() al clic en la imagen y, de ser así, cómo impido que el formulario también se envíe.

Esto es lo que mi código jQuery parece ahora:

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

Sobre la base de la respuesta de Emmett, mi solución ideal para esto era sólo para matar de la forma presente consigo mismo Javascript, así:

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

Y eso totalmente trabajado.

Para completar, algunos de mis códigos JS en la publicación original necesitan un poco de amor. Por ejemplo, la forma en que estaba agregando a la función serializar no parecía funcionar.Esto hizo:

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

Aquí es toda mi código 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

No entiendo cómo return false y preventDefault dejado de hacer su trabajo. Tal vez intente reemplazar los botones de imagen con imágenes vinculadas:

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

Siempre se puede garantizar que un formulario no se somete al unirse al evento presentará, por ejemplo:

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

Answer 3

Trate de añadir onsubmit = "return false ; " a su forma y, a continuación, enviar el formulario con 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

También puede probar el jQuery De Plugin que como todo tipo de herramientas agradables para el envío de formularios a través de ajax.

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

Answer 5

Sin recurrir al plugin formulario (que se debe utilizar) que debe ser el manejo del evento Enviar su lugar. El código se quedaría muy cerca de la original:

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

Answer 6

Otra solución es utilizar un campo oculto, y tienen actualizar el evento onclick su valor. Esto le da acceso desde javascript, así como en el servidor donde se publicará el campo oculto .

Answer 7

Puede activar el formulario enviado al hacer clic en las imágenes. Esto funcionará con 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 ...