111

Gibt es eine Möglichkeit, mit Javascript und JQuery einige zusätzliche Felder hinzuzufügen, die mithilfe von POST von einem HTTP-Formular gesendet werden sollen?

Ich meine:

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

jquery html forms post field Spuk
quelle

2

mögliches Duplikat von jQuery - zusätzliche Parameter

Marijn

161

Ja. Sie können es mit einigen versteckten Parametern versuchen.

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

Suresh Atta
quelle

30

.appendTo(this)wäre wahrscheinlich besser.

Jcuenod

4

@jcuenod original appendTo('#form')ist viel besser, da ein solcher Ansatz das Senden eines anderen Formulars mit Werten aus diesem ermöglicht.

Andremoniy

7

Sie müssen eine zusätzliche Logik hinzufügen, um zu vermeiden, dass diese Eingaben bei jeder Übermittlung akkumuliert werden.

Amos

Sie sollten das Eingabeelement wahrscheinlich entfernen, bevor Sie es hinzufügen, falls es bereits vorhanden ist$(this).find("input[name="+"something"+"]").remove();

K Vij

42

Versuche dies:

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

Khawer Zeshan
quelle

Ich muss ein Dateifeld dynamisch hinzufügen. Ich habe versucht, type = file und den Wert auch als Datei zu verwenden (ich verwende WebKitDirectory, damit ich die Dateiobjekte tatsächlich erhalte), aber es scheint nie zu bestehen. Der Eingabetext wird jedoch immer übergeben. Bitte hilf mir!

Swaathi Kakarla

Meine bevorzugte Antwort wegen Verwendung thisanstelle der redundanten#form

rinogo

15

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

de_nuit
quelle

10

Sie können ein hidden inputmit dem Wert hinzufügen , den Sie senden möchten:

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

Mohammad Adil
quelle

5

Das funktioniert:

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
quelle

Ja, aber es gibt keine Weiterleitung zur Ergebnisseite.

Omikron

3

Dies sollte funktionieren: $('body').append(form); $(form).submit();

Jeff Lowery

Dies war für mich am hilfreichsten, da ich eine große Anzahl generierter Felder habe und nicht für jedes Feld versteckte Felder erstellen möchte.

Sprachprofi

Warum nicht @Sprachprofi?

Displee vor

3

Kann für einige nützlich sein:

(Eine Funktion, mit der Sie die Daten mithilfe eines Objekts zum Formular hinzufügen können, wobei vorhandene Eingaben überschrieben werden, falls vorhanden.) [pure js]

(form ist ein dom el und kein jquery-objekt [ jqryobj.get (0) falls erforderlich ])

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

Verwenden :

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

Sie können es auch so verwenden

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

Sie können # hinzufügen, wenn Sie möchten ("#myformid").

Mohamed Allal
quelle

Wie füge ich zusätzliche Felder hinzu, bevor ich sie abschicke?

Antworten:

Verwenden :