jquery invia modulo e quindi mostra risultati in un div esistente

Question

Ho un semplice modulo di input di testo che quando inviato, ha bisogno di recuperare un file php (passando gli input al file) e quindi prendere il risultato (solo una riga di testo) e posizionarlo in un div e sfumare quello div in vista.

Ecco quello che ho adesso:

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

<div id=created></div> 

Che cosa ho bisogno è il risultato di create.php?url=INPUT, da caricare in modo dinamico nel div chiamato created.

Ho lo script del modulo jquery, ma non sono riuscito a farlo funzionare correttamente. Ma ho caricato la libreria (il file).

Answer 1

Questo codice dovrebbe farlo. Non è necessario il plugin Modulo di qualcosa di semplice come questo:

$('#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

È necessario utilizzare AJAX per inviare il modulo se non si desidera aggiornare la pagina.

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

Answer 3

Questo funziona anche per il caricamento di file

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

     } 
    });   

});