jquery soumettre le formulaire et ensuite afficher les résultats dans un div

J'ai une simple saisie de texte la forme que lors de la soumission, doit extraire un fichier php (en passant devant les entrées du 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>

Ce dont j'ai besoin, ce sont les résultats de create.php?url=INPUT, pour être chargé dynamiquement dans le div appelé created.

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

InformationsquelleAutor mrpatg | 2009-08-02
  1. 77

    Ce code devrait le faire. Vous n'avez pas besoin de la Forme de plugin 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
});
    • Et depuis il veut : créer.le php?url=INPUT - il doit définir la méthode "GET"
    • Je pense que c'était juste lui décrivant les données qui doivent être envoyées. Le formulaire méthode du dit POST, donc je suis en supposant qu'il veut.
    • Dieu les aime!!! Exactement ce que je cherchais. Pour une question aussi simple que les utilisateurs voient sur n'importe quel nombre de sites chaque jour, il y a très peu de documentation et des exemples sur le web au sujet.
    • J'aime la façon dont vous avez inclus la façon d'utiliser le formulaire de la méthode, de l'action et de l'url. La plupart des gens ont juste donné un exemple par coder en dur ces valeurs...
    • Ce que vous venez de sauvegarder mes fesses. Aussi, si vous avez un texte au-DESSUS de la forme que vous avez besoin de remplacer, il suffit de coller le texte dans la partie supérieure de la forme, juste à l'INTÉRIEUR de la <form> tag. Elle devrait rendre le même, sauf si il y a un peu bizarre css chose le contrôle de texte à l'intérieur de la forme.
    InformationsquelleAutor Paolo Bergantino
  2. 6

    Cela fonctionne aussi pour le fichier de téléchargement

    $(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");

        }
    });        

});
    InformationsquelleAutor Shaiful Islam
  3. 2

    Vous devez utiliser de l'AJAX pour la forme, 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;
});
    • La capture de soumettre un événement click du bouton n'est pas le bon événement à attraper pour la soumission d'un formulaire. vous voulez attraper l'événement de soumission du formulaire.
    • Vous avez raison, bien sûr. Mis à jour mon code.
    • J'ai essayé ceci, mais il me prend pour le create.php la page quand je clique sur soumettre.
    • le return false; devrait prévenir que je crois.
    InformationsquelleAutor RaYell