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

یکی از مفید ترین کارایی های جاوااسکریپت، کار کردن و تغییرات در فرم های صفحات وب می‌باشد. در ادامه آمزش جاوااسکریپت، به مبحث پیشرفت دادن فرم ها و کار با عناصر آنها می پردازیم، مهم ترین دستورات و event هایی که در فرم ها با آنها سر و کار داریم شامل موارد زیر می‌شوند:

1- فیلدهای متنی یا text fields
در این فیلدها با event های زیر سر و کار داریم که برای هر کدام از آنها می توانیم دستورات و توابع مشخصی را ارائه کنیم

onfocus: وقتی زمینه متنی در حالت انتخاب در می آید
onblur: وقتی زمینه متنی از حالت انتخاب خارج می شود
onchange: وقتی محتویات زمینه متنی تغییر می کند
onkeypress: وقتی کلیدی فشرده و رها می شود
onkeydown: وقتی کلیدی فشرده می شود
onkeyup: وقتی کلیدی از حالت فشرده خارج می شود

2- فیلدهای انتخابی یا checkbox

فیلدهای انتخابی به صورت کلی دارای دو حالت true و false هستند که با استفاده از دستور if می توانیم توابع مورد نظر خود را به این فیلدها اعمال کنیم.

myCheckBox.checked (true or false)
onclick: وقتی بر رو فیلد کلیک می شود
onchange: وقتی حالت فیلد تغییر می کند

3- اتفاقات فرم

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

// کار کردن با حالت ارسال فرم
function prepareEventHandlers() {
	document.getElementById("frmContact").onsubmit = function() {
		// اگر ایمیلی وارد نشده بود، فرم را اجرا نکن
		if (document.getElementById("email").value == "") {
			document.getElementById("errorMessage").innerHTML = "Please provide at least an email address!";
			// برای جلوگیری از ارسال فرم
			return false;
		} else {
			// فرم را ارسال کن و دوباره اجرا کن
			document.getElementById("errorMessage").innerHTML = "";
			return true;
		}
	};
}

// تابع بالا را تنها زمانی که صفحه کامل لود شد اجرا کن
window.onload =  function() {
	prepareEventHandlers();
};

مثال زیر برای ایجاد تغییرات در کلاس های css، بعد از اعمال تغییرات در فیلدها می باشد

// نمایش و مخفی کردن قسمت های فرم
function preparePage() {
	document.getElementById("brochures").onclick = function() {
		if (document.getElementById("brochures").checked) {
			// use CSS style to show it
			document.getElementById("tourSelection").style.display = "block";
		} else {
			// مخفی کن
			document.getElementById("tourSelection").style.display = "none";
		}
	};
	// در بارگزاری اولیه، این قسمت را مخفی کن
	document.getElementById("tourSelection").style.display = "none";
}

window.onload =  function() {
	preparePage();
};