۲۴ اوت ۲۰۲۳

فرم‌ها: event و method submit

معمولا submit event زمانی فعال می‌شود که یک فرم submit می‌شود. معمولا برای اعتبارسنجی فرم قبل از اینکه به سمت سرور فرستاده شود یا لغو و پردازش آن در JavaScript استفاده می‌شود.

متد form.submit() اجازه می‌دهد که فرستادن فرم از JavaScript آغاز شود. ما می‌توانیم از آن استفاده کنیم که به صورت پویا فرم‌های خودمان را ایجاد کنیم و به سرور بفرستیم.

بیایید جزئیات بیشتری از آن‌ها ببینیم.

Event: submit

دو راه اصلی برای submit کردن یک فرم وجود دارد.

اولی – کلیک کردن <input type="submit"> یا <input type="image">.
دومی – فشار دادن Enter روی یک input field.

هر دو کار باعث submit event روی فرم می‌شوند. Handler می‌تواند داده را چک کند، و اگر خطاییی باشد، آن‌ها را نشان دهد و event.preventDefault() را فراخوانی کند، آنگاه فرم به سمت سرور ارسال نخواهد شد.

در فرم زیر:

به text field بعدی بروید و Enter را فشار دهید.
روی <input type="submit"> کلیک کنید.

هر دو فعالیت alert را نمایش می‌دهند و فرم به دلیل return false به هیچ جا فرستاده نمی‌شود:

          <form onsubmit="alert('submit!');return false">
  را بزنید enter ،input field  در <input type="text" value="text"><br>
  را کلیک کنید "submit" دوم: <input type="submit" value="Submit">
</form>

.فعال می‌شود <input type="submit"> روی click event فرستاده می‌شود یک Enter با input field وقتی که یک فرم در یک

این نسبتا خنده‌دار است زیرا هیچ کلیکی اصلا وجود نداشته است.

در اینجا نسخه‌ی نمایشی هست:

          <form onsubmit="return false">
 <input type="text" size="30" value="اینجا فوکوس کنید">
 <input type="submit" value="Submit" onclick="alert('click')">
</form>

Method: submit

برای اینکه یک فرم را به صورت دستی submit کنیم، می‌توانیم form.submit() را فراخوانی کنیم.

آنگاه submit event ایجاد نمی‌شود. تصور می‌شود که اگر برنامه‌نویس form.submit() را فراخونی کند، آنگاه script خودش تمام پردازش‌های مربوطه را انجام می‌دهد.

Sometimes that’s used to manually create and send a form, like this: گاهی اوقات معمول ایت است که یک فرم را با این روش ایجاد و ارسال کنند.

let form = document.createElement('form');
form.action = 'https://google.com/search';
form.method = 'GET';

form.innerHTML = '<input name="q" value="test">';

// شود submit باشد تا document فرم باید در
document.body.append(form);

form.submit();

تمارین

Modal form

یک function showPrompt(html, callback) ایجاد کنید که فرمی با پیام html، یک input field و دکمه‌های OK/CANCEL داشته باشد.

یک کاربر باید چیزی را در tex field تایپ کند و Enter را فشار دهد، آنگاه callback(value) با مقداری که وارد شده است فراخوانی می‌شود.
در غیر این صورت اگر کاربر Esc یا CANCEL را فشار دهد، callback(null) فراخوانی می‌شود.

در هر دو صورت،‌ این فرآیند input را تمام میکند و فرم را پاک میکند.

ملزومات:

فرم باید در وسط پنجره باشد.
فرم یک modal است. به عبارت دیگر، تا زمانی که کاربر آن را نبندد، هیچ تعاملی با بقیه‌ی صفحه مجاز نیست.
وقتی فرم نمایش داده می‌شود، focus برای کاربر باید درون <input> باشد.
کلیدهای Tab/Shift+Tab باید فوکوس را بین form fieldها جابه‌جا کنند و اجازه ندهند که به عناصر دیگر صفحه برود.

مثال از استفاده:

          showPrompt("Enter something<br>...smart :)", function(value) {
  alert(value);
});
        

نسخه‌ای نمایشی در iframe:

پی‌نوشت: source documentای که ارائه شده HTML/CSS برای فرم با fixed positioning را دارد، اما این بر عهده‌ی شماست که آن را به modal تبدیل کنید.

باز کردن یک sandbox برای تمرین.

یک modal window می‌تواند بااستفاده از یک <div id="cover-div"> نیمه‌شفاف که تمام پنچره را می‌پوشاند پیاده‌سازی شود،‌ مثل این:

          #cover-div {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0.3;
}
        

از آنجایی که <div> همه چیز را می‌پوشاند، آن تمام کلیک‌ها را می‌گیرد،نه صفحه‌ی زیر آن.

همچنین با body.style.overflowY='hidden' می‌توانیم از scroll کردن صفحه جلوگیری کنیم.

فرم نباید در <div> باشد، بلکه باید کنار آن باشد، زیرا نمی‌خواهیم که opacity داشته باشد.

باز کردن راه‌حل درون sandbox.

نقشه آموزش

نظرات

قبل از نظر دادن این را بخوانید…