آموزش سریع جاوا اسکریپت - دریافت ورودی از فرم

          حمیدرضا 
            بازدید : 2088
          چهارشنبه 04 مرداد 1396
           نظرات (0)
        

در مطلب قبلی آموزش دادم که چطور می تونید در جاوا اسکریپت از کاربر مقدار ورودی دریافت کنید. کاری که ما در مطلب قبلی انجام دادیم یه کار خیلی ساده بود و خیلی حرفه ای نبود. توی این مطلب می خوایم حرفه ای تر کار کنیم. یعنی قراره جاوا اسکریپت رو با html قاطی کنیم.

اگر فهمیدن این مطلب برای شما سخت است در پایان این در بخش مطالب مرتبط روی مطالب قبلی از این سری آموزشات کلیک کنید.

در کل بیشترین استفاده از جاوا اسکریپت در html و در صفحات وب است. برای همین باید کم کم با اشیای موجود در html آشنا شوید تا بتوانید از حداکثر قدرت جاوا اسکریپت استفاده کنید.

در این بخش قرار است از یک فرم html ورودی دریافت کنیم. در مثال ها انواع رویداد ها (event) را نیز بررسی می کنیم.

ما برای مثال های خود دو فایل ایجاد می کنیم:

index.html
script.js

فایل index.html:

<<<code>>>

<html>

<head>

</head>

<body>

</body>

</html>

<<</code>>>

خب ما یک فرم نیاز داریم:

<<<code>>>

enter text: <input type="text" name="someText" id="inputText" />

</form>

<<</code>>>

نتیجه تا اینجا

توجه: در فرم هایی که به سمت سرور ارسال می شوند ما از attribute(صفت)های action و method نیز برای فرم استفاده می کنیم. اما در اینجا ما قرار است با استفاده از جاوا اسکریپت کار هایی با فرم انجام دهیم و تمام کار در سمت کاربر انجام می شود.

توجه: ما method و action را مشخص نکردیم اما این دو attribute مقادیر پیش فرضی دارند. به صورت پیش فرض method برابر get و action برابر صفحه ی کنونی قرار می گیرد.

قسمت قرمز رنگ یک رویداد برای تگ form است. اگر فرم به هر شکلی (کلیک روی submit ، اینتر کردن یا ...) submit شود ، این رویداد اتفاق می افتد. از آن جایی که ما نمی خواهیم فرم به آدرس action ارسال شود return false را نوشتیم. این کار از ارسال فرم جلوگیری می کند.

برای انجام کار هایی که مدنظرمان است ، ما می توانیم کد های جاوا اسکریپت را قبل از return false قرار دهیم و یا با استفاده از متد زیر برای رویداد submit فرم تابعی مشخص کنیم:

<<<code>>>

addEventListener( eventName, yourFunction );

<<</code>>>

باید از این تابع در جایی استفاده کنیم که مطمئن باشیم تگ form به طور کامل لود شده است. یعنی یا بعد از تمام شدن فرم یا در رویداد onload صفحه (که بعد از لود کامل صفحه اجرا می شود).

من ترجیح می دهم از رویداد onload صفحه استفاده کنم. در فایل scripts.js:

<<<code>>>

window.addEventListener( "load" , function(){

// هر چیزی در اینجا بعد از لود کامل صفحه اجرا می شود

document.getElementById( "myForm" ).addEventListener( "submit", function(){

// هر چیزی در اینجا بعد از سابمیت فرم اجرا می شود

} );

<<</code>>>

متوجه شدید که قسمت قرمز رنگ در اصل دومین آرگومان از تابع addEventListener است؟ ما می توانستیم به جای آن نام یک تابع را نیز وارد کنیم و در جای دیگر آن تابع را تعریف کنیم. به کد زیر نگاه کنید:

<<<code>>>

window.addEventListener( "load" , function(){

// هر چیزی در اینجا بعد از لود کامل صفحه اجرا می شود

document.getElementById( "myForm" ).addEventListener( "submit", formSubmit);

} );

function formSubmit()

{

// هر چیزی در اینجا بعد از سابمیت فرم اجرا می شود

}

<<</code>>>

من ترجیح می دهم از حالت دوم استفاده کنم. حال تابع formSubmit را کامل می کنم. می توانیم به دو حالت اطلاعات فرم را بگیریم که هر دو حالت در زیر آمده است:

<<<code>>>

function formSubmit()

{

// حالت اول

var inputText = document.getElementById("inputText");

alert( inputText.value ); // متن داخل فیلد متن را به صورت پیام نمایش می دهد

// حالت دوم

var inputs = this.getElementsByTagName("input");

var textareas = this.getElementsByTagName("textarea"); // ممکن است فرم ما این تگ را نیز داشته باشد

var result = {}; // یک آبجکت برای گرفتن مقادیر فرم

for( var i in inputs )

{

if( inputs[i].name != "" && inputs[i].name != undefined )

result[ inputs[i].name ] = inputs[i].value;

}

for( var j in textareas )

{

if( textareas[i].name != "" && textareas[i].name != undefined )

result[ textareas[i].name ] = textareas[i].value;

}

console.log( result );

}

<<</code>>>

قسمت قرمز رنگ element فرمی است که رویداد برای آن اتفاق افتاده است. یعنی همین فرم خودومون!

قسمت آبی رنگ تابعی است برای گرفتن آرایه ای از عناصر با تگی خاص. مثلا اینجا تمام تگ های input را می گیرد و در متغیر inputs می ریزد.

قسمت سبز رنگ نوعی از استفاده ی حلقه ی for در جاوا اسکریپت است. این کد معادل کد زیر است:

<<<code>>>

for( var i = 0 ; i < inputs.length ; i++ )

<<</code>>>

قسمت بنفش رنگ در اصل مثل این می ماند که آبجکتی به شکل زیر تعریف کنیم: (البته اگر این کار را مثل زیر انجام بدهیم error دریافت می کنیم)

<<<code>>>

{

textareas[i].name: textareas[i].value

// قسمت اول tag: قسمت دوم value

}

<<</code>>>

نکته: وقتی از تابع هایی که با getElement شروع می شوند استفاده می کنیم مهم است که به پدر (parent) آن ها توجه کنیم. مثلا در بالا this پدر به حساب می آید. یعنی تابع getElementsByTagName فقط درون this(که همان فرم ماست) اجرا می شود و به دیگر عناصر صفحه با تگ input کاری ندارد.

مشاهده ی نتیجه ی نهایی

این هم از این مطلب!

ارسال نظر برای این مطلب

عنوان	پاسخ	بازدید	توسط
پنهان کردن عناصر صفحه در php	4	2293	snakeeye
طراحی باکس دانلود	6	2447	mary567
ارزیابی رایگان سایت ها و وبلاگ ها	25	8446	grimboy
انواع قالب اختصاصی	3	2078	ghraphic-home
بهترین افزونه های AMP وردپرس	2	2499	jack7788
کد پاپ اپ دو یا چند پنجره به طور همزمان پشت صفحه	23	9008	jack7788