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>
Zjawa
źródło

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;
  });
Suresh Atta
źródło
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;
});
Khawer Zeshan
źródło
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+'" />');
de_nuit
źródło
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;
});
Mohammad Adil
źródło
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")
    } 
});
Jeff Lowery
źródło
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").

Mohamed Allal
źródło