How to get a key/value data set from a HTML form?

To get key/value data from an HTML form, you can use several approaches including jQuery's serializeArray(), vanilla JavaScript with FormData, or manual field extraction.

HTML Form Example

Let's start with a sample HTML form:

<form id="form1">
   <input type="text" name="username" value="john_doe" />
   <input type="email" name="email" value="john@example.com" />
   <input type="hidden" name="userId" value="123" />
</form>

Using jQuery serializeArray()

jQuery's serializeArray() returns an array of objects with name and value properties:

<form id="form1">
   <input type="text" name="username" value="john_doe" />
   <input type="email" name="email" value="john@example.com" />
   <input type="hidden" name="userId" value="123" />
</form>

<script>
// Using jQuery serializeArray()
var data = $('#form1').serializeArray();
console.log(data);

// Convert to key-value object
var formObject = {};
data.forEach(function(field) {
    formObject[field.name] = field.value;
});
console.log(formObject);
</script>

Using Vanilla JavaScript FormData

Modern browsers support FormData API for form data extraction:

<form id="form2">
   <input type="text" name="username" value="jane_doe" />
   <input type="email" name="email" value="jane@example.com" />
   <input type="hidden" name="userId" value="456" />
</form>

<script>
var form = document.getElementById('form2');
var formData = new FormData(form);

// Convert FormData to object
var dataObject = {};
formData.forEach(function(value, key) {
    dataObject[key] = value;
});
console.log(dataObject);

// Or convert to array format like jQuery
var dataArray = [];
formData.forEach(function(value, key) {
    dataArray.push({name: key, value: value});
});
console.log(dataArray);
</script>

Manual Field Extraction

For more control, you can manually extract form field values:

<form id="form3">
   <input type="text" name="username" value="admin" />
   <input type="email" name="email" value="admin@example.com" />
   <select name="role">
      <option value="user">User</option>
      <option value="admin" selected>Admin</option>
   </select>
</form>

<script>
function getFormData(formId) {
    var form = document.getElementById(formId);
    var elements = form.elements;
    var data = {};
    
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        if (element.name) {
            data[element.name] = element.value;
        }
    }
    
    return data;
}

var formData = getFormData('form3');
console.log(formData);
</script>

Comparison

Conclusion

Use jQuery's serializeArray() if you're already using jQuery, or FormData for modern vanilla JavaScript applications. Both approaches provide reliable key/value extraction from HTML forms.