جاوا اسکرپٹ میں ان پٹ ٹیکسٹ ویلیو کیسے حاصل کریں اور سیٹ کریں۔

زیادہ تر ویب صفحات پر، درست ڈیٹا درج کرنے اور ڈیٹا کی حفاظت کو یقینی بنانے کے لیے صارفین سے ان پٹ ٹیکسٹ ویلیو حاصل کرنے کی ضرورت ہوتی ہے۔ مثال کے طور پر، آپ کو مزید پروسیسنگ کے لیے استعمال کرنے کے لیے کچھ مخصوص ڈیٹا حاصل کرنے، سیٹ کرنے یا اسٹور کرنے کی ضرورت ہے۔ ایسے معاملات میں، جاوا اسکرپٹ میں ان پٹ ٹیکسٹ ویلیو حاصل کرنا اور سیٹ کرنا ڈیٹا کی رازداری کے تحفظ کے لیے بہت مددگار ثابت ہوتا ہے۔

یہ تحریر جاوا اسکرپٹ میں ان پٹ ٹیکسٹ ویلیو کو حاصل کرنے اور سیٹ کرنے کے طریقوں کو ظاہر کرے گی۔

جاوا اسکرپٹ میں ان پٹ ٹیکسٹ ویلیو کیسے حاصل کریں اور سیٹ کریں؟

جاوا اسکرپٹ میں ان پٹ ٹیکسٹ ویلیو حاصل کرنے اور سیٹ کرنے کے لیے، استعمال کریں:

' getElementById() 'طریقہ
' getElementByClassName() 'طریقہ
' سوال سلیکٹر() 'طریقہ

ذکر کردہ طریقوں میں سے ہر ایک کو ایک ایک کرکے دیکھیں!

طریقہ 1: document.getElementById() طریقہ استعمال کرکے جاوا اسکرپٹ میں ان پٹ ٹیکسٹ ویلیو حاصل کریں اور سیٹ کریں

' getElementById() ' طریقہ مخصوص آئی ڈی کے ساتھ ایک عنصر تک رسائی حاصل کرتا ہے۔ ٹیکسٹ ویلیو حاصل کرنے اور سیٹ کرنے کے لیے ان پٹ فیلڈز اور بٹنوں کی آئی ڈی تک رسائی کے لیے یہ طریقہ لاگو کیا جا سکتا ہے۔

نحو

دستاویز getElementById ( عناصر )

یہاں، ' عناصر ' سے مراد کسی عنصر کی مخصوص آئی ڈی ہے۔

ذیل کی مثال زیر بحث تصور کی وضاحت کرتی ہے۔

مثال
سب سے پہلے، ' کلک پر ' واقعات جو مخصوص افعال تک رسائی حاصل کریں گے:

< ان پٹ کی قسم = 'متن' آئی ڈی = 'getText' نام = 'getText' کلک پر = 'this.value = ''' />
< بٹن پر کلک کریں۔ = 'getText()' > قدر حاصل کریں۔ بٹن >
< بٹن پر کلک کریں۔ = 'getAndSetText()' > ویلیو سیٹ کریں۔ بٹن >
< ان پٹ کی قسم = 'متن' آئی ڈی = 'سیٹ ٹیکسٹ' نام = 'سیٹ ٹیکسٹ' کلک پر = 'this.value = ''' />

پھر، document.getElementById() طریقہ کی مدد سے ان پٹ فیلڈ کی قدر حاصل کریں۔

دستاویز getElementById ( 'getText' ) . قدر = 'یہاں داخل کریں' ;

اب، ایک فنکشن کا اعلان کریں جس کا نام ہے ' getAndSetText() ' یہاں، ان پٹ فیلڈ کو ' کے ساتھ حاصل کریں getText 'آئی ڈی اور ان پٹ ویلیو کو اگلے ان پٹ فیلڈ میں پاس کریں جس میں' سیٹ ٹیکسٹ آئی ڈی:

فنکشن getAndSetText ( ) {
تھا سیٹ ٹیکسٹ = دستاویز getElementById ( 'getText' ) . قدر ;
دستاویز getElementById ( 'سیٹ ٹیکسٹ' ) . قدر = سیٹ ٹیکسٹ ;
}

اسی طرح، 'نامی ایک فنکشن کی وضاحت کریں getText() ' اس کے بعد، 'کے ساتھ ان پٹ فیلڈ حاصل کریں getText ان پٹ ٹیکسٹ ویلیو حاصل کرنے کے لیے id اور مخصوص ویلیو کو الرٹ باکس میں منتقل کریں:

فنکشن getText ( ) {
تھا getText = دستاویز getElementById ( 'getText' ) . قدر ;
الرٹ ( getText ) ;
}

آؤٹ پٹ

طریقہ 2: document.getElementByClassName() طریقہ استعمال کرتے ہوئے جاوا اسکرپٹ میں ان پٹ ٹیکسٹ ویلیو حاصل کریں اور سیٹ کریں

' getElementByClassName() ' طریقہ مخصوص کلاس کے نام کی مدد سے ایک عنصر تک رسائی حاصل کرتا ہے۔ یہ طریقہ، اسی طرح، ان پٹ فیلڈ کی کلاس تک رسائی کے لیے لاگو کیا جا سکتا ہے اور ٹیکسٹ ویلیو درج کرنے اور سیٹ کرنے کے لیے بٹن۔

نحو

دستاویز getElementsByClassName ( کلاس کا نام )

مندرجہ بالا نحو میں، ' کلاس کا نام ' عناصر کے کلاس نام کی نمائندگی کرتا ہے۔

مثال
پچھلی مثال کی طرح، ہم پہلے ان پٹ فیلڈ تک رسائی حاصل کریں گے ' getText 'کلاس کا نام. پھر، ایک فنکشن کی وضاحت کریں جس کا نام ' getAndSetText() اور اس کے کلاس نام کی بنیاد پر مخصوص ان پٹ فیلڈ حاصل کریں اور اگلے ان پٹ فیلڈ میں ویلیو سیٹ کریں:

دستاویز getElementByClassName ( 'getText' ) . قدر = 'یہاں داخل کریں' ;
فنکشن getAndSetText ( )
{
تھا سیٹ ٹیکسٹ = دستاویز getElementByClassName ( 'getText' ) . قدر ;
دستاویز getElementById ( 'سیٹ ٹیکسٹ' ) . قدر = سیٹ ٹیکسٹ ;
}

اسی طرح، 'نامی ایک فنکشن کی وضاحت کریں getText() ”، پہلی ان پٹ فیلڈ کے کلاس کا نام شامل کریں اور حاصل کردہ قدر کو ظاہر کرنے کے لیے مخصوص قدر کو الرٹ باکس میں منتقل کریں:

فنکشن getText ( ) {
تھا getText = دستاویز getElementByClassName ( 'getText' ) . قدر ;
الرٹ ( getText ) ;
}

اس نفاذ سے درج ذیل پیداوار حاصل ہوگی:

طریقہ 3: 'document.querySelector()' طریقہ استعمال کرتے ہوئے جاوا اسکرپٹ میں ان پٹ ٹیکسٹ ویلیو حاصل کریں اور سیٹ کریں

' document.querySelector() ” پہلا ای لاتا ہے۔ نیچے چلا گیا جو مخصوص سلیکٹر سے میل کھاتا ہے، اور addEventListener() طریقہ منتخب عنصر میں ایونٹ ہینڈلر کو شامل کرسکتا ہے۔ یہ طریقے ان پٹ فیلڈ اور بٹنوں کی شناخت حاصل کرنے اور ان پر ایونٹ ہینڈلر لگانے کے لیے لاگو کیے جا سکتے ہیں۔

نحو

دستاویز سوال سلیکٹر ( سی ایس ایس سلیکٹرز )

یہاں، ' سی ایس ایس سلیکٹرز ایک یا زیادہ CSS سلیکٹرز سے رجوع کریں۔

مندرجہ ذیل مثال کو دیکھیں۔

مثال
سب سے پہلے، ان پٹ ٹیکسٹ ویلیوز حاصل کرنے اور سیٹ کرنے کے لیے ان کی پلیس ہولڈر ویلیوز اور بٹنوں کے ساتھ ان پٹ کی قسمیں شامل کریں:

< ان پٹ کی قسم = 'متن' آئی ڈی = 'ان پٹ حاصل کریں' پلیس ہولڈر = 'قدر حاصل کریں' >
< بٹن آئی ڈی = 'حاصل' > حاصل کریں۔ بٹن >
< ان پٹ کی قسم = 'متن' آئی ڈی = 'ان پٹ سیٹ' پلیس ہولڈر = 'قدر مقرر کریں' >
< بٹن آئی ڈی = 'سیٹ' > سیٹ بٹن >

اگلا، 'کا استعمال کرتے ہوئے شامل کردہ ان پٹ فیلڈز اور بٹن حاصل کریں document.querySelector() طریقہ:

بٹن حاصل کرنے دیں۔ = دستاویز سوال سلیکٹر ( '#حاصل کریں' ) ;
بٹن سیٹ کرنے دیں۔ = دستاویز سوال سلیکٹر ( '# سیٹ' ) ;
ان پٹ حاصل کرنے دیں۔ = دستاویز سوال سلیکٹر ( '#input-get' ) ;
ان پٹ کو سیٹ کرنے دیں۔ = دستاویز سوال سلیکٹر ( '#input-set' ) ;
نتیجہ دو = دستاویز سوال سلیکٹر ( '#نتیجہ' ) ;

پھر، ایک ایونٹ ہینڈلر شامل کریں جس کا نام ' کلک کریں دونوں بٹنوں کے لیے بالترتیب اقدار حاصل کرنے اور سیٹ کرنے کے لیے:

بٹن حاصل کریں۔ EventListener شامل کریں۔ ( 'کلک' ، ( ) => {
نتیجہ اندرونی متن = ان پٹ حاصل کریں۔ قدر ;
} ) ;
بٹن سیٹ EventListener شامل کریں۔ ( 'کلک' ، ( ) => {
ان پٹ حاصل کریں۔ قدر = سیٹ ان پٹ قدر ;
} ) ;

آؤٹ پٹ

ہم نے جاوا اسکرپٹ میں ان پٹ ٹیکسٹ ویلیو حاصل کرنے اور سیٹ کرنے کے آسان ترین طریقوں پر تبادلہ خیال کیا ہے۔

نتیجہ

جاوا اسکرپٹ میں ان پٹ ٹیکسٹ ویلیو حاصل کرنے اور سیٹ کرنے کے لیے، ' document.getElementById() 'طریقہ یا

' document.getElementByClassName() مخصوص ان پٹ فیلڈ اور بٹنوں تک رسائی حاصل کرنے کا طریقہ ان کے آئی ڈی یا کلاس کے نام کی بنیاد پر اور پھر ان کی قدریں سیٹ کریں۔ مزید یہ کہ ' document.querySelector() جاوا اسکرپٹ میں ان پٹ ٹیکسٹ ویلیو حاصل کرنے اور سیٹ کرنے کے لیے بھی استعمال کیا جا سکتا ہے۔ اس بلاگ نے جاوا اسکرپٹ میں ان پٹ ٹیکسٹ ویلیو حاصل کرنے اور سیٹ کرنے کے طریقے بتائے ہیں۔

جاوا اسکرپٹ میں ان پٹ ٹیکسٹ ویلیو کیسے حاصل کریں اور سیٹ کریں۔