web-dev-qa-db-fra.com

jquery soumettre le formulaire, puis afficher les résultats dans un div existant

J'ai un simple formulaire de saisie de texte qui, une fois soumis, doit récupérer un fichier php (en passant les entrées au fichier), puis prendre le résultat (juste une ligne de texte) et le placer dans un div et fade que div en vue.

Voici ce que j'ai maintenant:

<form id=create method=POST action=create.php>
<input type=text name=url>
<input type="submit" value="Create" /> 

<div id=created></div>

J'ai besoin des résultats de create.php?url=INPUT, à charger dynamiquement dans le div appelé created.

J'ai le script de formulaire jquery, mais je n'ai pas réussi à le faire fonctionner correctement. Mais j'ai la bibliothèque chargée (le fichier).

javascriptjqueryhtmlajax
44
mrpatg

Ce code devrait le faire. Vous n'avez pas besoin du plugin Form pour quelque chose d'aussi simple que cela:

$('#create').submit(function() { // catch the form's submit event
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response) { // on success..
            $('#created').html(response); // update the DIV
        }
    });
    return false; // cancel original event to prevent form submitting
});
77
Paolo Bergantino

Cela fonctionne également pour le téléchargement de fichiers

$(document).on("submit", "form", function(event)
{
    event.preventDefault();

    var url=$(this).attr("action");
    $.ajax({
        url: url,
        type: 'POST',
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {
            $('#created').html(data); //content loads here

        },
        error: function (xhr, desc, err)
        {
            console.log("error");

        }
    });        

});
6
Shaiful Islam

Vous devez utiliser AJAX pour publier le formulaire si vous ne voulez pas que la page soit actualisée.

$('#create').submit(function () {
    $.post('create.php', $('#create').serialize(), function (data, textStatus) {
         $('#created').append(data);
    });
    return false;
});
2
RaYell