jquery फॉर्म सबमिट करें और फिर मौजूदा div

Question

में परिणाम दिखाएं मेरे पास एक साधारण टेक्स्ट टेक्स्ट फॉर्म है जो सबमिट किए जाने पर, एक php फ़ाइल लाने (फ़ाइल में इनपुट पास करने) की आवश्यकता होती है और फिर परिणाम लेना (केवल एक पंक्ति टेक्स्ट) और इसे div में रखें और div को उस दृश्य में फीका करें।

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

<div id=created></div> 

क्या मैं जरूरत create.php?url=INPUT के परिणाम है, गतिशील divcreated कहा जाता है में लोड करने के लिए:

यहाँ मैं अब है।

मेरे पास jquery फॉर्म स्क्रिप्ट है, लेकिन मैं इसे सही काम करने में सक्षम नहीं हूं। लेकिन मेरे पास लाइब्रेरी लोड है (फाइल)।

Answer 1

यह कोड इसे करना चाहिए। आप इस के रूप में सरल कुछ के लिए फार्म प्लगइन की जरूरत नहीं है:

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

यदि आप पृष्ठ को रीफ्रेश नहीं करना चाहते हैं तो आपको फॉर्म पोस्ट करने के लिए AJAX का उपयोग करना होगा।

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

Answer 3

इस फाइल अपलोड

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

     } 
    });   

});