Pase una variable adicional al enviar un formulario usando jQuery

Question

Tengo un formulario en el que el botón Enviar no se encuentra dentro de las etiquetas <form>. El botón Enviar tiene un controlador click para enviar el formulario a través del evento submit() de jQuery. Esto funciona perfectamente

Sin embargo, también necesito el valor del botón Enviar para PUBLICAR. Como el botón no existe dentro de las etiquetas <form>, no está incluido en la matriz POST. Por lo tanto, necesito diseñar una forma de pasar una variable adicional cuando se envíe el formulario.

Algunas estipulaciones sobre lo que no puede suceder para lograr esto incluyen:

• El botón Enviar no se puede mover dentro de los <form> etiquetas.
• No puede utilizar los métodos jQuery ajax, post o get.
• No puede haber ocultado input campos o enviar botones ocultos por CSS.
• El formulario debe actuar exactamente como si hubiera un botón Enviar normal en el formulario.

Imaginé algo así como, pero obviamente esto no funciona.

$('#admin_form').submit({'variable_name', 'true'}); 

¿Alguien tiene alguna idea sobre cómo podría lograr esto?

Answer 1

Una cosa que podría hacer es usar el atributo onsubmit para que javascript inserte un campo de entrada en el formulario con el valor del botón de enviar a medida que se envía. Tendría que hacer esto con un campo de entrada oculto, pero solo agregaría el campo de entrada justo después de que el usuario hizo clic en el botón Enviar, por lo que el campo de entrada no existiría allí desde el principio (con suerte, esto satisface sus requisitos)) Así que algo como:

function submitHandler() 
{ 
    submitVal = $('#submitButton').val(); 
    $('#myForm').append("<input type='hidden' name='submitValue' value='"+ 
         submitVal+"' />"); 
    return true; 
} 

Que se quedaría en el valor extra justo cuando se hizo clic en el botón.

Answer 2

La respuesta de Jesse es la única forma de lograr esto a través de POST. También podría agregar la variable al valor de acción del formulario, pero eso sería pasar ese parámetro a través de GET en lugar de POST. Sin una entrada oculta adjunta al formulario antes de permitir la acción predeterminada de "enviar" del navegador, no hay forma de acceder a los datos de entrada sin formato de la solicitud HTTP antes de que se haya enviado - es una gallina antes del dilema del huevo - lo que eres con la intención de cambiar los datos/encabezados de HTTP POST que se envían a la página siguiente, pero la única forma en que los datos existen antes de que el navegador publique los datos en la página siguiente es incorporando las etiquetas de entrada dentro del elemento de formulario.

Una solución alternativa que podría utilizar sería usar la función $ .post() para enviar los datos que desee mediante la publicación durante el controlador onsubmit, y en el controlador de éxito redirigir a la página que desee. Sé que esto no funciona de acuerdo con las reglas anteriores, pero de todos modos es otra posible solución a un problema.

Si desea obtener verdadera loca sin embargo y seguir todas las reglas, usted podría también:

1. "clonar" una versión oculta la forma al DOM
2. inyectar el botón de enviar en el formulario
3. desencadenar un hacer clic en el evento en el botón de envío inyectado en el formulario clonado.

Answer 3

Ésta parece ser una vieja pregunta, pero ya que me acabo de encontrar con un problema similar y encontró una buena solución (para mí), pensé que había puesto que:

$('#admin_form').trigger('submit', [ { 'variable_name': true } ]); 

o

$('#admin_form').trigger('submit', [ 'variable_name', 'true' ]); 

dependiendo de si se desea pasar una variable llamada variable_name con valor true o desea pasar 2 variables independientes.

Y para ser claros, esto no va a presentar por supuesto de forma automática variable_name con el resto de los campos del formulario, pero si usted tiene un presente manejador, como lo hago en jQuery, se pasarán las variables como argumentos, después de la evento.

Answer 4

Si quisiera hacerlo directamente desde un elemento que fue cambiado sin necesidad de escribir un manejador de presentar, esto funciona:

<script> 
$(function() { 
    $(".datePicker").datepicker({ 
     dateFormat: 'dd-M-yy', 
     onSelect: function (date) { 
     $('#dateChanger').append("<input type='hidden' name='changed_" + $(this).attr("name") + "' value='" + $(this).attr("value") + "' />");  
     $("#dateChanger").submit(); 
    } 
    }); 
}); 
</script> 

Answer 5

en jQuery 1.11.1

He conseguido que de esa manera:

$(yourForm).on('submit',{'yourExtraData':extraData},function(event){ 
     alert('your extra data ' + event.data['yourExtraData'] + ' went thru'); 
}); 

Comprobar también: https://api.jquery.com/event.data/