web-dev-qa-db-fra.com

Créer et soumettre dynamiquement un formulaire

Est-il possible dans jQuery de créer et de soumettre un formulaire à la volée?.

Quelque chose comme ci-dessous.

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

Est-ce supposé fonctionner ou existe-t-il une autre façon de procéder?

javascriptjqueryformssubmit
74
Santosh Gokak

Il y avait deux problèmes avec votre code. La première est que vous avez inclus la $(document).ready(); mais que vous n'avez pas enveloppé l'objet jQuery qui crée l'élément avec.

La seconde était la méthode que vous utilisiez. jQuery créera n'importe quel élément lorsque le sélecteur (ou l'endroit où vous placeriez habituellement le sélecteur) est remplacé par l'élément que vous souhaitez créer. Ensuite, il vous suffit de l'ajouter au corps et de le soumettre.

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

Voici le code en action. Dans cet exemple, la soumission n'est pas automatique, il suffit de prouver qu'elle ajouterait l'élément de formulaire.

Voici le code avec soumission automatique. Cela fonctionne bien. Jsfiddle vous amène à une page 404 parce que "form2.html" n'existe pas sur son serveur, évidemment.

96
Purag

Oui c'est possible. Une des solutions est ci-dessous ( jsfiddle comme preuve ).

HTML:

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

(voir ci-dessus il n'y a pas de formulaire)

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

L'exemple ci-dessus vous montre comment créer un formulaire, comment ajouter des entrées et comment soumettre. Parfois, l'affichage du résultat est interdit par X-Frame-Options, donc j’ai mis target sur _top, qui remplace le contenu de la fenêtre principale. Alternativement, si vous définissez _blank, il peut apparaître dans une nouvelle fenêtre/un nouvel onglet.

92
Tadeck

Sa version My sans jQuery, une fonction simple peut être utilisée à la volée

Une fonction:

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

Usage:

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

Comme Purmou, mais supprimer le formulaire lors de la soumission sera effectué.

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

Oui, vous avez juste oublié les citations ...

$('<form/>').attr('action','form2.html').submit();
8
Nicolas Thery

Josepmra exemple fonctionne bien pour ce dont j'ai besoin. Mais je devais ajouter la ligne

 form.appendTo( document.body )

pour que cela fonctionne.

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();
6
webs

Essayez avec ce code C'est une solution totalement dynamique

    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();
2
josepmra

Pourquoi ne pas vous $.post ou $.get directement?

GET requêtes:

$.get(url, data, callback);

POST requêtes:

$.post(url, data, callback);

Dans ce cas, vous n'avez pas besoin d'un formulaire, envoyez simplement les données dans votre objet de données.

$.post("form2.html", {myField: "some value"}, function(){
  alert("done!");
});
1
SparK