jquery przesłać formularz, a następnie pokazać wyniki w istniejącym div

Question

Mam prosty jeden formularz wprowadzania tekstu, który po przesłaniu, musi pobrać plik php (przekazywanie danych wejściowych do pliku), a następnie podjąć wynik (tylko wiersz tekst) i umieść go w widoku div i zaniknij ten widok do widoku div.

Oto co mam teraz:

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

<div id=created></div> 

Co potrzebne jest rezultaty create.php?url=INPUT, aby być dynamicznie ładowane do div zwanego created.

Mam skrypt formularza jquery, ale nie udało mi się go uruchomić poprawnie. Ale mam załadowaną bibliotekę (plik).

Answer 1

Ten kod powinien to zrobić. Nie potrzebujesz wtyczki formularz dla czegoś tak prostego jak to:

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

Musisz użyć AJAX, aby opublikować formularz, jeśli nie chcesz, aby strona była odświeżana.

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

Answer 3

ta działa również na przesyłanie plików

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

     } 
    });   

});