पेज को बिना रिफ्रेश किए जेक्वेरी का प्रयोग करते हुए सबमिट करना

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

Nettuts+ में पहले, Philo ने दिखाया कि आप किस प्रकार वर्डप्रेस के कमेंट में फॉर्म वैलिडेशन जोड़ने के लिए जेक्वेरी का प्रयोग कर सकते हैं और यह सही से काम करता है बिना किसी पेज को रीलोड किए। दूसरा तरीका जिससे हम यूजर एक्सपीरियंस को बढ़ाने के लिए जेक्वेरी का प्रयोग कर सकते हैं वह है ना सिर्फ वैलिडेट करना, पर आपके पूरे फॉर्म को सबमिट करना वह भी बिना पेज को रिफ्रेश किए।

इस ट्यूटोरियल में मैं आपको दिखाऊंगा की यह करना कितना आसान है -- एक कॉन्टैक्ट फॉर्म को जो की जेक्वेरी की मदद से बिना पेज को रिफ्रेश किये एक ईमेल भेजता है सबमिट करें! (असली ईमेल php स्क्रिप्ट की मदद से भेजा जाता है जो की बैकग्राउंड में प्रोसेस होती है)। तो चलिए शुरू करें।

हम क्या बना रहे हैं

इस उदाहरण में, हमारे पास एक साधारण सा कॉन्टैक्ट फॉर्म है जिसमें नाम, ईमेल, और फोन नंबर शामिल है। सभी फील्ड को PHP स्क्रिप्ट में बिना पेज रिफ्रेश किए सबमिट किया जाता है, यह जेक्वेरी के नेटिव फंक्शन का प्रयोग करके किया जाता है (नेटिव का अर्थ है, आपको इसे काम कराने के लिए किसी अतिरिक्त प्लगइन को डाउनलोड करने की आवश्यकता नहीं है।

यदि आपने इस आर्टिकल को jQuery के साथ बिना किसी पहले की जानकारी के प्राप्त किया है, तो एक बेहतरीन जगह जहां से आप शुरू कर सकते हैं वह होगी Jeffrey Way का आर्टिकल जो है 15 रिसोर्सेज जिनके साथ आप जेक्वेरी को स्क्रैच से शुरू कर सकते हैं।

Step 1 - HTML फॉर्म को बनाना

आइए अपने html मार्कअप पर एक नजर डालें। हम अपने एक बेसिक html फॉर्म के साथ शुरू करते हैं:

  <div id="contact_form">
  <form name="contact" action="">
    <fieldset>
      <label for="name" id="name_label">Name</label>
      <input type="text" name="name" id="name" size="30" value="" class="text-input" />
      <label class="error" for="name" id="name_error">This field is required.</label>
      
      <label for="email" id="email_label">Return Email</label>
      <input type="text" name="email" id="email" size="30" value="" class="text-input" />
      <label class="error" for="email" id="email_error">This field is required.</label>
      
      <label for="phone" id="phone_label">Return Phone</label>
      <input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
      <label class="error" for="phone" id="phone_error">This field is required.</label>
      
      <br />
      <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
    </fieldset>
  </form>
  </div>

आपने ध्यान दिया होगा कि मैंने एक div को शामिल किया है जिसकी id है contact_form जो पूरे फॉर्म के आसपास है।
यह पक्का करें कि आप अपने फॉर्म में यह div डालना ना भूल जाएं क्योंकि हमें इस रैपर div की आवश्यकता आगे चलकर पड़ेगी। आपने
शायद यह भी ध्यान दिया होगा कि मैंने फॉर्म के दोनों एक्शन और मेथड पार्ट्स को खाली छोड़ दिया है। हमें
वास्तव में इनमें से किसी की भी आवश्यकता यहां पर नहीं है, क्योंकि जेक्वेरी इन को बाद में संभाल लेगा।

एक और महत्वपूर्ण चीज को शामिल करना पक्का करें वह है हर एक इनपुट फील्ड की id की वैल्यू। id की वैल्यू
वह है जिनको जेक्वेरी की स्क्रिप्ट फॉर्म को प्रोसेस करने के लिए प्रयोग करेगी।

मैंने कुछ css स्टाइल और एक बैकग्राउंड इमेज फोटोशॉप में जोड़ दी है ताकि हम निम्न फॉर्म बना सके।

Step 2 - जेक्वेरी को जोड़ना शुरू करें

प्रोसेस में अगला कदम होगा की हम कुछ जेक्वेरी के कोड को जोड़ें। मैं यह मानकर चल रहा हूं की आपने जेक्वेरी को डाउनलोड कर लिया है, और अपने सर्वर पर अपलोड कर दिया है, और साथ ही अपने वेब पेज पर इसे रेफरेंस दे रहे हैं।

इसके बाद, एक और नई जावास्क्रिप्ट फाइल को खोलें, इसे अपने html में रेफरेंस दे जिस प्रकार आप किसी नार्मल जावास्क्रिप्ट फाइल को देते हैं
और इस फाइल में निम्न को जोड़ें:

  $(function() {
    $(".button").click(function() {
      // validate and process form here
    });
  });

पहला function() जो करता है वो है, जैसे ही html का डॉक्यूमेंट रेडी हो जाता है, यह इसके अंदर इवेंट को लोड करता है। यदि आपने जेक्वेरी में पहले कभी कोई काम किया है, तो यह फंक्शन वैसे ही काम करता है जैसे document.ready फंक्शन। तो हम इसके साथ शुरू करते हैं, और इसके अंदर हमारे पास हमारा click फंक्शन है जो सबमिट बटन, जिसकी क्लास का नाम “button” है, पर क्लिक किए जाने पर चलता है। अंततः हम इन कोड्स की लाइन के साथ जो करते हैं वह वही है जो हम html में सबमिट बटन पर onclick इवेंट को जोड़कर करते हैं। जक्वेरी के साथ इसे करने का कारण है कि यह हमारी स्क्रिप्ट से प्रेजेंटेशन को सीधे-सीधे अलग करता है।

Step 3 - कुछ फॉर्म वैलिडेशन को लिखें

  $(function() {
    $('.error').hide();
    $(".button").click(function() {
      // validate and process form here
      
      $('.error').hide();
  	  var name = $("input#name").val();
  		if (name == "") {
        $("label#name_error").show();
        $("input#name").focus();
        return false;
      }
  		var email = $("input#email").val();
  		if (email == "") {
        $("label#email_error").show();
        $("input#email").focus();
        return false;
      }
  		var phone = $("input#phone").val();
  		if (phone == "") {
        $("label#phone_error").show();
        $("input#phone").focus();
        return false;
      }
      
    });
  });

हमारे फंक्शन के अंदर जो तब लोड होते हैं जब पेज तैयार हो जाता है, हमने कुछ फॉर्म वैलिडेशन जोड़े। पर पहली चीज जो आप देखते हैं की हमने $(‘.error’).hide(); को जोड़ा। यह क्या करता है कि हमारे तीन लेबल्स को जिनकी क्लास का नाम “error” है उन्हें हाइड कर देता है। हम इन लेबल्स को हाइड करना चाहते हैं ना सिर्फ तब
जब पेज पहली बार लोड होता है, पर तब भी जब आप सबमिट बटन पर क्लिक करते हैं, यह उस स्थिति में होता है जब कोई एक मैसेज यूजर को पहले दिखाया गया। सभी एरर मैसेज सिर्फ तभी दिखने चाहिए यदि वैलिडेशन काम नहीं करता।

हम सबसे पहले यह चेक करके कि क्या यूजर द्वारा नेम फील्ड को खाली छोड़ दिया गया है, वैलिडेट करते हैं, और यदि ऐसा है, तो हम लेबल को name_error id के साथ दिखाते हैं। इसके बाद हम फोकस को नेम इनपुट फील्ड में कर देते हैं, उस स्थिति में जब यूजर
कंफ्यूज है कि वह इसके बाद क्या करें! (मैंने यह सीखा है कि कभी भी फॉर्म के यूजर से कुछ अधिक की उम्मीद रख कर ना चले)।

और अधिक विस्तार से बताने के लिए की हम यह किस प्रकार करते हैं, हम एक वेरिएबल ‘name’ को ‘“name” id वाली इनपुट फील्ड की वैल्यू के तौर पर सेट करते हैं -- यह सभी कुछ जेक्वेरी की एक लाइन के द्वारा:

  var name = $("input#name").val();

हम इसके बाद चेक करते हैं कि क्या वह वैल्यू खाली है, और यदि है, तो हम लेबल जिसकी id “name_error” है को दिखाने के लिए
जेक्वेरी के show() मेथड का प्रयोग करते हैं:

  if (name == "") {
    $("label#name_error").show();
  }

इसके बाद, हम फॉर्म के फोकस को वापस “name” id वाली इनपुट फील्ड में कर देते हैं, और अंत में false रिटर्न करते हैं:

  if (name == "") {
    $("label#name_error").show();
    $("input#name").focus();
    return false;
  }

यह ध्यान रखें कि आपको अपने कोड में false रिटर्न करना है, नहीं तो पूरा की पूरा फॉर्म सबमिट हो जाएगा (जो इस ट्यूटोरियल
के मकसद को खत्म करता है)! रिटर्न false जो करता है वह है कि यह सभी रिक्वायर्ड फील्ड को भरे
बिना यूजर को आगे बढ़ने से रोकता है।

Step 4 - जेक्वेरी के AJAX फंक्शन के साथ हमारे फॉर्म सबमिशन को प्रोसेस करना

अब हम इस ट्यूटोरियल के दिल वाले हिस्से में है -- हमारे फॉर्म को सबमिट करना बिना पेज को रिफ्रेश किए, जो की फॉर्म की वैल्यू को php की स्क्रिप्ट में पीछे ही पीछे भेजता है। आइए सबसे पहले पूरे कोड पर एक नजर डालें, फिर इसके बाद मैं इसे और अधिक डिटेल में तोड़ कर दिखाऊंगा। नीचे दिए गए कोड को पहले शामिल किए गए वैलिडेशन स्निपेट के बिल्कुल नीचे डालें (और उस जगह के पहले जहां बटन क्लिक फंक्शन को क्लोज किया गया है):

  var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
  //alert (dataString);return false;
  $.ajax({
    type: "POST",
    url: "bin/process.php",
    data: dataString,
    success: function() {
      $('#contact_form').html("<div id='message'></div>");
      $('#message').html("<h2>Contact Form Submitted!</h2>")
      .append("<p>We will be in touch soon.</p>")
      .hide()
      .fadeIn(1500, function() {
        $('#message').append("<img id='checkmark' src='images/check.png' />");
      });
    }
  });
  return false;

यहां पर बहुत कुछ हो रहा है! आइए इसे अलग अलग हिस्सों में बांटे - यह बहुत ही सरल है और एक बार यदि आप इसे समझ जाते हैं तो बहुत ही आसान है। हम सबसे पहले वैल्यू की एक स्ट्रिंग को बनाते हैं, जो की सभी फॉर्म वैल्यूज है जिसे हम स्क्रिप्ट के साथ पास करना चाहते हैं जो ईमेल को भेजती है।

पहले वाले को फिर से याद करते हैं, हमने एक वेरिएबल ‘name’ को सेट किया था इनपुट फील्ड की वैल्यू के साथ जिसकी आईडी “name” थी, जैसे:

  var name = $("input#name").val();

हम एक ‘name’ वैल्यू को फिर से सेव कर सकते हैं, साथ ही साथ ‘email’ और ‘phone’ वैल्यू को भी, ताकि हम dataString को बना सके:

  var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;

मैंने एक अलर्ट को कमेंट कर दिया है जिसे मैं कभी कभार यह पक्का करने के लिए प्रयोग करता हूं कि मैं सही वैल्यू को ले रहा हूं, जिसे आप इस प्रोसेस के दौरान मददगार पाएंगे। यदि आप उस अलर्ट के कमेंट को हटाते हैं और अपने फॉर्म को टेस्ट करते हैं, यह मानते हुए कि अभी तक सब कुछ सही से हुआ है, तो आपको नीचे दिए गए अनुसार ही एक मैसेज प्राप्त होगा।

अब हम अपने मुख्य ajax फंक्शन में चलते हैं, आज के शो का स्टार। यही वो जगह है जहां सभी एक्शन होते हैं, तो कृपया इसे
ध्यान से देखिए!

  $.ajax({
    type: "POST",
    url: "bin/process.php",
    data: dataString,
    success: function() {
      //display message back to user here
    }
  });
  return false;

मूल रूप से कोड में जो हो रहा है वह इस प्रकार है: .ajax() फंक्शन हमारी स्ट्रिंग में से जिसका नाम है dataString (data:dataString) वैल्यू को प्रोसेस करता है, वह ये काम php स्क्रिप्ट की मदद से करता है जिसका नाम है process.php (url:”bin/process.php”), जिसमें वह ‘POST’ मेथड का प्रयोग करता है (type:”POST”)। यदि हमारी स्क्रिप्ट सफलतापूर्वक प्रोसेस हो जाती है, तो हम यूजर को वापस एक मैसेज दिखा सकते हैं, और अंततः false रिटर्न कर सकते हैं ताकि पेज फिर से लोड ना हो। बस हो गया! पूरा की पूरा प्रोसेस इन कुछ लाइनों के साथ यहां पर हैंडल हो गया!

ई-मेल को भेजने और एक सक्सेस मैसेज को देने के अलावा, यहां पर और भी काफी सारी एडवांस चीजें हैं जो आप कर सकते हैं। उदाहरण के लिए आप अपनी वैल्यू को डेटाबेस में भेज सकते हैं, उन्हें प्रोसेस कर सकते हैं, उसके बाद यूजर को वापस एक रिजल्ट प्रदर्शित कर सकते हैं। तो यदि आप यूजर को एक पोल पोस्ट करते हैं, आप उनके वोट को प्रोसेस कर सकते हैं, और वोट के रिजल्ट को रिटर्न कर सकते हैं, यह सब करने के लिए पेज को रिफ्रेश करने की आवश्यकता नहीं है।

आइए हमारे उदाहरण में क्या क्या हुआ इसकी एक समरी बनाएं, और यह पक्का कर ले कि हमने सब कुछ कवर कर लिया है। हमने अपनी फॉर्म की वैल्यू को जेक्वेरी की मदद से लिया, और फिर उन्हें स्ट्रिंग में इस प्रकार लगाया:

  var name = $("input#name").val();
  var email = $("input#email").val();
  var phone = $("input#phone").val();
  var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;

इसके बाद हमने जेक्वेरी के ajax फंक्शन को dataString में वैल्यू को प्रोसेस करने के लिए प्रयोग किया। इसके बाद
प्रोसेस सफलतापूर्वक खत्म हुआ, हमने यूजर को वापस एक मैसेज दिखाया और return false को जोड़ा ताकि हमारा पेज रिफ्रेश ना हो।

    $.ajax({
      type: "POST",
      url: "bin/process.php",
      data: dataString,
      success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("<h2>Contact Form Submitted!</h2>")
        .append("<p>We will be in touch soon.</p>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
      }
    });
    return false;

स्क्रिप्ट के सक्सेस पार्ट को कुछ स्पेसिफिक कंटेंट के साथ भरा गया जिन्हें यूजर को वापस दिखाया जा सकता है। पर जहां तक हमारे ajax फंक्शनैलिटी की बात है, तो हमने यहां पर उसे पूरा कर लिया है। और अधिक ऑप्शन और सेटिंग के लिए jQuery के ajax फंक्शन पर आधारित डॉक्यूमेंटेशन को देखना ना भूलें। यहां दिया गया उदाहरण एक बहुत ही आसान इंप्लीमेंटेशन में से एक है, लेकिन फिर भी, यह बहुत शक्तिशाली है जैसा कि आप देख सकते हैं।

Step 5 - यूजर को वापस एक मैसेज दिखाना

आईए उस कोड को विस्तार से देखें जो यूजर को वापस एक मैसेज दिखाता है, ताकि हमारा ट्यूटोरियल पूरा हो सके।

सबसे पहले, हम contact_form div के सभी कंटेंट को (याद रखें मैंने कहा था कि हमें इस div की आवश्यकता होगी) बदल दे।

  $('#contact_form').html("<div id='message'></div>");

इस ने जो किया वह है की contact_form div के अंदर के सारे कंटेंट को बदल दिया, जेक्वेरी के html() फंक्शन का प्रयोग करते हुए। दो फॉर्म के बदले, हमारे पास अब से एक नया div अंदर है, जिसकी आईडी ‘message’ है। इसके बाद, हम इस div एक असली मैसेज के साथ बदलते हैं -- h2 कहता है “Contact Form Submited”:

  $('#message').html("<h2>Contact Form Submitted!</h2>")

हम इसके बाद और भी कंटेंट को मैसेज वाले div में जेक्वेरी के append() फंक्शन की मदद से जोड़ेंगे। और इन सबसे बढ़कर हम एक कूल इफेक्ट मैसेज div को जेक्वेरी के hide() मेथड की मदद से छुपा कर जोड़ेंगे, इसके बाद इन सभी को fadeIn() फंक्शन की मदद से fade in करेंगे:

  .append("<p>We will be in touch soon.</p>")
  .hide()
  .fadeIn(1500, function() {
    $('#message').append("<img id='checkmark' src='images/check.png' />");
  });

तो यूजर को अंततः फॉर्म सबमिट करने के बाद कुछ निम्न प्रकार का रिजल्ट दिखेगा:

अब तक, मेरे ख्याल से आप सहमत हो गए होंगे की फॉर्म को जेक्वेरी के शक्तिशाली ajax फंक्शन का प्रयोग करते हुए और बिना पेज को रिफ्रेश किए सबमिट करना बेहद ही आसान है। सिर्फ जावास्क्रिप्ट की फाइल में वैल्यू को प्राप्त करें, उन्हें ajax फंक्शन के साथ प्रोसेस करें और false रिटर्न करें, और आप आगे बढ़ने के लिए तैयार हैं। आप वैल्यू को php स्क्रिप्ट में प्रोसेस कर सकते हैं बिल्कुल वैसे ही जैसे अन्य php फाइल को करते हैं, सिर्फ एक अंतर होगा की यूजर को पेज के रिफ्रेश होने का इंतजार नहीं करना होगा - यह सभी कुछ बैकग्राउंड में शांति से होगा।

तो यदि आपकी वेबसाइट में एक कांटेक्ट फॉर्म है, एक लॉगइन फॉर्म, या कुछ और अधिक एडवांस फॉर्म्स जो वैल्यू को डाटा बेस के साथ प्रोसेस करता है और रिजल्ट को वापस प्राप्त करता है, आप यह सब कुछ आसानी से और प्रभावी रूप से कर सकते हैं, और शायद सबसे महत्वपूर्ण, आप एंड यूजर के एक्सपीरियंस को अपनी वेबसाइट में काफी बढ़ा सकते हैं, इंटरएक्टिविटी को उपलब्ध कराकर ताकि उन्हें अब पेज को वापस लोड होने का इंतजार नहीं करना पड़े।

निष्कर्ष

दिए गए डेमो के बारे में मैं कुछ अंतिम शब्द यहां जोड़ना चाहूंगा। डेमो में, आपने ध्यान दिया होगा कि एक प्लगइन का प्रयोग किया जा रहा है - runonload.js फाइल। मैंने इस ट्यूटोरियल की शुरुआत में कहा था की हम किसी भी प्लगइन का प्रयोग नहीं करेंगे, और उसके बाद आपने इस डेमो में पाया कि एक अतिरिक्त runonload कृत मौजूद है, तो इसके बारे में कुछ एक्सप्लेनेशन जरूरी है! हर एक के लिए जो लाइव चलता हुआ डेमो देखना चाहते हैं, आप मेरी वेबसाइट के SEO कंसलटिंग फॉर्म को देख सकते हैं।

असल में वह प्रयोग जो मैंने runonload के साथ किया है उसका फॉर्म की प्रोसेसिंग के साथ कुछ लेना देना नहीं है। तो तो आप ajax फंक्शन को बिना किसी अतिरिक्त प्लगइन के पूरा कर सकते हैं। मैंने runonload का प्रयोग से नाम इनपुट फील्ड पर पेज लोड होने के बाद फोकस करने के लिए किया है। यह मेरा अनुभव रहा है कि runonload को कॉल करना कभी कभी जेक्वेरी के नेटिव डॉक्यूमेंट रेडी फंक्शन से बेहतर है, और इस ट्यूटोरियल को पूरा करने के दौरान मैंने यह पाया। कुछ कारणों से focus() फंक्शन जेक्वेरी के नेटिव डॉक्युमेंट रेडी फंक्शन के द्वारा पेज लोड पर कार्य नहीं करेगा -- पर यह runonload के साथ कार्य करता है, इसीलिए आपने इसे इस उदाहरण में देखा। तो यदि आप इस काम को करने के लिए बिना runonload का प्रयोग किए कोई तरीका जानते हैं तो उसके बारे में मुझे आपसे सुनकर बहुत अच्छा लगेगा।