लोड हो रहा है...

JavaScript फ़ॉर्म

चाय की काउंटर पर एक पर्ची है। फ़ॉर्म #slip है। उसमें टेक्स्ट फ़ील्ड #guest है जिसका name भी guest है, नंबर फ़ील्ड #cups है जिसका name भी cups है, और बटन #send है जिसका type="submit" है। नीचे #note अभी blank कहता है।
फ़ॉर्म नाम वाले फ़ील्ड इकट्ठा करता है। जो लिखा गया वह value में है, और type number होने पर भी यह हमेशा टेक्स्ट रहता है। भेजना फ़ॉर्म पर submit घटना है। preventDefault न हो तो ब्राउज़र फ़ॉर्म का पता खोलता है और यह पेज चला जाता है। यह पर्ची preventDefault बुलाती है, इसलिए नोट पढ़ा जा सकता है। पेज guest को lida करता है, cups को 2, send पर एक बार क्लिक करता है, और पंक्ति lida / 2 / stayed हो जाती है।

यह टिकट पट्टी नहीं है

टिकट पट्टी ने पैरेंट पर एक क्लिक श्रोता रखा और event.target पढ़ा। उसकी पंक्ति red / blue / gold / 1 थी, बिना preventDefault के। पट्टिका वाले पेज ने उसे एक लिंक पर बुलाया। उसकी पंक्ति click / seal / plaque / true / quiet थी। यह पर्ची उन दोनों में से कोई नहीं। gold बटन नहीं, currentTarget भी नहीं। घटना का नाम submit है। मायने रखते हैं lida और टेक्स्ट 2।
getElementById("guest") फ़ील्ड को id से ढूँढता है। slip.elements.guest उसे name से, फ़ॉर्म के ज़रिए ढूँढता है। यहाँ id और name एक ही शब्द हैं। अगला पाठ खाली फ़ील्ड जाँचेगा। यह पृष्ठ नहीं। खाली अतिथि भी चला जाता है।

पर्ची क्या लिखती है

नोट blank से शुरू होता है। अतिथि और कप खाली हैं। बटन का लेख send रहता है। पंक्तियाँ क्रम से पढ़ें। हर टुकड़ा खाली पर्ची से शुरू होता है, पेज वाली पंक्ति छोड़कर। वह नीचे का डेमो है। डेमो send पर एक बार क्लिक करता है।

📊 पर्ची क्या लिखती है

पल आप क्या पढ़ते हैं नोट आसानी से उलझना
अतिथि lida guest.value lida id guest पढ़ना
कप 2 cups.value 2, और यह टेक्स्ट है संख्या 2 की उम्मीद
send क्लिक, फ़ंक्शन stayed लिखता है नोट stayed slip.submit(), जो श्रोता को छोड़ देता है
दोनों नाम, फ़ॉर्म से elements.guest और elements.cups lida 2 elements.slip पढ़ना
पेज स्क्रिप्ट पंक्ति lida / 2 / stayed red / blue / gold / 1

value नंबर फ़ील्ड को संख्या नहीं बनाता। 2 रखने के बाद cups.value अक्षर 2 हैं। typeof cups.value "string" है। संख्या बाद में चाहिए तो आप खुद बदलें। यह पंक्ति वह नहीं करती।
send.click() submit जगाता है क्योंकि बटन का type submit है। slip.submit() दूसरी पुकार है। वह फ़ॉर्म भेजता है और आपका submit श्रोता नहीं चलाता। अंदर का preventDefault बारी ही नहीं पाता। यह पेज क्लिक का इस्तेमाल करता है।

एक ही फ़ील्ड तक दो रास्ते

getElementById("cups") id लेता है। slip.elements.cups name लेता है, और तभी जब फ़ॉर्म पहले से हाथ में हो। यहाँ दोनों गुण एक शब्द हैं। name अगर count होता और id cups रहता, तो elements.cups न मिलता और फ़ील्ड elements.count होता।

अतिथि का नाम

फ़ील्ड खाली शुरू होता है। स्क्रिप्ट lida को value में रखती है और वही गुण नोट में वापस पढ़ती है। अभी कुछ भेजा नहीं गया।

Read the guest

javascript 
let guest = document.getElementById("guest");
let note = document.getElementById("note");
guest.value = "lida";
note.textContent = guest.value;
console.log(note.textContent);

लॉग lida है। id guest है। नोट guest शब्द नहीं है। वह टेक्स्ट है जो value में बैठा है।

कितने कप

नई पर्ची। कप का फ़ील्ड type="number" है। 2 रखें, value पढ़ें, फिर typeof पूछें।

Read the cups as text

javascript 
let cups = document.getElementById("cups");
let note = document.getElementById("note");
cups.value = "2";
note.textContent = cups.value + " " + typeof cups.value;
console.log(note.textContent);

लॉग 2 string है। डिब्बा संख्या जैसा दिखता है, स्क्रिप्ट को टेक्स्ट मिलता है। 2 को बिना उद्धरण रखें तो भी गुण "2" टेक्स्ट बनकर लौटता है।

भेजने का बटन

फिर नई पर्ची। श्रोता फ़ॉर्म पर है, submit के लिए। वह preventDefault बुलाता है और stayed लिखता है। फिर पेज send पर क्लिक करता है। slip.submit() नहीं बुलाता।

Stay on the page

javascript 
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function pour(event) {
event.preventDefault();
note.textContent = "stayed";
}
slip.addEventListener("submit", pour);
document.getElementById("send").click();
console.log(note.textContent);

लॉग stayed है। श्रोता चला, इसलिए ब्राउज़र यह पेज नहीं छोड़ता। क्लिक की जगह slip.submit() बुलाएँ तो pour नहीं चलता। नोट blank रहता है।

पर्ची पर नाम

नई पर्ची, इस बार श्रोता नहीं। स्क्रिप्ट दोनों फ़ील्ड slip.elements से name के ज़रिए लिखती है, फिर नोट में जोड़ती है।

Read both names

javascript 
let slip = document.getElementById("slip");
let note = document.getElementById("note");
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
note.textContent = slip.elements.guest.value + " " + slip.elements.cups.value;
console.log(note.textContent);

लॉग lida 2 है। elements.guest वह इनपुट है जिसका name guest है, कोई ऐसा तत्व नहीं जिसका id slip हो। स्पेस सिर्फ़ नोट को अलग करता है। पेज की पंक्ति बाद में / इस्तेमाल करती है।

पर्ची के नीचे की पंक्ति

स्क्रिप्ट body के अंत में है, फ़ॉर्म और अनुच्छेदों के बाद। mark पहले left है। श्रोता सामान्य भेजना रोकता है, दोनों मान नोट में नकल करता है, और mark को stayed करता है। फिर lida और 2 भरता है और send पर एक बार क्लिक करता है। पंक्ति उसी क्लिक के बाद लिखी जाती है।

Page demo — tea slip

html 
<!DOCTYPE html>
<html>
<head>
<title>forms — page</title>
</head>
<body>
<form id="slip">
<input id="guest" name="guest" type="text">
<input id="cups" name="cups" type="number">
<button id="send" type="submit">send</button>
</form>
<p id="note">blank</p>
<p id="line">…</p>
<script>
let slip = document.getElementById("slip");
let note = document.getElementById("note");
let mark = "left";
function pour(event) {
event.preventDefault();
note.textContent =
slip.elements.guest.value + " / " + slip.elements.cups.value;
mark = "stayed";
}
slip.addEventListener("submit", pour);
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
document.getElementById("send").click();
document.getElementById("line").textContent =
note.textContent + " / " + mark;
</script>
</body>
</html>

पंक्ति lida / 2 / stayed है। पहला शब्द अतिथि है, दूसरा कप टेक्स्ट के रूप में, आखिरी mark। श्रोता चला, इसलिए stayed है, left नहीं। नोट lida / 2 पर खत्म होता है। blank चला गया। टिकट वाली पंक्ति दूसरे पेज की है। यह पर्ची यह नहीं जाँचती कि फ़ील्ड भरे हैं।

काउंटर पर

  1. अतिथि में lida रखें और value पढ़ें। नोट lida है।
  2. कप में 2 रखें और value को typeof के साथ पढ़ें। नोट 2 string है।
  3. submit सुनें, preventDefault बुलाएँ, और send क्लिक करें। नोट stayed है।
  4. दोनों फ़ील्ड slip.elements से पढ़ें। फिर पेज की पंक्ति: lida / 2 / stayed।

काउंटर पर चूक

लेबल guest, cups और send ही रहते हैं। नोट slip शब्द नहीं है।

  • cups.value को संख्या 2 समझना
  • slip.submit() बुलाना और pour का इंतज़ार करना
  • preventDefault भूलना, जिससे ब्राउज़र पता खोल देता है
  • value चाहिए था और id guest पढ़ लिया
  • slip.elements.slip ढूँढना
  • इस पेज पर खाली फ़ील्ड या पैटर्न जाँचना
  • पंक्ति को red / blue / gold / 1 पढ़ना

यह साथ रखें

  • lida रखने के बाद guest.value lida है
  • cups.value टेक्स्ट 2 है और typeof "string" है
  • send.click() submit श्रोता चलाता है; slip.submit() नहीं
  • पेज के यहीं रहने और नोट के stayed कह पाने की वजह preventDefault है
  • slip.elements.guest और slip.elements.cups नाम वाले फ़ील्ड पढ़ते हैं
  • पेज की पंक्ति lida / 2 / stayed है

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓
7
प्रश्न
🎯
70%
पास करने के लिए
♾️
∞
समय
🔄
∞
प्रयास

📝 निर्देश

  • हर प्रश्न को ध्यान से पढ़ें
  • हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
  • आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
  • आपकी प्रगति शीर्ष पर दिखाई जाएगी
विषय 53 का 55
Javascript ट्यूटोरियल