Encode a set of form elements as a string for submission.

.serialize()🡢 String

The .serialize() method creates a text string in standard URL-encoded notation. It can act on a jQuery object that has selected individual form controls, such as <input>, <textarea>, and <select>: $( "input, textarea, select" ).serialize();

It is typically easier, however, to select the <form> itself for serialization:

$("form").on("submit", function (event) {

In this case, jQuery serializes the successful controls within the form. Only form elements are examined for inputs they contain, in all other cases the input elements to be serialized should be part of the set passed to the .serialize() method. Selecting both the form and its children in a set will cause duplicates in the serialized string.

Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.

Serialize a form to a query string that could be sent to a server in an Ajax request.

  <select name="single">

  <br />
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option selected="selected">Multiple3</option>

  <br />
  <input type="checkbox" name="check" value="check1" id="ch1" />
  <label for="ch1">check1</label>
  <label for="ch2">check2</label>

  <br />
  <input type="radio" name="radio" value="radio1" checked="checked" id="r1" />
  <label for="r1">radio1</label>
  <input type="radio" name="radio" value="radio2" id="r2" />
  <label for="r2">radio2</label>

<p><tt id="results"></tt></p>
select {
  font-size: 12px;
form {
  margin: 5px;
p {
  color: red;
  margin: 5px;
  font-size: 14px;
b {
  color: blue;
function showValues() {
  var str = $("form").serialize();
$("input[type='checkbox'], input[type='radio']").on("click", showValues);
$("select").on("change", showValues);

Looking for a Web Developer?


Hi! I'm Basti, author of this site. If you are looking for a web developer with 15+ years of experience, holla at me!

Be it the good 'ol jQuery, vanilla JS or modern frameworks like Vue and Svelte, front- or backend, I can help you.

Just write me at jobs@jqapi.com :)