फॉर्म पुनर्निर्देशित करें या जमा पर ताज़ा करें?

Question

मैंने पृष्ठों का एक समूह खोजा है, लेकिन मेरी समस्या का पता नहीं लगा सकता, इसलिए मुझे एक पोस्ट करना पड़ा।

मेरे पास एक फॉर्म है जिसमें एक सबमिट बटन है, और सबमिट किए जाने पर मैं चाहता हूं कि यह ताज़ा या पुनर्निर्देशित न हो। मैं सिर्फ एक कार्य करने के लिए jQuery चाहता हूं।

ये रहा फॉर्म:

<form id="contactForm">
    <fieldset>
        <label for="Name">Name</label>
        <input id="contactName" type="text" />
    </fieldset>

    <fieldset>
        <label for="Email">Email</label>
        <input id="contactEmail" type="text" />
    </fieldset>

    <fieldset class="noHeight">
        <textarea id="contactMessage" cols="20"></textarea>
        <input id="contactSend" class="submit" type="submit" onclick="sendContactForm()" />
    </fieldset>
</form>        
<small id="messageSent">Your message has been sent.</small>

और यहाँ jQuery है:

function sendContactForm(){
    $("#messageSent").slideDown("slow");
    setTimeout('$("#messageSent").slideUp();$("#contactForm").slideUp("slow")', 2000);
}

मैंने फार्म पर एक एक्शन एलिमेंट के साथ और उसके बिना कोशिश की है, लेकिन मुझे नहीं पता कि मैं क्या गलत कर रहा हूं। जिस चीज ने मुझे अधिक परेशान किया है वह यह है कि मेरे पास एक उदाहरण है जो इसे पूरी तरह से करता है: उदाहरण पृष्ठ

यदि आप मेरी समस्या को लाइव देखना चाहते हैं, तो goto stormink.net (मेरी साइट) और उस साइडबार को देखें जहाँ वह कहता है "मुझे भेजें और ईमेल करें" और "आरएसएस सदस्यता"। दोनों ऐसे रूप हैं जो मैं इस पर काम करने के लिए कोशिश कर रहा हूं।

Answer 1

सबमिट सबमिट पर फ़ॉर्म सबमिट करें , और गलत लौटें:

$('#contactForm').submit(function () {
 sendContactForm();
 return false;
});

सबमिट बटन पर आपको किसी भी अधिक ऑनक्लिक ईवेंट की आवश्यकता नहीं है:

<input class="submit" type="submit" value="Send" />

Comments

एक जादू की तरह काम किया! और कुछ भी उपवास करो! मैं इस साइट से प्यार करता हूँ! बहुत बहुत धन्यवाद।

— इयान स्टॉर्म टेलर

मुझे वह क्षण याद है जो मैंने सीखा है कि एक जमा से असत्य में वापस आ सकता है जमा नहीं करने के लिए भी वह क्षण था जिसे मैंने वास्तव में जावास्क्रिप्ट / डोम प्रणाली की तरह शुरू किया था।

— इमेजिस्ट

गजब का। मुझे विनिर्देशन डॉक्स कहां मिलेंगे जो यह बताते हैं कि falseप्रस्तुत करने से रोकता है?

— डेविड

तुम सच में e.preventDefault () का उपयोग करना चाहिए बजाय झूठे वापस ..

— जुआन

@RogerFilmyer गलत है। यदि आप "झूठे लौटें" का उपयोग करते हैं आप प्रचार भी रोक रहे हैं, जो UX मुद्दों का कारण बनेगा। उदाहरण के लिए, यदि आप बुलबुले या ऐसा कुछ करने के लिए "क्लिक" की उम्मीद कर रहे हैं।

— जुआन

Answer 2

यहाँ:

function submitClick(e)
{
     e.preventDefault();
     $("#messageSent").slideDown("slow");
     setTimeout('$("#messageSent").slideUp();
     $("#contactForm").slideUp("slow")', 2000);
}

$(document).ready(function() {
    $('#contactSend').click(submitClick);
});

ऑनक्लिक ईवेंट का उपयोग करने के बजाय, आप सबमिट बटन (या जो भी बटन) पर jQuery का उपयोग करके एक 'क्लिक' ईवेंट हैंडलर का उपयोग करेंगे, जो कॉलबैक के रूप में सबमिटक्लिक को ले जाएगा। हम फोन करने के लिए कॉलबैक करने के लिए घटना पारित preventDefault है, जो है क्या पर्चे को जमा करने से क्लिक कर पाएगा।

Comments

$ ( '# contactSend') पर क्लिक करें (submitClick (ई))। यह मुझसे कहता है कि 'ई' को परिभाषित नहीं किया गया है: .. /

— डेविड दा सिल्वा कंटिन

होना चाहिए $('#contactSend').click(function(e) { submitClick(e) });या$('#contactSend').click(submitClick);

— हारून

Answer 3

अपने फॉर्म के शुरुआती टैग में, एक्शन विशेषता सेट करें जैसे:

<form id="contactForm" action="#">

Comments

सरल समाधान के लिए +1। लेकिन दुर्भाग्य से पेज अब भी पहली बार रीफ्रेश होगा जब उपयोगकर्ता हिट दर्ज करेगा। आसपास एक बुरा काम myForm.submit();जितनी जल्दी हो सके कॉल करना होगा , लेकिन फिर आप पृष्ठ को दो बार लोड कर रहे हैं।

— सायक्लिंग भाषाविद

यह पहली बार ताज़ा नहीं होगा।

— नियरो

इस उत्तर को नीचे दिए जाने की आवश्यकता है, क्योंकि यह मूल प्रश्न को हल नहीं करता है, और पृष्ठ फिर से लोड होने के बाद url को बदलकर स्थिति को बदतर बनाता है। आपको e.preventDefault()या तो return falseऑनस्बमिट फ़ंक्शन में या तो आवश्यकता है । stackoverflow.com/questions/19454310/…

— Jeff

Answer 4

ऐसा लगता है कि आप एक को याद कर रहे हैं return false।

Answer 5

यदि आप डिफ़ॉल्ट ब्राउज़र त्रुटियों को प्रदर्शित होते हुए देखना चाहते हैं , उदाहरण के लिए, उन HTML विशेषताओं द्वारा ट्रिगर किया गया (किसी भी क्लाइंट-कोड JSF से पहले दिखा):

<input name="o" required="required" aria-required="true" type="text">

आपको submitईवेंट के बजाय ईवेंट का उपयोग करना चाहिए click। इस स्थिति में एक पॉपअप स्वचालित रूप से " कृपया इस फ़ील्ड को भरें " का अनुरोध करते हुए प्रदर्शित किया जाएगा । इसके साथ भी preventDefault:

$('form').on('submit', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will show up a "Please fill out this field" pop-up before my_form_treatment

जैसा कि किसी ने पहले उल्लेख किया है , return falseप्रचार बंद कर देगा (यानी यदि फॉर्म जमा करने वाले अधिक हैंडलर हैं, तो उन्हें निष्पादित नहीं किया जाएगा), लेकिन इस मामले में, ब्राउज़र द्वारा ट्रिगर की गई कार्रवाई हमेशा पहले निष्पादित होगी। यहां तक return falseकि अंत में भी।

इसलिए यदि आप इन डिफ़ॉल्ट पॉप-अप से छुटकारा पाना चाहते हैं , clickतो सबमिट बटन पर ईवेंट का उपयोग करें:

$('form input[type=submit]').on('click', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will NOT show any popups related to HTML attributes

Answer 6

एक वैकल्पिक समाधान यह होगा कि फॉर्म टैग और हैंडल क्लिक इवेंट का उपयोग jquery के माध्यम से सबमिट बटन पर न करें। इस तरह से कोई पृष्ठ ताज़ा नहीं होगा, लेकिन साथ ही एक नकारात्मक पहलू यह भी है कि अभ्यस्त कार्य को प्रस्तुत करने के लिए "एंटर" बटन और साथ ही मोबाइल पर आपको एक बटन (कुछ मोबाइलों में एक शैली) मिल जाएगा। तो फॉर्म टैग का उपयोग करने के लिए छड़ी और स्वीकृत उत्तर का उपयोग करें।