Form Handling

Learning objectives#

• Handle the submit event and prevent page reloads
• Read text, select, radio and checkbox values
• Collect a whole form with serialize() and serializeArray()
• Reset and disable forms during submission

Explanation#

Listen to the form’s submit event, not the button’s click: it also fires when the user presses Enter. Call e.preventDefault() if JavaScript handles the submission.

Text, textarea and select: .val(). Radio: $("input[name=size]:checked").val(). Checkbox: .prop("checked"), or collect all checked values with .map().

.serialize() turns a form into a URL-encoded string (name=Asha&size=M), ready for $.post. .serializeArray() gives [{ name, value }, ...] which you can turn into an object.

Only fields with a name attribute are serialised, and disabled fields are skipped.

Disable the submit button while sending to prevent double submissions; this.reset() clears the form (it is a DOM method, so call it on the element).

Syntax#

1$('#form').on('submit', function (e) {
2  e.preventDefault();
3  const data = $(this).serialize();   // "name=Asha&size=M"
4});

Code example: A T-shirt order form#

1<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
2<form id="order" style="font-family:sans-serif">
3  <input name="name" placeholder="Name" value="Asha">
4  <select name="colour"><option>White</option><option selected>Black</option></select>
5  <label><input type="radio" name="size" value="S"> S</label>
6  <label><input type="radio" name="size" value="M" checked> M</label>
7  <label><input type="checkbox" name="extras" value="gift" checked> Gift wrap</label>
8  <label><input type="checkbox" name="extras" value="express"> Express</label>
9  <button type="submit">Order</button>
10</form>
11<script>
12  $(function () {
13    $('#order').on('submit', function (e) {
14      e.preventDefault();
15      const $f = $(this);
16      console.log('Name:', $f.find('[name=name]').val());
17      console.log('Colour:', $f.find('[name=colour]').val());
18      console.log('Size:', $f.find('[name=size]:checked').val());
19      const extras = $f.find('[name=extras]:checked').map(function () { return this.value; }).get();
20      console.log('Extras:', extras.join(', '));
21      console.log('Serialized:', $f.serialize());
22    });
23  });
24</script>

Name: Asha
Colour: Black
Size: M
Extras: gift
Serialized: name=Asha&colour=Black&size=M&extras=gift

Step-by-step explanation#

1. The submit handler runs for both the button click and pressing Enter.
2. preventDefault stops the page from reloading.
3. [name=size]:checked finds the selected radio.
4. .map(...).get() turns checked checkboxes into a plain array of values.
5. serialize() produces a query string with every named, enabled field.

Real-world use case#

Common mistakes#

Best practices#

• Handle submit, not click
• Name every field
• Disable the button while sending
• Validate on both client and server

Remember this#

Practice exercise#

1<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
2<form id="f"><input name="name" value="Ravi"><input name="email" value="ravi@example.com"><button>Send</button></form>
3<script>
4  $(function () {
5    $('#f').on('submit', function (e) {
6      e.preventDefault();
7      const obj = $(this).serializeArray().reduce((o, f) => { o[f.name] = f.value; return o; }, {});
8      console.log(obj);   // { name: 'Ravi', email: 'ravi@example.com' }
9    });
10  });
11</script>

Mini quiz#

Want more? Practise all jQuery MCQs · jQuery interview questions

Related topics#

My notes#

Saved in this browser.