JavaScript'te FormData ile Çalışmak

Diyelim ki bir formumuz var:

<form action="/target/" method="POST">
	<input name="test1" value="123">
	<input name="test2" value="456">
	<input type="submit">
</form>

Bu formun verilerini anahtar-değer çiftleri olarak almak istediğimizi varsayalım. Bunun için bir döngü çalıştırmamız ve içinde istediğimizi oluşturmamız gerekeceği açıktır. Ancak JavaScript'te daha basit bir yolu var - form verilerini düzenli bir şekilde almamızı sağlayan özel bir FormData nesnesi kullanabiliriz.

Bu nesneyle çalışmayı inceleyelim. Öncelikle formumuza bir referans alalım:

let form = document.querySelector('form');

Şimdi formumuzla bir nesne oluşturalım:

let formData = new FormData(form);

Nesnemizi konsola yazdırabiliriz, ancak bu şekilde yazdırdığımızda form verilerini göremeyiz:

console.log(formData);

Form verilerini görmek için nesnemizi bir diziye dönüştürelim:

console.log(Array.from(formData));

Üç giriş alanı olan bir form verildi. Ayrıca bir buton verildi. Butona tıklandığında form verilerini FormData nesnesi olarak alın.