Skip to content

Forms: event and method submit #176

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 1, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 22 additions & 22 deletions 2-ui/4-forms-controls/4-forms-submit/article.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
# Forms: event and 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` ইভেন্ট সংগঠিত হয়, সাধারণত সার্ভারে রিকুয়েস্ট সেন্ডের পূর্বে ভ্যালিডেশনের জন্য এটি ব্যবহার করা হয়।

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()` মেথড এর মাধ্যমে সার্ভারে রিকেয়েস্ট পাঠানো হয়। যখন ডায়নামিক্যালি আমরা ফর্ম তৈরি করি তখন এই মেথডটির সাহায্যে রিকেয়েস্ট পাঠানো হয়।

Let's see more details of them.
চলুন আরো বিস্তারিত জানা যাক।

## Event: submit
## ইভেন্ট: submit

There are two main ways to submit a form:
সাধারণত দুইভাবে আমরা ফর্ম সাবমিট করতে পারি:

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` প্রেসের মাধ্যমে।

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.preventDefault()` এর মাধ্যমে সাবমিট থামাতে পারি, ফলে ডাটা ডাটা সার্ভারে যাবে না।

In the form below:
1. Go into the text field and press `key:Enter`.
2. Click `<input type="submit">`.
নিচের ফর্মে:
1. টেক্সট ফিল্ডে ফোকাস করুন অতঃপর `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">
Expand All @@ -28,12 +28,12 @@ Both actions show `alert` and the form is not sent anywhere due to `return false
</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="`submit` এবং `click` এর মাঝে সম্পর্ক"
যখন কোন ইনপুট ফিল্ডে `key:Enter` প্রেসের মাধ্যমে ফর্ম সাবমিট করা হয়, তখন `<input type="submit">` এ একটি `click` ইভেন্ট সংগঠিত হয়।

That's rather funny, because there was no click at all.
ব্যাপারটা কেমন বিদঘুটে না? আমরা কোন ক্লিক করিনি তারপরও `click` ইভেন্ট সংগঠিত হয়।

Here's the demo:
এখানে দেখুন:
```html autorun height=60
<form onsubmit="return false">
<input type="text" size="30" value="Focus here and press enter">
Expand All @@ -43,13 +43,13 @@ Here's the demo:

````

## Method: submit
## মেথড: submit

To submit a form to the server manually, we can call `form.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` ইভেন্টটি সংগঠিত হয় না। কেননা `form.submit()` কল করা প্রোগ্রামের মাধ্যমে, সুতরাং আমরা ধরে নিতে পারি ডেভলাপার সকল ভ্যালিডেশন করার পর এই মেথডটি কল করছে।

Sometimes that's used to manually create and send a form, like this:
অনেক সময় স্ক্রিপ্টের মাধ্যমে ফর্ম তৈরি করে তা সাবমিটের জন্য আমরা এটি ব্যবহার করি, নিচে একটি উদাহরণ দেয়া হল:

```js run
let form = document.createElement('form');
Expand All @@ -58,7 +58,7 @@ form.method = 'GET';

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

// the form must be in the document to submit it
// ফর্মটি সাবমিট করার জন্য অবশ্যই এটি ডকুমেন্টের নোড হতে হবে
document.body.append(form);

form.submit();
Expand Down