Merge pull request #292 from shahrzadJavadiKoushesh/master-4

Forms: event and method submit

Author: mahdyar

2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md

@@ -1,4 +1,4 @@
-A modal window can be implemented using a half-transparent `<div id="cover-div">` that covers the whole window, like this:
+یک modal window می‌تواند بااستفاده از یک `<div id="cover-div">` نیمه‌شفاف که تمام پنچره را می‌پوشاند پیاده‌سازی شود،‌ مثل این:
 
 ```css
 #cover-div {
@@ -13,8 +13,8 @@ A modal window can be implemented using a half-transparent `<div id="cover-div">
 }
 ```
 
-Because the `<div>` covers everything, it gets all clicks, not the page below it.
+از آنجایی که `<div>` همه چیز را می‌پوشاند، آن تمام کلیک‌ها را می‌گیرد،نه صفحه‌ی زیر آن.
 
-Also we can prevent page scroll by setting `body.style.overflowY='hidden'`.
+همچنین با `body.style.overflowY='hidden'` می‌توانیم از scroll کردن صفحه جلوگیری کنیم.
 
-The form should be not in the `<div>`, but next to it, because we don't want it to have `opacity`.
+فرم نباید در `<div>` باشد، بلکه باید کنار آن باشد، زیرا نمی‌خواهیم که `opacity` داشته باشد.

2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md

@@ -4,30 +4,30 @@ importance: 5
 
 # Modal form
 
-Create a function `showPrompt(html, callback)` that shows a form with the message `html`, an input field and buttons `OK/CANCEL`.
+یک function `showPrompt(html, callback)` ایجاد کنید که فرمی با پیام `html`، یک input field و دکمه‌های `OK/CANCEL` داشته باشد.
 
-- A user should type something into a text field and press `key:Enter` or the OK button, then `callback(value)` is called with the value they entered.
-- Otherwise if the user presses `key:Esc` or CANCEL, then `callback(null)` is called.
+- یک کاربر باید چیزی را در tex field تایپ کند و `key:Enter` را فشار دهد، آنگاه `callback(value)` با مقداری که وارد شده است فراخوانی می‌شود. 
+- در غیر این صورت اگر کاربر `key:Esc` یا CANCEL را فشار دهد، `callback(null)` فراخوانی می‌شود.
 
-In both cases that ends the input process and removes the form.
+در هر دو صورت،‌ این فرآیند input را تمام میکند و فرم را پاک میکند.
 
-Requirements:
+ملزومات:
 
-- The form should be in the center of the window.
-- The form is *modal*. In other words, no interaction with the rest of the page is possible until the user closes it.
-- When the form is shown, the focus should be inside the `<input>` for the user.
-- Keys `key:Tab`/`key:Shift+Tab` should shift the focus between form fields, don't allow it to leave for other page elements.
+- فرم باید در وسط پنجره باشد.
+- فرم یک *modal* است. به عبارت دیگر، تا زمانی که کاربر آن را نبندد، هیچ تعاملی با بقیه‌ی صفحه مجاز نیست.
+- وقتی فرم نمایش داده می‌شود، focus برای کاربر باید درون `<input>` باشد.
+- کلیدهای `key:Tab`/`key:Shift+Tab` باید فوکوس را بین form fieldها جابه‌جا کنند و اجازه ندهند که به عناصر دیگر صفحه برود.
 
-Usage example:
+مثال از استفاده:
 
 ```js
 showPrompt("Enter something<br>...smart :)", function(value) {
   alert(value);
 });
 ```
 
-A demo in the iframe:
+نسخه‌ای نمایشی در iframe:
 
 [iframe src="solution" height=160 border=1]
 
-P.S. The source document has HTML/CSS for the form with fixed positioning, but it's up to you to make it modal.
+پی‌نوشت: source documentای که ارائه شده HTML/CSS برای فرم با fixed positioning را دارد، اما این بر عهده‌ی شماست که آن را به modal تبدیل کنید.

2-ui/4-forms-controls/4-forms-submit/article.md

@@ -1,42 +1,42 @@
-# Forms: event and method submit
+# فرم‌ها: event و method submit
 
-The `submit` event triggers when the form is submitted, it is usually used to validate the form before sending it to the server or to abort the submission and process it in JavaScript.
+معمولا `submit` event زمانی فعال می‌شود که یک فرم submit می‌شود. معمولا برای اعتبارسنجی فرم قبل از اینکه به سمت سرور فرستاده شود یا لغو و پردازش آن در JavaScript استفاده می‌شود.  
 
-The method `form.submit()` allows to initiate form sending from JavaScript. We can use it to dynamically create and send our own forms to server.
+متد `form.submit()` اجازه می‌دهد که فرستادن فرم از JavaScript آغاز شود. ما می‌توانیم از آن استفاده کنیم که به صورت پویا فرم‌های خودمان را ایجاد کنیم و به سرور بفرستیم.
 
-Let's see more details of them.
+بیایید جزئیات بیشتری از آن‌ها ببینیم.
 
 ## Event: submit
 
-There are two main ways to submit a form:
+دو راه اصلی برای submit کردن یک فرم وجود دارد. 
 
-1. The first -- to click `<input type="submit">` or `<input type="image">`.
-2. The second -- press `key:Enter` on an input field.
+1. اولی -- کلیک کردن `<input type="submit">` یا `<input type="image">`.
+2. دومی -- فشار دادن `key:Enter` روی یک input field.
 
-Both actions lead to `submit` event on the form. The handler can check the data, and if there are errors, show them and call `event.preventDefault()`, then the form won't be sent to the server.
+هر دو کار باعث `submit` event روی فرم می‌شوند. Handler می‌تواند داده را چک کند، و اگر خطاییی باشد، آن‌ها را نشان دهد و `event.preventDefault()` را فراخوانی کند، آنگاه فرم به سمت سرور ارسال نخواهد شد.
 
-In the form below:
-1. Go into the text field and press `key:Enter`.
-2. Click `<input type="submit">`.
+در فرم زیر:
+1. به text field بعدی بروید و `key:Enter` را فشار دهید. 
+2. روی `<input type="submit">` کلیک کنید. 
 
-Both actions show `alert` and the form is not sent anywhere due to `return false`:
+هر دو فعالیت `alert` را نمایش می‌دهند و فرم به دلیل `return false` به هیچ جا فرستاده نمی‌شود: 
 
 ```html autorun height=60 no-beautify
 <form onsubmit="alert('submit!');return false">
-  First: Enter in the input field <input type="text" value="text"><br>
-  Second: Click "submit": <input type="submit" value="Submit">
+  را بزنید enter ،input field  در <input type="text" value="text"><br>
+  را کلیک کنید "submit" دوم: <input type="submit" value="Submit">
 </form>
 ```
 
-````smart header="Relation between `submit` and `click`"
-When a form is sent using `key:Enter` on an input field, a `click` event triggers on the `<input type="submit">`.
+````smart header="`click` و `submit` ارتباط میان"
+.فعال می‌شود `<input type="submit">` روی `click` event فرستاده می‌شود یک `key:Enter` با input field وقتی که یک فرم در یک
 
-That's rather funny, because there was no click at all.
+این نسبتا خنده‌دار است زیرا هیچ کلیکی اصلا وجود نداشته است.
 
-Here's the demo:
+در اینجا نسخه‌ی نمایشی هست:
 ```html autorun height=60
 <form onsubmit="return false">
- <input type="text" size="30" value="Focus here and press enter">
+ <input type="text" size="30" value="اینجا فوکوس کنید">
  <input type="submit" value="Submit" *!*onclick="alert('click')"*/!*>
 </form>
 ```
@@ -45,11 +45,12 @@ Here's the demo:
 
 ## Method: submit
 
-To submit a form to the server manually, we can call `form.submit()`.
+برای اینکه یک فرم را به صورت دستی submit کنیم، می‌توانیم `form.submit()` را فراخوانی کنیم.
 
-Then the `submit` event is not generated. It is assumed that if the programmer calls `form.submit()`, then the script already did all related processing.
+آنگاه `submit` event ایجاد نمی‌شود. تصور می‌شود که اگر برنامه‌نویس `form.submit()` را فراخونی کند، آنگاه script خودش تمام پردازش‌های مربوطه را انجام می‌دهد.
 
 Sometimes that's used to manually create and send a form, like this:
+گاهی اوقات معمول ایت است که یک فرم را با این روش ایجاد و ارسال کنند.
 
 ```js run
 let form = document.createElement('form');
@@ -58,7 +59,7 @@ form.method = 'GET';
 
 form.innerHTML = '<input name="q" value="test">';
 
-// the form must be in the document to submit it
+// شود submit باشد تا document فرم باید در
 document.body.append(form);
 
 form.submit();