آموزش ایجاد فرم ثبت سفارش با جاوااسکریپت و HTML
آموزش ایجاد فرم ثبت سفارش

آموزش ایجاد فرم ثبت سفارش با جاوااسکریپت و HTML

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

برای مشاهده لینک وارد شود

ما ابتدا کار را با توضیح بخشی از کدهای HTML آغاز می کنیم.ما در این بخش ۶ مرحله داریم که در آن کاربران به ترتیب با پاسخ دادن به سوالات  و زدن دکمه ادامه یا اینتر کیبورد به سوال بعدی هدایت خواهند شد.در زیر شما شکل کلی آن را مشاهده می کنید.

<form id="myform" class="fs-form fs-form-full" autocomplete="off">
					<ol class="fs-fields">
						<li>
							<label class="fs-field-label fs-anim-upper" for="q1">        نام خود را وارد نمایید</label>
							<input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="        مجید محمد نژاد" required/>
						</li>
						<li>
							<label class="fs-field-label fs-anim-upper" for="q2" data-info="        مطئن باشید هیچ هرزنامه ای برای شما ارسال نخواهد شد">لطفا آدرس رایانامه خود را وارد نمایید</label>
							<input class="fs-anim-lower" id="q2" name="q2" type="Email" placeholder="info@8np.ir" required/>
						</li>
						<li data-input-trigger>
							<label class="fs-field-label fs-anim-upper" for="q3" data-info="با انتخاب  های زیر ما را در ارائه هر چه بهتر خدمات یاری می فرمایید">نوع وبسایت خود را تعیین نمایید</label>
							<div class="fs-radio-group clearfix fs-anim-lower">
								<span><input id="q3b" name="q3" type="radio" value="conversion"/><label for="q3b" class="radio-conversion">فروشگاهی</label></span>
								<span><input id="q3c" name="q3" type="radio" value="social"/><label for="q3c" class="radio-social">هدفمند</label></span>
								<span><input id="q3a" name="q3" type="radio" value="mobile"/><label for="q3a" class="radio-mobile">موبایلی</label></span>
							</div>
						</li>
						<li data-input-trigger>
							<label class="fs-field-label fs-anim-upper" data-info="       ما آن را در وبسایت شما اعمال خواهیم کرد">لطفا رنگ وبسایت خود را تعیین کنید</label>
							<select class="cs-select cs-skin-boxes fs-anim-lower">
								<option value="" disabled selected>         انتخاب رنگ</option>
								<option value="#588c75" data-class="color-588c75">#588c75</option>
        .
        .تعدادی رنگ در اینجا قرار خواهند گرفت
        .
							</select>
						</li>
						<li>
							<label class="fs-field-label fs-anim-upper" for="q4">       انتظارات خود را در مورد وبسایت برای ما کمی بیشتر توضیح دهید</label>
							<textarea class="fs-anim-lower" id="q4" name="q4" placeholder="       در اینجا توضیح دهید"></textarea>
						</li>
						<li>
							<label class="fs-field-label fs-anim-upper" for="q5">       بودجه شما چقدر است؟</label>
							<input class="fs-mark fs-anim-lower" id="q5" name="q5" type="number" placeholder="1000000" step="100" min="1000000"/>
						</li>
					</ol>
					<button class="fs-submit" type="submit"     >ارسال اطلاعات </button>
				</form>

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

آموزش ایجاد فرم ثبت سفارش

در کدهای HTML بالا ما تعیین کردیم که جواب به این سوال اجباری است(با استفاده از خاصیت reqired)  و با استفاده از  خاصیت placeholder یک مقدار پیش فرض در آن قرار دادیم.برای نمایش پیام خطا در صورتی که کاربر قبل از تکمیل فرم کلید ادامه را بزند از یک تابع جاوا اسکریپت استفاده کرده ایم که در ادامه آن را برایتان نمایش خواهیم داد.

آموزش ایجاد فرم ثبت سفارش
در این بخش از کاربران میخواهیم تا یک آدرس ایمیل  وارد نمایند.آنچه در اینجا مهم است بررسی صحت شکل ایمیل وارد شده است که آن را توسط تکه کد زیر بررسی می نماییم.
if(!/^[a-zA-Z0-9\.\-\_]+@[a-zA-Z0-9\-]+\.[a-zA-Z]{1,4}$/ig.test(input.value))

لازم به ذکر است که وارد کردن اطلاعات در این بخش نیز اجباری است و مانند سوال قبل از خاصیت required  برای آن استفاده کردیم.

آموزش ایجاد فرم ثبت سفارش

در این بخش از کاربران تقاضا میشود تا نوع وبسایت مورد نظر خود ا وارد نمایند.کاری که ما در اینجا انجام داده ایم فقط بارگذاری تعدادی تصویر مناسب با موضوع است که توسط تکه کد HTML زیر انجام شده است.

<div class="fs-radio-group clearfix fs-anim-lower">
								<span><input id="q3b" name="q3" type="radio" value="conversion"/><label for="q3b" class="radio-conversion">فروشگاهی</label></span>
								<span><input id="q3c" name="q3" type="radio" value="social"/><label for="q3c" class="radio-social">هدفمند</label></span>
								<span><input id="q3a" name="q3" type="radio" value="mobile"/><label for="q3a" class="radio-mobile">موبایلی</label></span>
							</div>

آموزش ایجاد فرم ثبت سفارش

آموزش ایجاد فرم ثبت سفارش
در این بخش ما به کاربران ۲۰ نوع رنگ را پیشنهاد می کنیم تا یکی را برگزینند که این کار توسط تکه کد HTML زیر انجام میشود.
<select class="cs-select cs-skin-boxes fs-anim-lower">
								<option value="" disabled selected>         انتخاب رنگ</option>
								<option value="#588c75" data-class="color-588c75">#588c75</option>
								<option value="#b0c47f" data-class="color-b0c47f">#b0c47f</option>
								<option value="#f3e395" data-class="color-f3e395">#f3e395</option>
								<option value="#f3ae73" data-class="color-f3ae73">#f3ae73</option>
								<option value="#da645a" data-class="color-da645a">#da645a</option>
								<option value="#79a38f" data-class="color-79a38f">#79a38f</option>
								<option value="#c1d099" data-class="color-c1d099">#c1d099</option>
								<option value="#f5eaaa" data-class="color-f5eaaa">#f5eaaa</option>
								<option value="#f5be8f" data-class="color-f5be8f">#f5be8f</option>
								<option value="#e1837b" data-class="color-e1837b">#e1837b</option>
								<option value="#9bbaab" data-class="color-9bbaab">#9bbaab</option>
								<option value="#d1dcb2" data-class="color-d1dcb2">#d1dcb2</option>
								<option value="#f9eec0" data-class="color-f9eec0">#f9eec0</option>
								<option value="#f7cda9" data-class="color-f7cda9">#f7cda9</option>
								<option value="#e8a19b" data-class="color-e8a19b">#e8a19b</option>
								<option value="#bdd1c8" data-class="color-bdd1c8">#bdd1c8</option>
								<option value="#e1e7cd" data-class="color-e1e7cd">#e1e7cd</option>
								<option value="#faf4d4" data-class="color-faf4d4">#faf4d4</option>
								<option value="#fbdfc9" data-class="color-fbdfc9">#fbdfc9</option>
								<option value="#f1c1bd" data-class="color-f1c1bd">#f1c1bd</option>
							</select>

آموزش ایجاد فرم ثبت سفارش

در این بخش ما از کاربران خود میخواهیم تا توضیحاتی را در مورد وبسایت مورد نظر خود برای ما بنویسند. که تکه کد HTML آن در زیر مشاهده می کنید.

<li>
							<label class="fs-field-label fs-anim-upper" for="q4">       انتظارات خود را در مورد وبسایت برای     ما کمی بیشتر توضیح دهید</label>
							<textarea class="fs-anim-lower" id="q4" name="q4" placeholder="        در اینجا توضیح دهید"></textarea>
						</li>

آموزش ایجاد فرم ثبت سفارش

در اینجا نیز ما از کاربران میخواهیم تا بودجه مورد نظر خود را وارد نمایند .آنچه در اینجا قابل تامل است این است که ما یک میزان حداقل برای آن در نظر گرفته ایم و همچنین نیز از یک تصویر “ریال” برای انتخاب واحد پولی خود درآن استفاده کرده ایم و تمام آنها توسط تکه کدHTML زیر انجام گرفته است.

<li>
							<label class="fs-field-label fs-anim-upper" for="q5">       بودجه شما چقدر است؟</label>
							<input class="fs-mark fs-anim-lower" id="q5" name="q5" type="number" placeholder="       ۱۰۰۰۰۰۰"     step="۱۰۰۰۰۰۰" min="۱۰۰۰۰۰۰"/>
</li>

در ادامه بعضی از قسمتهای جاافتاده را برایتان توضیح خواهیم داد.

آموزش ایجاد فرم ثبت سفارش

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

if( this.options.ctrlNavDots ) {
	this.ctrlNav = createElement( 'nav', { cName : 'fs-nav-dots', appendTo : this.ctrls } );
	   var dots = '';
	   for( var i = 0; i < this.fieldsCount; ++i ) {
		dots += i === this.current ? '<button class="fs-dot-current"></button>' :      '<button disabled></button>';
			}
			this.ctrlNav.innerHTML = dots;
			this._showCtrl( this.ctrlNav );
			this.ctrlNavDots = [].slice.call( this.ctrlNav.children );
		}

آموزش ایجاد فرم ثبت سفارش

با قرار گرفتن موس روی علامت i بالای تیتر سوال یک پیام برای کاربران نمایش داده خواهد شد که ایم کار توسط تکه کد های HTML زیر انجام میگیرد.(با استفاده از کلاس fs-field-label fs-anim-upper)

<label class="fs-field-label fs-anim-upper" for="q2" data-info="مطئن باشید هیچ هرزنامه ای برای شما ارسال نخواهد شد">........</label>

<label class="fs-field-label fs-anim-upper" for="q3" data-info="با انتخاب  های زیر ما را در ارائه هر چه بهتر خدمات یاری می فرمایید">.........</label>

<label class="fs-field-label fs-anim-upper" data-info="ما آن را در وبسایت شما اعمال خواهیم کرد">.........</label>

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

if( this.options.ctrlNavDots ) {
	this.ctrlNav = createElement( 'nav', { cName : 'fs-nav-dots', appendTo : this.ctrls } );
			var dots = '';
			for( var i = 0; i < this.fieldsCount; ++i ) {
				dots += i === this.current ? '<button class="fs-dot-current"></button>' : '<button disabled></button>';
			}
			this.ctrlNav.innerHTML = dots;
			this._showCtrl( this.ctrlNav );
			this.ctrlNavDots = [].slice.call( this.ctrlNav.children );
		}

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

document.addEventListener( 'keydown', function( ev ) {
	if( !self.isLastStep && ev.target.tagName.toLowerCase() !== 'textarea' ) {
		var keyCode = ev.keyCode || ev.which;
			if( keyCode === 13 ) {
				ev.preventDefault();
				self._nextField();
		}
	     }
	}

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

FForm.prototype._validade = function() {
		var fld = this.fields[ this.current ],
			input = fld.querySelector( 'input[required]' ) || fld.querySelector( 'textarea[required]' ) || fld.querySelector( 'select[required]' ),
			error;

		if( !input ) return true;
    
		switch( input.tagName.toLowerCase() ) {
			case 'input' : 
				if( input.type === 'radio' || input.type === 'checkbox' ) {
					var checked = 0;
					[].slice.call( fld.querySelectorAll( 'input[type="' + input.type + '"]' ) ).forEach( function( inp ) {
						if( inp.checked ) {
							++checked;
						}
					} );
					if( !checked ) {
						error = 'NOVAL';
					}
				}
				else if( input.value === '' ) {
					error = 'NOVAL';
				}else if( input.value.length!=0 && input.type === 'email'){
          if(!/^[a-zA-Z0-9\.\-\_]+@[a-zA-Z0-9\-]+\.[a-zA-Z]{1,4}$/ig.test(input.value)){
            error = 'INVALIDEMAIL';
          }
        }
				break;

			case 'select' : 
				// assuming here '' or '-1' only
				if( input.value === '' || input.value === '-1' ) {
					error = 'NOVAL';
				}
				break;

			case 'textarea' :
				if( input.value === '' ) {
					error = 'NOVAL';
				}
				break;
		}
    
		if( error != undefined ) {
			this._showError( error );
			return false;
      
		}
  
		return true;
	}

FForm.prototype._showError = function( err ) {
 var message = '';
 switch( err ) {
 case 'NOVAL' : 
 message = 'لطفا قبل از ادامه فیلد را تکمیل نمایید';
 break;
 case 'INVALIDEMAIL' : 
 message = 'لطفا رایانامه را به شکل صحیح وارد نمایید';
 break;
 // ...
 };
 this.msgError.innerHTML = message;
 this._showCtrl( this.msgError );
 }

تابع بالا یک تابع اصلی برای نمایش پیام های خطا می باشد.در آن بررسی خالی بودن فیلد ها و درستی نوشتاری بعضی از فیلد ها بررسی می شود.(برای مشاهده تمام کدها لطفا به سورس مراجعه شود.)

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

 

پایان

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

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

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


× 7 = سی پنج

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>