Form gönderme: Olay veya metod olarak

Form gönderildiğinde submit olayı tetiklenir, genellikle formu sunucuya göndermeden önce doğrulamak veya gönderimi iptal edip JavaScript’te işlemek için kullanılır.

form.submit() metodu JavaScript’ten form gönderimini başlatmaya izin verir. Kendi formlarımızı dinamik olarak oluşturmak ve sunucuya göndermek için kullanabiliriz.

Daha fazla ayrıntı görelim.

Olay olarak submit kullanımı

Form göndermenin iki ana yolu vardır:

Birincisi – <input type="submit"> veya <input type="image"> alanlarına tıklamak.
İkincisi – bir giriş alanında (input) Entera basmak.

Her iki eylem de formda olay gönderilmesine yol açar. İşleyici verileri kontrol edebilir ve hata varsa bunları gösterebilir ve event.preventDefault() öğesini çağırabilir, bu durumda form sunucuya gönderilmez.

Aşağıdaki formda:

Metin alanına gidin ve Enter tuşuna basın.
Tıklayın <input type="submit">

Her iki eylem de alert gösterir ve return false olduğu için form hiçbir yere gönderilmez.

          <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">
</form>

Bir input alanında Enter kullanılarak bir form gönderildiğinde, <input type="submit"> üzerinde bir click olayı tetiklenir.

Bu oldukça komik çünkü hiç tıklama yoktu.

Örnek:

          <form onsubmit="return false">
 <input type="text" size="30" value="Buraya tıkla ve bir şeyler yaz sonra enter'e bas">
 <input type="submit" value="Submit" onclick="alert('click')">
</form>

Metod olarak submit kullanımı

Sunucuya manuel olarak bir form göndermek için, form.submit() metodunu kullanabiliriz.

Sonra herhangi bir submit olayı oluşturulmaz. Programcı form.submit() 'i çağırırsa, komut dosyasının tüm ilgili işlemleri zaten yaptığı varsayılır. Bazen bu, aşağıdaki gibi bir formu manuel olarak oluşturmak ve göndermek için kullanılır:

let form = document.createElement('form');
form.action = 'https://google.com/search';
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();

Görevler

Modal form

Create a function showPrompt(html, callback) that shows a form with the message html, an input field and buttons OK/CANCEL.

A user should type something into a text field and press Enter or the OK button, then callback(value) is called with the value they entered.
Otherwise if the user presses Esc or CANCEL, then callback(null) is called.

In both cases that ends the input process and removes the form.

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 Tab/Shift+Tab should shift the focus between form fields, don’t allow it to leave for other page elements.

Usage example:

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

A demo in the iframe:

P.S. The source document has HTML/CSS for the form with fixed positioning, but it’s up to you to make it modal.

Görevler için korunaklı alan aç.

A modal window can be implemented using a half-transparent <div id="cover-div"> that covers the whole window, like this:

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

Because the <div> covers everything, it gets all clicks, not the page below it.

Also we can prevent page scroll by setting body.style.overflowY='hidden'.

The form should be not in the <div>, but next to it, because we don’t want it to have opacity.

Çözümü korunaklı alanda aç.

Yorumlar

yorum yapmadan önce lütfen okuyun...