کار با فرم ها و عناصر فرم در جاوا اسکریپت

در صفحات وب فرم ها تنها عناصری هستند که کاربران می توانند به صورت مستقیم یکسری اطلاعات را در آن ها وارد نمایند. برای ایجاد یک فرم از تگ form و برای ایجاد عناصر آن از تگ هایی همچون textarea ، select ، input و … استفاده می شود که مرورگرها بوسیله آن ها قادر به نمایش فیلد های یک خطی ، چند خطی ، منوهای بازشو ، دکمه ها و… هستند. در این فصل به بررسی روش های کار بر روی فرم ها از طریق جاوا اسکریپت پرداخته و به نحوه اعتبار سنجی داده های وارد شده در یک فرم خواهیم پرداخت.

اساس یک عنصر فرم در صفحه

یک فرم در صفحه بوسیله تگ form که دارای صفت های زیر می باشد ایجاد می شود:

 

method : مشخص می کند که مرورگر از چه روشی برای ارسال داده های فرم استفاده کند که می تواند یکی از دو مقدار GET و POST را بپذیرد.

 

action : فرم ها پس از ارسال باید به یک صفحه پردازشگر که البته به یکی از زبان های تحت سرور نوشته می شوند هدایت شوند. این صفت آدرس صفحه پردازشگر فرم را مشخص می کند.

 

enctype : نوع رمز گذاری ۲ داده های فرم را هنگام ارسال مشخص میکند که در حالت پیش فرض برابر application/x-url-encoded است. اما در حالتی که داخل فرم خود عنصری از نوع file که کاربران را قادر به آپلود فایل ها می کند وجود داشته باشد باید آن را برابر multipart/form-data قرار دهیم.

 

accept : لیستی از MIME type فایل هایی که کاربر مجاز به آپلود آن ها می باشد را تعیین می کند.

 

accept-charset : لیستی از مجموعه کاراکترهایی را که سرور باید در هنگام دریافت اطلاعات استفاده کند، مشخص می کند.

نوشتن اسکریپت ها برای دسترسی به عناصر فرم در جاوا اسکریپت

کدنویسی برای عناصر فرم نسبت به سایر عناصر کمی متفاوت است.

ایجاد ارجاع به عناصر مورد نظر

قبل از سر و کار داشتن با عناصر form باید ارجاعی به فرم مورد نظر خود در صفحه ایجاد کنیم. این کار از چندین روش انجام می شود.

 

روش اول، استفاده از متد ()getElementById است که از ID فرم برای دسترسی به آن استفاده می کند.

 

روش دوم استفاده از آرایه ی []forms است که به عنوان یکی از خاصیت های شی document در DOM معرفی شده است.

 

برای این کار می توان از اندیس عددی که بستگی به مکان فرم مورد نظر در صفحه دارد استفاده کرد. به عنوان مثال :

 

var oForm = document.forms[0] ; // get the first form
var oOtherForm = document.forms["formZ"] ; // get the form whose name
is "formZ"

 

دسترسی به عناصر داخل یک فرم

هر عنصر داخل یک فم مثل یک دکمه، یک فیلد یک خطی و… با استفاده از آرایه ای به نام []elements که یکی از خاصیت های یک شی از نوع فرم می باشد قابل دسترسی است.

 

می توانید از این آرایه و با استفاده از اندیس عددی یا اسمی مورد نظر به عناصر مختلف فرم دسترسی داشته باشید.

 

var oFirstField = oForm.elements[0] ; // get the first form field
var oTextbox1 = oForm.elements["textbox1"] ; // get the field with the
name "textbox1"

 

خط اول از کد بالا متغیری را تعریف می کند که به اولین عنصر از فرمی به نام oForm اشاره می کند.

 

خط دوم نیز متغیری را تعریف می کند که به عنصری به نام textbox1 از فرمی به نام oForm اشاره می کند.

 

یک روش دیگر (که اصطلاحا به آن روش میانبر می گویند) برای دسترسی به عناصری که نام مشخصی دارند استفاده می شود به شکل زیر است:

 

var oTextbox1 = oForm.textbox1; //get the field with the name
"textbox1"

 

کد بالا متغیری تعریف می کند که به عنصری با شناسه (یا ID) textbox1 از فرمی به نام oForm اشاره می کند.

 

اگر اسم عنصر مورد نظر دارای چند space باشد باید در اطراف آن از براکت ([]) استفاده کنیم:

 

var oTextbox1 = oForm.textbox1; //get the field with the name
"textbox1"

 

ویژگی ها و خاصیت های عناصر form

تمامی عناصر فرم (به جز عنصری از نوع hidden) شامل یکسری خواص و رویدادهای مشترکی هستند که در زیر بیان می کنیم:

 

خاصیت disabled : از این خاصیت هم برای تشخیص اینکه کدام عنصر در حالت غیر فعال قرار دارد و هم برای فعال یا غیر فعال کردن یک عنصر از قبل فعال استفاده می شود.

 

خاصیت form : اشاره به فرمی دارد که عنصر مورد نظر ما، داخل آن قرار دارد.

 

متد ()focus : این متد موجب می شود تمرکز صفحه بر روی عنصر مورد نظر قرار گیرد.

 

متد ()blur : این متد عکس متد بالا است و موجب می شود تمرکز صفحه از روی عنصر مورد نظر خارج شود.

 

رویداد blur : این رویداد موقعی که تمرکز صفحه از روی عنصر مورد نظر خارج شود رخ می دهد.

 

رویداد focus : عکس رویداد بالا عمل می کند و موقعی که تمرکز بر روی عنصر مورد نظر قرار بگیرد رخ می دهد.

 

برای مثال :

 

var oField1 = oForm.elements[0];
var oField2 = oForm.elements[1];
//set the first field to be disabled
oField1.disabled = true;
//set the focus to the second field
oField2.focus();
//is the form property equal to oForm?
alert(oField1.form == oForm); //outputs "true"

 

نکته: عناصر از نوع hidden فقط از خاصیت form که در بالا ذکر شد پشتیبانی می کند.

 

ارسال فرم بوسیله جاوا اسکریپت

در HTML فرستادن فرم از طریق یک دکمه از نوع submit یا عکسی که در نقش دکمه submit عمل می کند انجام می شود.

 

• توصیه می شود : آموزش کامل فرم ها در HTML

 

مثال :

 

<input type="submit" value="Submit" />
<input type="image" src="submit.gif" />

 

در صورت کلیک بر روی هر یک از دکمه های بالا فرم به صورت معمولی ارسال می شود.

 

چنانچه دکمه Enter صفحه کلید را نیز فشار دهید مرورگر فرم را مثل حالتی که دکمه کلیک می شود ارسال می کند.

 

برای تست ارسال شدن فرم می توانید از کد ساده زیر در تگ آغازین فرم مورد نظرتان استفاده کنید :

 

<form method="post" action="javascript:alert(‘Submitted’)">

 

اگر می خواهید که از هیچ یک از روش های فوق استفاده نکنید می توانید از متدی به نام ()submit استفاده کنید.

 

این متد جزئی از تعریفات DOM برای یک عنصر form است و می تواند هر جایی از صفحه استفاده شود. برای این کار اولا باید ارجاعی به فرم مورد نظر ایجاد کرد (طبق روش هایی که قبلا ذکر شد):

 

oForm = document.getElementById("form1");
oForm = document.forms["form1"];
oForm = document.forms[0];

 

بعد از این کار می توانید به راحتی از این متد استفاده کنید :

 

oForm.submit();

 

ارسال form فقط یکبار !

یکی از مشکلاتی که توسعه دهندگان در فرم ها با آن روبرو هستند این است که بسیاری از کاربران برای اطمینان از اینکه فرم به درستی ارسال شود چندین بار بر روی دکمه submit کلیک می کنند. مشکلی که در اینجا هست این است که به ازای هر بار کلیک کاربر بر روی دکمه یک درخواست اضافی به سرور ارسال می شود.
راه حل این مشکل بسیار ساده است: بعد از اینکه کاربر دکمه را کلیک کرد، آن را غیر فعال می کنیم.

 

برای انجام این کار می توان به جای استفاده از دکمه submit معمولی زیر:

 

<input type="submit" value="Submit" />

 

از کد زیر استفاده کرد:

 

<input type=”button” value=”Submit” onclick=”this.disabled=true;this.form.submit()” />

 

موقعی که این دکمه کلیک می شود اولا خود دکمه غیر فعال می شود و سپس فرمی را که جزئی از آن است، ارسال می کند.

 

توجه کنید که در اینجا کلمه کلیدی this به دکمه اشاره دارد و form به فرم دربرگیرنده دکمه اشاره می کند.

 

همانطور که یک فرم را می توانیم بوسیله متد ()submit ارسال کنیم می توانیم آن را به وسیله متدی به نام ()reset نیز reset (پاك سازی) کنیم :

 

<input type=”button” value=”Reset” onclick=”document.forms[0].reset()”/>

 

کار با کادرهای متنی فرم ها در جاوا اسکریپت

دو نوع کادر متنی در HTML مورد استفاده قرار می گیرد.

 

یک خطی:

<input type="text"/>

 

و چند خطی:

 

<textarea>Content</textarea>

 

برای درست کردن یک کادر متنی یک خطی می بایست صفت type عنصر input را برابر text قرار دهیم. صفت size طول کادر را بر حسب تعداد کاراکترها مشخص می کند. مقدار صفت value نیز مقدار پیش فرض موجود داخل آن را مشخص می کند. صفت maxlength حداکثر تعداد کاراکترهایی که بتوان در کادر وارد کرد را مشخص می کند.

 

<input type="text" size="25" maxlength="50" value="initial value" />

 

عنصر textarea برای ایجاد کادرهای متنی چند خطی مورد استفاده قرار می گیرد. از صفت های rows و cols برای مشخص کردن طول و عرض textarea استفاده می شود.

 

<textarea rows="25" cols="5">initial value</textarea>

 

بر خلاف input این عنصر امکان مشخص کردن حداکثر تعداد کاراکتر های ورودی را ندارد.

بازیابی و تغییر مقدار یک فرم textbox در جاوا اسکریپت

اگر چه هر دو عنصر بالا تفاوت هایی دارند اما هر دوی آن ها از خاصیتی به نام value برای بازیابی مقدار وارد شده در آن ها پشتیبانی می کنند.

 

به عنوان مثال برای بازیابی مقدار وارد شده در فیلدی با شناسه (یا ID) txt1 می توان به صورت زیر عمل کرد:

 

var oTextbox1 = document.getElementById("txt1");

 

چون مقداری که خاصیت value برمی گرداند یک رشته ساده است می توان از تمامی متدها و خواصی که قبلا برای رشته ها اشاره کردیم استفاده کرد.

 

alert ('oTextbox1.length');

 

از این خاصیت برای قراردادن مقادیر جدید درکادر های متنی نیز می توان استفاده کرد. به عنوان مثال با دستور زیر می توان مقادیر جدیدی را به oTextbox1 (که در بالا ذکر شد) اضافه کنیم:

 

oTextbox1.value='first textbox';

 

انتخاب متن های داخل کادرهای متنی

هر دو نوع فیلد بالا از متدی به نام ()select برای انتخاب تمامی متن داخل آن ها پشتیبانی می کنند.

 

برای این کار اولا تمرکز صفحه باید بر روی آن قرار گیرد. برای اطمینان از این امر باید همیشه قبل از متد ()select از متدی به نام ()focus استفاده نمایید. (البته این کار در تمامی مرورگرها الزامی نیست اما بهتر است همیشه انجام شود.)

 

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

 

oTextbox1.focus();
oTextbox1.select();

 

رویداد های کادرهای متنی فرم در جاوا اسکریپت

هر دو نوع فیلد بالا علاوه بر پشتیبانی از رویداد های blur و focus از دو رویداد جدید به نام های change و select نیز پشتیبانی می کنند.

 

change : این رویداد وقتی رخ می دهد که کاربر بعد از تغییر متن داخل کادرهای متنی، آن ها را از حالت تمرکز صفحه خارج کند.

 

select : این رویداد وقتی رخ می دهد که یک یا چند کاراکتر از رشته های داخل یک کادر متنی چه به صورت دستی یا توسط متد ()select انتخاب شوند.

 

تفاوت رویداد های change و blur این است که رویداد blur تنها زمانی رخ می دهد که تمرکز صفحه از عنصر مورد نظر خارج شود و رویداد change نیز وقتی رخ می دهد که علاوه بر تغییر متن داخل textarea ها ، تمرکز صفحه نیز از آن ها خارج می شود.

 

اگر متن داخل کادر متنی ثابت باشد و فقط تمرکز صفحه از عنصر برود blur رخ می دهد اما اگر متن هم تغییر کرده باشد ابتدا رویداد change و به دنبال آن blur رخ خواهد داد.

 

انتخاب خودکار متن درون کادرهای متنی

برای انتخاب خودکار متن درون یک کادر متنی هنگامی که تمرکز صفحه بر روی آن ها قرار می گیرد می توان به راحتی از دستور ()this.select در رویداد onFocus عنصر مورد نظر استفاده نمود.

 

به عنوان مثال :

 

<input type="text" onfocus="this.select();" />
<textarea onfocus="this.select()"></textarea>

 

چرخش Tab بین عناصر فرم به صورت خودکار در جاوا اسکریپت

بعد از تکمیل کادر های متنی که تعداد کاراکترهای مشخصی را می پذیرند می توانید کنترل (تمرکز) صفحه را به دیگر عناصر صفحه منتقل کنید.

 

برای این کار می توانیم از صفت maxlength در تگ های </ input> استفاده کنیم :

 

<input type="text" maxlength="4" />

 

کاری که باید در اینجا انجام دهیم تشخیص وارد شدن حداکثر کاراکتر ها و فراخوانی متد ()focus برای عنصر فرم بعدی است. برای این کار از تابعی به نام test استفاده می کنیم:

 

function test(oTextbox){
var oForm = oTextbox.form;
//make sure the textbox is not the last field in the form
if (oForm.elements[oForm.elements.length-1] != oTextbox
&& oTextbox.value.length == oTextbox.getAttribute("maxlength")) {
for (var i=0; i < oForm.elements.length; i++) {
if (oForm.elements[i] == oTextbox) {
for(var j=i+1; j < oForm.elements.length; j++) {
if (oForm.elements[j].type != "hidden") {
oForm.elements[j].focus();
return;
}
}
return;
}
}
}
};

 

تابعی که ما نوشتیم باید بعد از هر بار وارد کردن کاراکتر داخل textbox فراخوانی می شود. برای اینکار از رویداد onKeyUp استفاده خواهیم کرد به صورت زیر :

 

<input type='text' maxlength='4' onKeyUp='test(this)' />

 

محدود کردن کاراکتر های ورودی در یک textarea

اگر چه یک textfield دارای صفتی به نام maxlength برای محدودکردن کاراکتر های ورودی است اما یک textarea فاقد این صفت است. اما ما می توانیم توسط یک کد ساده javascript اینکار را انجام دهیم.

 

برای این کار ابتدا تابعی به نام ()isNotMax تعریف خواهیم کرد. به صورت زیر :

 

function isNotMax(oTextbox){
Return oTextbox.value.length != oTextarea.getAttribute('maxlength');
}

 

همانطور که می بینید این تابع بسیار ساده است. فقط تعداد کاراکترهای وارد شده در کادر متنی را با صفت maxlength عنصر مورد نظر مقایسه می کند و در صورتی که برابر نباشد true و در غیر اینصورت false را برمی گرداند.

 

توجه داشته باشید صفت maxlength برای textarea صفتی غیر استاندارد است اما می توانیم توسط متد ()getAttribute مقدار آن را بدست آوریم.

 

در مرحله بعد باید این تابع را در رویداد onKeyPress عنصرمان فراخوانی کنیم. این رویداد قبل از وارد کردن هر کاراکتر رخ خواهد داد که دقیقا زمانی است که باید به حداکثر رسیدن تعداد کارکتر های ورودی را چک کنیم. چیزی مانند کد زیر:

 

<textarea rows='10' cols='25' maxlength='150' onKeyPress='returnisNotMax(this)'></textarea>

 

توجه کنید که مقدار برگشتی از تابع به کنترل کنندهی رویداد onKeyPress فرستاده می شود. البته این شیوه از راه های قدیمی کنترل رفتار پیش فرض یک رویداد است.
موقعی که تعداد کاراکتر های ورودی از MAX کمتر باشد تابع مقدار true به معنی ادامه رفتار عادی رویداد را برمی گرداند در غیر این صورت موجب جلوگیری از رفتار عادی رویداد و در نتیجه کاراکترهای بیش از حد مجاز خواهد شد.

 

کار با listbox ها و comboboxها

listbox ها و comboboxها در HTML بوسیله تگی به نام select ایجاد می شوند که به صورت پیش فرض مرورگرها این عنصر را به صورت combobox نشان می دهند.

 

<select name="selAge" id="selAge">
<option value="1">18-21</option>
<option value="2">22-25</option>
<option value="3">26-29</option>
<option value="4">30-35</option>
<option value="5">Over 35</option>
</select>

 

مقدار صفت value آیتمی را که توسط کاربر انتخاب می شود به سرور فرستاده می شود.

 

برای نشان دادن یک listbox فقط کافی است صفتی به نام size را با مقداری که مشخص کننده ی تعداد آیتم های قابل نمایش به صورت پیش فرض است به تگ select اضافه کنید. به عنوان مثال کد زیر listbox ی با ۵ آیتم نمایشی بصورت پیش فرض را نمایش می دهد :

 

<select name="selAge" id="selAge" size="3">
<option value="1">18-21</option>
<option value="2">22-25</option>
<option value="3">26-29</option>
<option value="4">30-35</option>
<option value="5">Over 35</option>
</select>

 

برای دسترسی به هر دو نوع عنصر فوق می توان طبق قواعدی که قبلا گفتیم عمل کنید :

 

oListbox = document.getElementById("selAge");

 

DOM برای تمامی عناصر select آرایه ای به نام options که هر خانه آن اشاره به optionی از آن عنصر دارد تعریف کرده است.

 

می توانیم برای نمایش متن (عنوان) هر option و مقدار صفت value آن ها از روش های قبلی استفاده کنیم. مثلا:

 

alert(oListbox.options[1].text); //output display text
alert(oListbox.options[1].value); //output value

 

علاوه بر این، هر option دارای خاصیتی به نام index است که در واقع موقعیت آن را در آرایه options مشخص می کند.

 

alert(oListbox.options[1].index); //outputs "1"

 

البته چون options یک آرایه است می توانیم از خاصیتی به نام length برای مشخص کردن تعداد کل optionهای select استفاده کنیم.

 

alert(“There are “ + oListbox.options.length + “ in the list.”);

 

اما حال از کجا بفهمیم که کدام option (آیتم) توسط کاربر انتخاب شده است؟

بازیابی/تغییر دادن option (ها)ی انتخاب شده

عنصر select دارای خاصیتی به نام selectedIndex است که index آیتم انتخاب شده را نگه داری می کند و در صورتی که هیچ آیتمی انتخاب نشده باشد مقدار ۱- را برمی گرداند.

 

alert(“The index of the selected option is “ +
oListbox.selectedIndex);

 

اما همانطور که می دانید با اضافه کردن صفتی مانند ‘multiple=’multiple به عنصر select امکان انتخاب بیش از یک آیتم در آنِ واحد امکان پذیر است. در این صورت خاصیت selectedIndex حاوی اولین عنصر انتخاب شده از list خواهد بود و این کمکی به ما نمی کند.چون index تمام آیتم های انتخاب شده احتیاج داریم. برای این کار نیاز به یک تابع داریم.

 

این تابع در طول آیتم های یک listbox چرخش کرده و مقدار خاصیتی به نام selected که مشخص کنندهی انتخاب شدن یا نشدن آیتم است را بررسی کرده و index آن option را به آرایه ای اضافه می کند. خاصیت selected فقط می تواند یکی از مقادیر true (انتخاب شده) یا fasle (انتخاب نشده) را در بر داشته باشد.

 

function getSelectedIndexes (oListbox) {
var arrIndexes = new Array;
for (var i=0; i < oListbox.options.length; i++) {
if (oListbox.options[i].selected) {
arrIndexes.push(i);
}
}
return arrIndexes;
};

 

از این تابع می توان هم برای بدست آوردن آیتم های انتخاب شده و هم تعداد آن ها استفاده کرد.

اضافه کردن optionها

می توانیم از طریق جاوا اسکریپت ، آیتم های جدیدی به list ها اضافه کنیم. برای این کار تابعی با سه آرگومان زیر طراحی میکنیم:

 

listی که می خواهیم روی آن کار کنیم، نام آیتمی که می خواهیم اضافه کنیم و مقداری که میخواهیم اضافه کنیم.

 

بعد توسط متدهای قبلی DOM یک عنصر option جدید ایجاد کرده و آن را به عنصر select اضافه میکنیم :

 

function add (oListbox, sName, sValue) {
var oOption = document.createElement("option");
oOption.appendChild(document.createTextNode(sName));
if (arguments.length == 3) {
oOption.setAttribute("value", sValue);
}
oListbox.appendChild(oOption);
}

 

چون صفت value برای یک option اختیاری است می توانیم در صورتی که value برای تابع فرستاده شده است آن را به option اضافه کنیم. برای چک کردن اینکه value فرستاده شده یا نه از دستور ۳==arguments.length استفاده می کنیم.

حذف optionها

جاوا اسکریپت علاوه بر امکان اضافه کردن option ها ، امکان حذف آن ها را نیز فراهم می کند.

 

یکی از روش های قدیمی برای این کار استفاده از آرایه ی options و قراردادن مقدار null برای عنصری از آن که می خواهیم حذف کنیم است :

 

oListbox.options[1] = null;

 

روش بهتر و جدیدتر استفاده از متدی به نام ()remove است که آرگومان (index) عنصر مورد نظر برای حذف را می پذیرد :

 

var oListbox = document.getElementById(“selListbox”);
oListbox.remove(0); //remove the first option

 

می توان همانند روش اضافه کردن option ها تابعی برای حذف آن ها از list ها استفاده کرد :

 

function del (oListbox, iIndex) {
oListbox.remove(iIndex);
}

 

چنانچه بخواهید هر یک از option های موجود در یک listbox را حذف کنید می توانید متد ()remove را برای هر کدام از آن ها فراخوانی کنید.

 

function clear (oListbox) {
for (var i=oListbox.options.length-1; i >= 0; i--) {
del(oListbox, i);
}
}

 

کد بالا برای حذف، آیتم ها را بر عکس طی می کند. این کار الزامی است چرا که با هر بار حذف شدن یک آیتم از لیست خاصیت index هر option شماره گذاری مجدد می شود. به این دلیل بهتر است همیشه اول عنصری با بزرگترین index و سپس عناصر با index کوچکتر تر حذف شوند.

 

به پایان مقاله امروز از آموزش جاوا اسکریپت مربوط به کار با فرم ها در جاوا اسکریپت می رسیم. امیدوارم این مقاله برای شما مفید واقع قرار گرفته شده باشد. در صورتی که سوالی در رابطه با مبحث فرم ها در جاوا اسکریپت دارید ، از بخش نظرات زیر با ما به اشتراک بگذارید.