Today I wanna talk about HTML Form element, ’cause I learnt about the Web API – FormData

We all can’t be more familiar with HTML Form elements, when we try to accquire data from those input elements inside this form, we usually have three options:

1. iterare all form.elements then retrieve their value</p>

2. using libraries, like jQuery, serialize() or .serializeArray() method

3. FormData

The third way is pretty new to me, so let’s take a good look at it.

---

The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to “multipart/form-data”.

An object implementing FormData can directly be used in a for…of structure, instead of entries(): for (var p of myFormData) is equivalent to for (var p of myFormData.entries()).

FormData

Constructor:

• FormData()

Creates a new FormData object.

Methods:

• FormData.append()

Appends a new value onto an existing key inside a FormData object, or adds the key if it does not already exist.

• FormData.delete()

Deletes a key/value pair from a FormData object.

• FormData.entries()

Returns an iterator allowing to go through all key/value pairs contained in this object.

• FormData.get()

Returns the first value associated with a given key from within a FormData object.

• FormData.getAll()

Returns an array of all the values associated with a given key from within a FormData.

• FormData.has()

Returns a boolean stating whether a FormData object contains a certain key/value pair.

• FormData.keys()

Returns an iterator allowing to go through all keys of the key/value pairs contained in this object.

• FormData.set()

Sets a new value for an existing key inside a FormData object, or adds the key/value if it does not already exist.

• FormData.values()

Returns an iterator allowing to go through all values of the key/value pairs contained in this object.

---

Examples:

<form id="myForm" >
    <ul>
        <li><label>name:</label><input type="text" name="name"></li>
        <li><label>male:</label><input type="radio" name="sex" value="1">
            <label>female:</label><input type="radio" name="sex" value="0"></li>
        <li></li><label>telephone:</label><input type="tel" name="tel"></li>
        <li></li><button type="submit" onclick="print()">submit</button></li>
    </ul>
</form>

<br />function print() {
    window.event.preventDefault()

    var form = document.querySelector('#myForm')
    var formData = new FormData(form)

    //do you still remember the iterable protocol?
    var it = formData.entries()
    while( true )  {
        let next = it.next()
        if(next.done)
            break
        let item = next.value
        console.log("name= "+item[0]+", value= "+item[1])   
    }

    console.log('---')

    //for (item of formData.entries()) {
    for(item of formData) {
        console.log("name= " + item[0] + ", value= " + item[1])   
    }

}

//output:
/*

name= name, value= steven
name= sex, value= 1
name= tel, value= 123456
---
name= name, value= steven
name= sex, value= 1
name= tel, value= 123456

*/

---

LINKS:

FormData