jQuery - zusätzliche Parameter beim Senden hinzufügen (NICHT Ajax)

206

Verwenden Sie "Senden" von jQuery - gibt es eine Möglichkeit, zusätzliche Parameter an ein Formular zu übergeben? Ich möchte dies NICHT mit Ajax tun - dies ist eine normale, für Aktualisierungen typische Formularübermittlung.

$('#submit').click(function () {
    $('#event').submit(function () {
        data: { 
        form['attendees'] = $('#attendance').sortable('toArray').toString();
    });
});

jquery parameter-passing form-submit

— Ciel
quelle

Welche serverseitige Technologie verwenden Sie?

— Enrique

Siehe meine Antwort [hier] [1], die vor dem Absenden an ein serialisiertes Formular angehängt wird. [1]: stackoverflow.com/questions/17809056/…

— Jeff Lowery

Schauen Sie sich auf stackoverflow.com/questions/603924/...

— LCJ

371

Dieser hat es für mich getan:

var input = $("<input>")
               .attr("type", "hidden")
               .attr("name", "mydata").val("bla");
$('#form1').append(input);

basiert auf der Antwort des Daff, hat aber das NAME-Attribut hinzugefügt, damit es in der Formularsammlung angezeigt wird, und VALUE in VAL geändert. Außerdem wurde die ID des FORMULARS überprüft (in meinem Fall form1).

hat den Firefox-Firebug verwendet, um zu überprüfen, ob das Element eingefügt wurde.

Versteckte Elemente werden wieder in die Formularsammlung aufgenommen, nur schreibgeschützte Felder werden verworfen.

Michel

— Michel
quelle

46

Wie singe ich binär 'du bist mein Sonnenschein'? Ich danke dir sehr. Dies löst so viele Dinge.

— Ciel

38

Sie können die Lesbarkeit leicht verbessern: var input = $ ("<Eingabe>", {Typ: "versteckt", Name: "mydata", Wert: "bla"}); $ ('# form1'). append ($ (Eingabe));

— Konstantine Kalbazov

2

$ ("<Eingabe>") .attr ("Typ", "versteckt"). attr ("Name", "meine Daten"). val ("bla"). appendTo ('# form1'); ist ein anderer Weg

— Kiew

6

Ich mochte eine Kombination aus: $ ("<Eingabe>", {Typ: "versteckt", Name: "mydata", Wert: "bla"}). AppendTo ("# form1");

— gabeio

Gibt es keine Begrenzung für die Datengröße? Ich habe ein großes Objekt mit JSON.stringify (obj) und dieser Methode gesendet und es schien abgeschnitten zu sein.

— Omikron

26

In Ihrem Fall sollte es ausreichen, Ihrem Formular einfach ein weiteres verstecktes Feld dynamisch hinzuzufügen.

var input = $("<input>").attr("type", "hidden").val("Bla");
$('#form').append($(input));

— Daff
quelle

Die Daten, die ich einreichen muss, sind nicht formularfähig. Es muss serverseitig erfasst und gehandhabt werden.

— Ciel

Was meinst du mit "nicht formfähig"?

— Vincent Ramdhanie

Entschuldigung - das hat überhaupt nicht funktioniert. Selbst mit nur erzwungenen Daten werden diese nicht in das Formular eingefügt.

— Ciel

Es kann nicht in ein Formularfeld eingefügt werden.

— Ciel

2

Wenn es sich um eine Zeichenfolge handelt, kann sie in ein Formularfeld eingefügt werden

— PetersenDidIt

19

Sie können diesen sogar verwenden. hat gut für mich funktioniert

$("#registerform").attr("action", "register.php?btnsubmit=Save") 
$('#registerform').submit();

Dadurch wird btnsubmit = Save as GET value an das Formular register.php gesendet.

— Parag
quelle

Dies scheint eine elegantere Lösung zu sein. Denken Sie daran, encodeURIComponent()den Parameterwert je nach Datentyp zu verwenden.

— Andres SK

1

Dieser ist tatsächlich besser, wenn der Benutzer das Formular mehrmals senden darf. Das Formular erhält nicht mehr als ein verstecktes Feld mit unterschiedlichen Werten.

— Mellon

11

Sie können eine jQuery-Funktion schreiben, mit der Sie einem Formular versteckte Felder hinzufügen können:

// This must be applied to a form (or an object inside a form).
jQuery.fn.addHidden = function (name, value) {
    return this.each(function () {
        var input = $("<input>").attr("type", "hidden").attr("name", name).val(value);
        $(this).append($(input));
    });
};

Fügen Sie dann das ausgeblendete Feld hinzu, bevor Sie es senden:

var frm = $("#form").addHidden('SaveAndReturn', 'Save and Return')
                    .submit();

— Jonathan
quelle

1

Siehe stackoverflow.com/questions/2601223/… für eine erweiterte Version von addHidden

— Jonathan

1

Ich mag die Einfachheit dieser Lösung. Es behandelt nicht viele Fälle, aber es behandelt den Fall, den es tut, gut.

— Phil

11

Sie müssen das Submit-Ereignis nicht durch Klicken auf die Submit-Schaltfläche binden, sondern nur das Submit-Ereignis binden. Das Submit-Ereignis wird unabhängig davon erfasst, wie es ausgelöst wird.

Überlegen Sie, was Sie wollen, ist, die Sortierbarkeit wie über Ajax einzureichen. Versuchen Sie so etwas zu tun:

var form = $('#event').submit(function () {
    $.each($('#attendance').sortable('toArray'),function(i, value){
        $("<input>").attr({
            'type':'hidden',
            'name':'attendace['+i+']'
        }).val(value).appendTo(form);
    });
});

— PetersenDidIt
quelle

wird auf der serverseitigen Formularsammlung immer noch nicht angezeigt ... muss ich etwas Besonderes tun, damit ein verstecktes Feld auf einem Server angezeigt wird? Es wird C # / ASP.NET MVC mit einem FormCollection-Objekt durchlaufen.

— Ciel

Ich habe meine Antwort aktualisiert und denke, ich verstehe, was Sie versuchen zu tun.

— PetersenDidIt

Fügen Sie nameder generierten Eingabe für versteckte Formulare ein Attribut hinzu ? Wie pro stackoverflow.com/questions/504681/... sieht es aus wie Formcollection Objekte alle , die benötigen <input>Elemente Namen haben.

— npdoty

Ja, ich versuche, eine sortierbare Datei als Zeichenfolge durch Kommas getrennte Werte in die Formularsammlung zu verschieben. Ich habe Ihr Update ausprobiert und es wird immer noch nicht veröffentlicht. Ich bin mir nicht sicher, was ich falsch mache ... Ich schätze die Hilfe.

— Ciel

Klingt so, als ob das Problem nicht auf der Clientseite, sondern auf der Serverseite liegt.

— PetersenDidIt

2

Ähnliche Antwort, aber ich wollte sie nur für einen einfachen / schnellen Test zur Verfügung stellen.

var input = $("<input>")
               .attr("name", "mydata").val("go Rafa!");

$('#easy_test').append(input);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>



<form id="easy_test">
  
</form>

Erweitern Sie das Snippet

— Cacho Santa
quelle