Modifique POST vars antes de publicar, usando jQuery

6 minutos de lectura

avatar de usuario
aidán

Tengo un formulario y un controlador de envío en jQuery.

Cuando el usuario envía el formulario, quiero modificar (agregar) algunos parámetros a la solicitud POST, antes de que se envíe desde el cliente al servidor.

es decir

  1. El usuario hace clic en ‘enviar’
  2. Mi manejador de envío de jQuery comienza a ejecutarse…
  3. Creo algunos pares clave/valor nuevos y los agrego a la carga útil POST

Por el momento, parece que mis únicas opciones son usar $.post()o $('form').append('<input type="hidden" name=... value=...');

Gracias por cualquier ayuda.

Editar: ya he adjuntado un controlador de envío al formulario; Estoy tratando de editar las variables de publicación entre el usuario que hace clic en el botón Enviar y la solicitud que se envía al servidor.

Utilizar el submit() función en el formulario para crear una devolución de llamada. Si la función devuelve verdadero, se enviará el formulario; si es falso, el formulario no se publicará.

$('#theForm').submit(function() {
    $("#field1").val(newValue1);
    $("#field2").val(newValue2);
    $(this).append(newFormField);
    return true;
});

etc.

  • Parece que esta es la mejor opción entonces. Aunque tengo que crear dinámicamente muchas entradas ocultas.

    – Aidan

    15 de abril de 2010 a las 18:26

Vista de alto nivel:

Cuando un formulario se envía de forma nativa, es la última operación que realiza un navegador y se ejecuta fuera del alcance del motor de representación/intérprete de JavaScript.

Cualquier intento de interceptar la solicitud POST o GET real a través de JavaScript es imposible ya que esta solicitud web tradicional ocurre exclusivamente entre el motor del navegador y el subsistema de red.

Solución moderna:

Cada vez es más popular que los desarrolladores web envíen datos de formulario mediante XMLHttpRequest, una API de navegador web que permite al intérprete de JavaScript acceder al subsistema de red del navegador.
This is commonly referred to as Ajax

Un uso simple pero común de esto sería algo como:

/**
 * Function is responsible for gathering the form input data, 
 * adding additional values to the list, and POSTing it to the
 * server via Ajax.
 */
function processForm() {
  //Retreive the data from the form:
  var data = $('#myForm').serializeArray();

  //Add in additional data to the original form data:
  data.push({
    name: 'age',
    value: 25
  }, {
    name: 'sex',
    value: 'M'
  }, {
    name: 'weight',
    value: 200
  });

  //Submit the form via Ajax POST request:
  $.ajax({
    type: 'POST',
    url: 'myFormProcessor.php',
    data: data,
    dataType: 'json'
  }).done(function(data) {
    //The code below is executed asynchronously, 
    //meaning that it does not execute until the
    //Ajax request has finished, and the response has been loaded.
    //This code may, and probably will, load *after* any code that
    //that is defined outside of it.
    alert("Thanks for the submission!");
    console.log("Response Data" + data); //Log the server response to console
  });
  alert("Does this alert appear first or second?");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<form id="myForm" onsubmit="processForm()">
  <input type="text" name="first_name" />
  <input type="text" name="last_name" />
  <input type="submit" value="Submit">
</form>

Enfoque nativo:
Antes de la existencia de XMLHttpRequest, una solución sería simplemente agregar cualquier dato de formulario adicional directamente al documento.

Usando el mismo formulario publicado anteriormente, un método jQuery append podría verse así:

function processForm() {
  $('<input>').attr('type', 'hidden').attr('name', 'age').attr('value', 25).appendTo('#myForm');
  $('<input>').attr('type', 'hidden').attr('name', 'sex').attr('value', 'M').appendTo('#myForm');
  $('<input>').attr('type', 'hidden').attr('name', 'weight').attr('value', 200).appendTo('#myForm');

  return true; //Submit the form now 
  //Alternatively you can return false to NOT submit the form.
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<form action="myFormProcessor.php" method="POST" id="myForm" onsubmit="return processForm()">
  <input type="text" name="first_name" />
  <input type="text" name="last_name" />
  <input type="submit" value="Submit">
</form>

No creo que puedas modificar las variables POST de esa manera. Cuando se ejecuta un controlador de envío, no hay un hash de los datos del formulario que realmente existe que pueda agregar o modificar. Creo que tiene razón: sus únicas opciones para $ .post() usted mismo (que recomendaría) o para agregar entradas ocultas al formulario (tiene la sobrecarga de la modificación DOM que realmente no necesita).

He estado trabajando en esta pregunta durante un día y se me ocurrió una buena solución:

podría usar Jquery .clone() para crear una copia del formulario que desea enviar. Luego podría hacer las modificaciones en la copia y finalmente enviar la copia.

avatar de usuario
Tomás

Adjunte un controlador de envío () al formulario.

$('form#myForm').submit(myPostHandlingFunction);

Luego envíe/haga la publicación desde su función. Lo más fácil sería simplemente completar un par de entradas ocultas en el formulario y luego devolver verdadero para permitir que se realice el envío si todo se ve bien.

  • Tengo que crear muchas entradas. Mi pregunta es: ¿uso $.post(‘url’, myData); falso retorno; o $(‘formulario’).append(‘perdida de nuevas entradas ocultas’); volver verdadero;? ¿O hay un mejor camino? Espero que haya una mejor manera.

    – Aidan

    15 de abril de 2010 a las 18:24

  • Si tiene una tonelada de datos adicionales para pasar, supongo que usaría $.post. Puede llamar a $(‘form#myForm).serialize para obtener su diccionario de datos inicial y luego agregarlo, luego publicar los datos y redirigir a su usuario si tiene éxito. Sin embargo, si tiene una tonelada de datos adicionales para pasar, ¿por qué? Si no es una entrada del usuario, ¿por qué no calcularla en el back-end en lugar de confiar en JavaScript?

    – Tomás

    15 de abril de 2010 a las 19:36

avatar de usuario
Arrendajo

Puede enganchar el evento de clic del botón de enviar y hacer su procesamiento allí. Para los pares clave/valor, puede probar un elemento de formulario oculto.

  • Tengo que crear muchas entradas. Mi pregunta es: ¿uso $.post(‘url’, myData); falso retorno; o $(‘formulario’).append(‘perdida de nuevas entradas ocultas’); volver verdadero;? ¿O hay un mejor camino? Espero que haya una mejor manera.

    – Aidan

    15 de abril de 2010 a las 18:24

  • Si tiene una tonelada de datos adicionales para pasar, supongo que usaría $.post. Puede llamar a $(‘form#myForm).serialize para obtener su diccionario de datos inicial y luego agregarlo, luego publicar los datos y redirigir a su usuario si tiene éxito. Sin embargo, si tiene una tonelada de datos adicionales para pasar, ¿por qué? Si no es una entrada del usuario, ¿por qué no calcularla en el back-end en lugar de confiar en JavaScript?

    – Tomás

    15 de abril de 2010 a las 19:36

avatar de usuario
anh pham

$("#frm").submit(function (e) {
    e.preventDefault();
    form = document.getElementById("frm"); //$("#frm")

    $.each(form.elements, function (i, el) {
        el.name = your_new_name;
        el.value = your_new_value;
        //... //el.type, el.id ...
    });

    form.submit();

    return true;
});

  • Y los atributos serán reseteados, volverán a la normalidad después del POST.

    -Franco Ugarte

    28 de julio de 2017 a las 4:34

¿Ha sido útil esta solución?