111

¿Hay alguna forma de usar javascript y JQuery para agregar algunos campos adicionales que se enviarán desde un formulario HTTP usando POST?

Quiero decir:

<form action="somewhere" method="POST" id="form">
  <input type="submit" name="submit" value="Send" />
</form>

<script type="text/javascript">
  $("#form").submit( function(eventObj) {
    // I want to add a field "field" with value "value" here
    // to the POST data

    return true;
  });
</script>

— Espectro
fuente

2

posible duplicado de jQuery: agregue parámetros adicionales al enviar (NO ajax)

— Marijn

161

Sí, puedes probar con algunos parámetros ocultos.

  $("#form").submit( function(eventObj) {
      $("<input />").attr("type", "hidden")
          .attr("name", "something")
          .attr("value", "something")
          .appendTo("#form");
      return true;
  });

— Suresh Atta
fuente

30

.appendTo(this)probablemente sería mejor.

— jcuenod

4

@jcuenod original appendTo('#form')es mucho mejor, porque tal enfoque permite enviar otro formulario con valores de este.

— Andremoniy

7

Tendrá que agregar algo de lógica adicional para evitar acumular estas entradas con cada envío.

— amos

Probablemente desee eliminar el elemento de entrada antes de agregarlo en caso de que ya exista$(this).find("input[name="+"something"+"]").remove();

— K Vij

42

Prueba esto:

$('#form').submit(function(eventObj) {
    $(this).append('<input type="hidden" name="field_name" value="value" /> ');
    return true;
});

— Khawer Zeshan
fuente

Necesito agregar un campo de archivo dinámicamente. Intenté tener type = file, y el valor también como el archivo (estoy usando WebKitDirectory, así que en realidad obtengo los objetos del archivo), sin embargo, parece que nunca lo pasa. Sin embargo, el texto de entrada siempre se pasa. ¡Por favor, ayúdame!

— Swaathi Kakarla

Mi respuesta preferida debido al uso en thislugar del redundante#form

— rinogo

15

$('#form').append('<input type="text" value="'+yourValue+'" />');

— de_nuit
fuente

10

Puede agregar un hidden inputcon cualquier valor que necesite enviar:

$('#form').submit(function(eventObj) {
    $(this).append('<input type="hidden" name="someName" value="someValue">');
    return true;
});

— Mohammad Adil
fuente

5

Esto funciona:

var form = $(this).closest('form');

form = form.serializeArray();

form = form.concat([
    {name: "customer_id", value: window.username},
    {name: "post_action", value: "Update Information"}
]);

$.post('/change-user-details', form, function(d) {
    if (d.error) {
        alert("There was a problem updating your user details")
    } 
});

— Jeff Lowery
fuente

Sí, pero no hay redirección a la página de resultados.

— omikron

3

esto debería funcionar: $('body').append(form); $(form).submit();

— Jeff Lowery

Esto fue lo más útil para mí, porque tengo una gran cantidad de campos generados y no quiero crear campos ocultos para cada uno.

— Sprachprofi

¿Por qué no @Sprachprofi?

— Displee

3

Puede ser útil para algunos:

(una función que le permite agregar los datos al formulario usando un objeto, con anulación de las entradas existentes, si las hay) [pure js]

(el formulario es un dom el, y no un objeto jquery [ jqryobj.get (0) si lo necesita ])

function addDataToForm(form, data) {
    if(typeof form === 'string') {
        if(form[0] === '#') form = form.slice(1);
        form = document.getElementById(form);
    }

    var keys = Object.keys(data);
    var name;
    var value;
    var input;

    for (var i = 0; i < keys.length; i++) {
        name = keys[i];
        // removing the inputs with the name if already exists [overide]
        // console.log(form);
        Array.prototype.forEach.call(form.elements, function (inpt) {
             if(inpt.name === name) {
                 inpt.parentNode.removeChild(inpt);
             }
        });

        value = data[name];
        input = document.createElement('input');
        input.setAttribute('name', name);
        input.setAttribute('value', value);
        input.setAttribute('type', 'hidden');

        form.appendChild(input);
    }

    return form;
}

Utilizar :

addDataToForm(form, {
    'uri': window.location.href,
     'kpi_val': 150,
     //...
});

también puedes usarlo así

var form = addDataToForm('myFormId', {
    'uri': window.location.href,
     'kpi_val': 150,
     //...
});

también puede agregar # si lo desea ("#myformid").

— Mohamed Allal
fuente

¿Cómo agregar campos adicionales al formulario antes de enviarlo?

Utilizar :