فرمت (reset) تمام فیلد های یک فرم با استفاده از jQuery

اگر یک طراح Front End باشید یا در حال طراحی وب سایت خود هستید بدون ش; اگر در فرم های وب سایت خود از تکنولوژی Ajax استفاده کرده اید، دوست دارید پس از ارسال فرم مربوط، فیلد های آن فرمت یا reset شوند.

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

راه حل چیست؟ 

در یک فرم عموما از عناصری همچون input ها، select ها ,... استفاده می شود که ما میخواهیم پس از ارسال فرم این عناصر به مقدار پیشفرض خود برگردند.

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

<form method="POST" action="#"  id="forms"c enctype="multipart/form-data">
	
	<p><input type="text" value="test"></p>
	<p><input type="file" ></p>
<p>	<input type="checkbox"  checked></p>
<p>	<input type="radio"  checked></p>
	<p><select  id="select">
			<option value="0">0</option>
			<option value="1" selected>1</option>
		</select></p>
	
<p><button class="btn btn-warning btn-reset" type="button">Reset</button></p>
</form>

حال می خواهیم با کلیک بر روی دکمه btn-reset کل فرم ریسیت شده و همه عناصر به حالت پیش فرض خود برگردند.

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

   $(".btn-reset").click(function () {

        $("#forms").find("input[type=text], textarea,input[type=file]").val(null);
        $("#select option[value='0']").prop('selected', true);
        $('input:checkbox').removeAttr('checked');
        $('input:radio').removeAttr('checked');
    });

همانگونه که می بینید گفته ایم که با کلیک بر روی دکمه btn-reset یک سری عملیات انجام شود که به شرح زیر میباشد.

 $("#forms").find("input[type=text], textarea,input[type=file]").val(null);

در خط بالا گفته ایم تمام input های فرم را که از نوع text  و file می باشند را پیدا کرده و مقدار آن را برابر null قرار دهد.

سپس در خط دوم گفته ایم که مقدار پیش فرض المنت select را برابر صفر قرار دهد، شما می توانید برای اینکه فیلد select مورد نظر خود را به مقدار مورد نظر خود تبدیل کنید کافیست به جای عدد 0 value مورد نظر از المنت option مورد نظر را بدهید.

در خط سوم و چهارم نیز به ترتیب attribute چک باکس و رادیو باتن ها را حذف کرده ایم.

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

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