जावास्क्रिप्ट में फॉर्म सबमिशन

आप पहले से ही जावास्क्रिप्ट में फॉर्म एलिमेंट्स के साथ काम करना जानते हैं, ब्राउज़र में उन्हें प्रोसेस करते हुए। हालाँकि, फॉर्म को सर्वर पर भी भेजा जा सकता है, ताकि उन्हें साइट के सर्वर साइड द्वारा प्रोसेस किया जा सके, जो PHP या NodeJS में लिखा गया हो।

सर्वर पर संग्रहीत साइट डेटा को जोड़ने और बदलने के लिए इसकी आवश्यकता होती है।

आइए देखें कि यह कैसे किया जाता है। मान लीजिए हमारे पास कुछ इनपुट और एक बटन है:

html<input>
<input>
<input type="submit">

आइए हमारे एलिमेंट्स को form टैग में लपेटें। इस स्थिति में, हमारे पास एक फॉर्म बनेगा, जो बटन दबाने पर सर्वर पर भेज दिया जाएगा:

html<form>
  <input>
  <input>
  <input type="submit">
</form>

ताकि सर्वर पर फॉर्म डेटा प्राप्त किया जा सके, प्रत्येक इनपुट को एक अलग नाम देना आवश्यक है:

html<form>
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

इस स्थिति में सर्वर पर फॉर्म डेटा कुंजी-मान जोड़े के रूप में आएगा, जहां कुंजियाँ फॉर्म एलिमेंट्स के नाम होंगे, और मान - दर्ज किए गए डेटा होंगे।

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

हालाँकि, सर्वर की अनुपस्थिति में, फॉर्म डेटा कहीं नहीं जाएगा। इसलिए आइए फॉर्म के काम की जाँच सर्वर के साथ मिलकर करें। अभी आप किसी सर्वर-साइड भाषा को नहीं जानते हैं, इसलिए आइए हमारे शैक्षिक HTTP सर्वर की सहायता से फॉर्म भेजने का अभ्यास करें।

आइए हमारे फॉर्म को किसी फ़ाइल में इस प्रकार रखें कि वह http://localhost:3001/form.html पते पर उपलब्ध हो:

public/form.html<form>
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

आइए हमारे फॉर्म में action एट्रिब्यूट जोड़ें, जो हमारे फॉर्म के सबमिशन का पता निर्दिष्ट करता है:

public/form.html<form action="/handler/">
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

अब server.js फ़ाइल में फॉर्म सबमिशन एड्रेस के लिए हैंडलर लिखते हैं:

server.jsexport default {
  '/handler/': function() {
    return 'form data received';
  }
}

हमारे हैंडलर के पैरामीटर में भेजा गया फॉर्म डेटा आ जाएगा:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data); // सर्वर कंसोल में प्रिंट होगा
    return 'form data received';
  }
}