jsKjs Get jsKjs

Core · jQuery-compatible

Forms & serialization

.serialize() gives you name=Ada&plan=pro; .serializeObject() gives you { name: 'Ada', plan: 'pro' }. Both read the browser's own FormData.

Because serialization uses FormData, it follows the browser's rules exactly: disabled fields are skipped, unchecked checkboxes are omitted, and multi-selects contribute one entry per selected option (.serializeObject() keeps the last; use new FormData(form).getAll(name) for all of them).

Prefer HTML? <form kj-post="/api/save"> does the same thing with no JavaScript at all — see declarative requests.

Live · Live serialization + server echo




  
  
View the source for this demo
HTML
<form id="sf" class="grid g3" style="gap:12px">
  <div class="field"><label for="sf-name">Name</label><input id="sf-name" name="name" type="text" value="Ada"></div>
  <div class="field"><label for="sf-plan">Plan</label><select id="sf-plan" name="plan"><option>free</option><option selected>pro</option><option>team</option></select></div>
  <label style="align-self:end;padding-bottom:10px"><input type="checkbox" name="newsletter" value="yes" checked> Newsletter</label>
  <div style="grid-column:1/-1"><button type="submit">Submit with $.post</button></div>
</form>
<pre class="out" id="sf-live" aria-live="off"></pre>
<div id="sf-server" aria-live="polite"></div>
JavaScript
const show = () => $('#sf-live').text(
  '.serialize()       → "' + $('#sf').serialize() + '"\n' +
  '.serializeObject() → ' + JSON.stringify($('#sf').serializeObject()));

$('#sf').on('input change', show);

$('#sf').on('submit', async e => {
  e.preventDefault();
  $('#sf-server').html(await $.post('/api/echo.php', $('#sf').serializeObject()));
});

show();



  
More examples
Send as JSON instead
JavaScript
await $.ajax({ url: '/api/profile', method: 'PUT', data: $('#profile').serializeObject(), json: true });

  
API
.serialize() → string
URL-encode a form’s fields.
Reference: .serialize() →
.serializeObject() → object
A form’s fields as a plain object (jsKjs extra).
Reference: .serializeObject() →
.val([value]) → any | self
Get or set form values. Checkboxes read/write booleans; multi-selects read as arrays.
Reference: .val() →
$.post(url [, data] [, success]) → Promise
POST shorthand (urlencoded body by default).
Reference: $.post() →

  
Migrating
Coming from jQuery.serializeArray() is not included; .serializeObject() (a jsKjs extra) covers the common case.

  
Related features
Hyper
Declarative requests
Make GET, POST, PUT, PATCH and DELETE requests straight from HTML with kj-get, kj-post and friends — htmx-style hypermedia with zero JavaScript.
Open →Hyper
Sending extra data
Send more than the element itself: kj-include adds another form's fields, kj-vals adds literal JSON values.
Open →Pulse
Two-way binding
Bind form controls to state in both directions with kj-model — text, number, range, checkbox, radio and select.
Open →