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

Question

J'ai un simple formulaire de saisie de texte qui, lorsqu'il est soumis, doit aller chercher un fichier php (en passant les entrées dans le fichier), puis prendre le résultat (juste une ligne de texte) et placez-le dans un div pour afficher le div.

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 que je dois est le résultat de create.php?url=INPUT, à dynamiquement chargé dans le div appelé created. J'ai le script jquery, mais je n'ai pas réussi à le faire fonctionner correctement. Mais j'ai la bibliothèque chargée (le fichier).

Answer 1

Ce code devrait le faire. Vous n'avez pas besoin du plug-in 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 
}); 

Answer 2

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

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

Answer 3

Cela fonctionne également pour le fichier télécharger

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

     } 
    });   

});