Jak dodać dodatkowe pola do formularza przed przesłaniem?


111

Czy istnieje sposób na użycie javascript i JQuery w celu dodania dodatkowych pól do wysłania z formularza HTTP za pomocą POST?

Mam na myśli:

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

Odpowiedzi:


161

Tak, możesz spróbować z kilkoma ukrytymi parametrami.

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

30
.appendTo(this)prawdopodobnie byłoby lepiej.
jcuenod

4
Oryginał @jcuenod appendTo('#form')jest znacznie lepszy, ponieważ takie podejście pozwala przesłać inny formularz z wartościami z tego.
Andremoniy

7
Będziesz musiał dodać dodatkową logikę, aby uniknąć gromadzenia tych danych wejściowych przy każdym przesłaniu.
amos

Prawdopodobnie będziesz chciał usunąć element wejściowy, zanim go dodasz, na wypadek, gdyby już istniał$(this).find("input[name="+"something"+"]").remove();
K Vij

42

Spróbuj tego:

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

Muszę dynamicznie dodać pole pliku. Próbowałem mieć type = file, a wartość również jako plik (używam WebKitDirectory, więc faktycznie otrzymuję obiekty pliku), jednak nigdy nie wydaje się, aby go przekazywał. Jednak tekst wejściowy jest zawsze przekazywany. Proszę pomóż mi!
Swaathi Kakarla

Moja preferowana odpowiedź ze względu na używanie thiszamiast zbędnych#form
rinogo

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

10

Możesz dodać hidden inputdowolną wartość, którą chcesz wysłać:

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

5

To działa:

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")
    } 
});

Tak, ale nie ma przekierowania do strony wyników.
omikron

3
to powinno działać: $('body').append(form); $(form).submit();
Jeff Lowery

Było to dla mnie najbardziej pomocne, ponieważ mam dużą liczbę wygenerowanych pól i nie chcę tworzyć ukrytych pól dla każdego.
Sprachprofi

Dlaczego nie @Sprachprofi?
Displee

3

Może być przydatny dla niektórych:

(funkcja, która pozwala na dodawanie danych do formularza za pomocą obiektu, z nadpisaniem dla istniejących danych wejściowych, jeśli istnieje) [pure js]

(formularz to dom el, a nie obiekt jquery [ jqryobj.get (0), jeśli potrzebujesz ])

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

Posługiwać się :

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

możesz tego również używać w ten sposób

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

możesz też dodać #, jeśli chcesz ("#myformid").

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.