Formular dynamisch erstellen und senden

80

Gibt es in jQuery eine Möglichkeit, ein Formular im laufenden Betrieb zu erstellen und zu senden?

So etwas wie unten.

<html>
    <head>
    <title> Title Text Goes Here </title>
    <script src="http://code.jquery.com/jquery-1.7.js"></script>
    <script>
        $(document).ready(function(){alert('hi')});
        $('<form/>').attr('action','form2.html').submit();
    </script>
    </head>
    <body>

        Content Area

    </body>
    </html>

Soll das funktionieren oder gibt es einen anderen Weg, dies zu tun?

javascript jquery forms submit Santosh Gokak
quelle
Hast du die API gelesen ?
Geoffreak
Schauen Sie sich auch die akzeptierte Antwort hier an: stackoverflow.com/questions/14836557/…
thdoan

Antworten:

107

Es gab zwei Probleme mit Ihrem Code. Das erste ist, dass Sie $(document).ready();das jQuery-Objekt, das das Element erstellt , eingeschlossen haben , es aber nicht umbrochen haben.

Die zweite war die Methode, die Sie verwendeten. jQuery erstellt jedes Element, wenn der Selektor (oder wo Sie normalerweise den Selektor platzieren würden) durch das Element ersetzt wird, das Sie erstellen möchten. Dann hängen Sie es einfach an den Körper an und reichen es ein.

$(document).ready(function(){
    $('<form action="form2.html"></form>').appendTo('body').submit();
});

Hier ist der Code in Aktion. In diesem Beispiel wird nicht automatisch gesendet, nur um zu beweisen, dass das Formularelement hinzugefügt wird.

Hier ist der Code mit automatischer Übermittlung. Es klappt gut. Jsfiddle führt Sie zu einer 404-Seite, da "form2.html" offensichtlich nicht auf dem Server vorhanden ist.

Purag
quelle
Die erste Ausgabe, die Sie erwähnt haben, ist jedoch keine Ausgabe :)
Santosh Gokak
2
@ user42540: Nicht unbedingt, aber es ist besser, Ihren JS-Code auszulösen, wenn die Seite vollständig geladen wurde. Dies verhindert unerwünschte Fehler.
Purag
3
Es funktioniert möglicherweise in einigen Browsern, aber es gibt einen guten Grund, den meisten DOM-Manipulationscode in einen $(document).ready()Block aufzunehmen - es stellt sicher, dass der Browser sicher Änderungen am DOM vornehmen kann. Andernfalls spucken wählerische Browser wie IE6 / 7 den Dummy aus, wenn Sie versuchen, etwas zu ändern, bevor die gesamte Seite geladen wurde.
GregL
99

Ja, es ist möglich. Eine der Lösungen ist unten ( jsfiddle als Beweis ).

HTML:

<a id="fire" href="#" title="submit form">Submit form</a>

(siehe oben gibt es keine Form)

JavaScript:

jQuery('#fire').click(function(event){
    event.preventDefault();
    var newForm = jQuery('<form>', {
        'action': 'http://www.google.com/search',
        'target': '_top'
    }).append(jQuery('<input>', {
        'name': 'q',
        'value': 'stack overflow',
        'type': 'hidden'
    }));
    newForm.submit();
});

Das obige Beispiel zeigt Ihnen, wie Sie ein Formular erstellen, Eingaben hinzufügen und senden. Manchmal Anzeige des Ergebnisses ist verboten , durch X-Frame-Options, so habe ich festgelegt targetauf _top, die das Hauptfenster der Inhalt ersetzt. Wenn Sie dies festlegen _blank, kann es alternativ in einem neuen Fenster / einer neuen Registerkarte angezeigt werden.

Tadeck
quelle
Gute Lösung (wenn auch etwas lang), aber die Eingabe wurde nicht angezeigt.
Purag
@Purmou: Die eigentliche Lösung ist die Formularerstellung und dann der submit()Aufruf. Ich habe absichtlich Code zum Erstellen langer Formulare bereitgestellt, um zu zeigen, wie das Formular und seine Elemente erstellt werden. Ich glaube das ist ganz ok.
Tadeck
22
.appendTo ('body') wird benötigt, damit es in meinem Firefox (23.0.1) funktioniert. Andernfalls wird nur ein Formularobjekt zurückgegeben, aber nicht gesendet.
Curtis Yallop
5
newForm.hide (). appendTo ("body"). submit (); // zeigt die Felder nicht an und funktioniert in FF
laffuste
4
Dies ist ein GET und ähnelt dem Anheften einer Abfragezeichenfolge an den Ziel-URI. Würde annehmen, dass viele Leute ein Formular zum POST verwenden möchten. Falls es nicht offensichtlich ist, verwenden Sie, um dies 'method': postzu erreichen.
Ficuscr
33

Seine My-Version ohne jQuery, einfache Funktion kann im laufenden Betrieb verwendet werden

Funktion:

function post_to_url(path, params, method) {
    method = method || "post";

    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
         }
    }

    document.body.appendChild(form);
    form.submit();
}

Verwendung:

post_to_url('fullurlpath', {
    field1:'value1',
    field2:'value2'
}, 'post');
Muthukumar Anbalagan
quelle
13

Wie Purmou, aber das Entfernen des Formulars beim Absenden erfolgt.

$(function() {
   $('<form action="form2.html"></form>').appendTo('body').submit().remove();
});
Javray
quelle
8

Ja, du hast gerade die Zitate vergessen ...

$('<form/>').attr('action','form2.html').submit();
Nicolas Thery
quelle
Was ist der Javascript-Fehler? Versuchen Sie, es in die Bereitschaftsfunktion zu versetzen
Nicolas Thery
Dies funktioniert im alten IE nicht, da es nicht im HTML-DOM angehängt wird. Es muss angehängt werden, <body>bevor es funktioniert.
Raptor
8

Josepmra Beispiel funktioniert gut für das, was ich brauche. Aber ich musste die Zeile hinzufügen 

 form.appendTo( document.body )

damit es funktioniert. 

var form = $(document.createElement('form'));
$(form).attr("action", "reserves.php");
$(form).attr("method", "POST");

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


$(form).append($(input));

form.appendTo( document.body )

$(form).submit();
Bahnen
quelle
4

Versuchen Sie es mit diesem Code -
Es ist eine völlig dynamische Lösung:

    var form = $(document.createElement('form'));
    $(form).attr("action", "reserves.php");
    $(form).attr("method", "POST");

    var input = $("<input>").attr("type", "hidden").attr("name", "mydata").val("bla");
    $(form).append($(input));
    $(form).submit();
josepmra
quelle
2

Warum nicht du $.postoder $.getdirekt?

GET Anfragen:

$.get(url, data, callback);

POST Anfragen:

$.post(url, data, callback);

Dann brauchen Sie kein Formular, senden Sie einfach die Daten in Ihrem Datenobjekt.

$.post("form2.html", {myField: "some value"}, function(){
  alert("done!");
});
Funke
quelle
1
Da muss der Download vom Server ausgelöst werden und mit post / get funktioniert es nicht.
a20
Auch damit verlassen Sie die Seite nicht.
Robsch
@ a20 Was fehlt, ist ein serverseitiger Header Content-Disposition: Attachment;, um den Download zu erzwingen.
SparK
@SparK hmmmm .. Ihr Kommentar lässt mich fragen, ob es auf der Serverseite keinen MIME-Typ gibt, den Browser interpretieren (oder nicht interpretieren und erzwingen) können. Zum Beispiel eine Zip-Datei. Ist es in keiner Weise möglich anzugeben, dass es als Antwort auf die Download-Anfrage eines Benutzers ist, also Trigger-Download ...
a20
@ a20 Ja , Content-Type: application/octet-stream;. Es gibt auch das downloadAttribut in Ankern ... clientseitige Sache ( davidwalsh.name/download-attribute )
SparK
0

Angenommen, Sie möchten ein Formular mit einigen Parametern erstellen und einen POST-Aufruf durchführen 

var param1 = 10;

$('<form action="./your_target.html" method="POST">' +
'<input type="hidden" name="param" value="' + param + '" />' +
'</form>').appendTo('body').submit();

Sie können alles auch in einer Zeile erledigen, wenn Sie dies wünschen :-)

Anthony
quelle