Tutorials › jQuery in Practice › Form Handling

Form Handling

5 min read Quiz at the end

Get input values with val(). serialize() converts a form to a URL-encoded string for AJAX. serializeArray() returns an array of name/value objects for custom processing in JavaScript.

Forms with jQuery

// Get values
$('input#name').val();
$('select').val();
$('textarea').val();

// Serialize form
$('form').serialize();       // URL-encoded string
$('form').serializeArray(); // array of objects

// Submit via AJAX
$('form').on('submit', function(e) {
  e.preventDefault();
  $.post('/submit', $(this).serialize());
});

← Attributes and Data Next: DOM Creation →

Topic Quiz · 5 questions

Test your understanding before moving on

1. Which method gets a form input value?

💡 .val() gets or sets the value of form elements.

2. Which method serializes a form?

💡 .serialize() encodes form values as a URL-encoded string.

3. How do you prevent a form from submitting?

💡 e.preventDefault() stops the default browser action (form submit).

4. What does .serializeArray() return?

💡 .serializeArray() returns an array of objects with name and value properties.

5. Which event fires when a form is submitted?

💡 The submit event fires when a form is submitted via button click or Enter key.

Quick Access

Form Handling

Forms with jQuery

Test your understanding before moving on