formulario serializar javascript (sin marco)

¿Me pregunto si existe una función en javascript sin jquery o algún marco que me permita serializar el formulario y acceder a la versión serializada?

Jul 26 '12 08:07 RussellHarrower

Actualización 2023:

Usar `FormData`:

const form = document.querySelector('form');
const params = new FormData(form);
const request = new XMLHttpRequest();
request.send(params);

Aunque parece funcionar sólo para POSTsolicitudes.

Oct 22 '2014 06:10 Artur INTECH

Solo para navegadores modernos

Si apunta a navegadores que admiten la URLSearchParamsAPI ( navegadores más recientes ) y FormData(formElement)el constructor ( navegadores más recientes ), use esto:

new URLSearchParams(new FormData(formElement)).toString()

En todas partes excepto IE

Para los navegadores que admiten URLSearchParamspero no el FormData(formElement)constructor, utilice este polyfill de FormData y este código (funciona en todas partes excepto en IE):

new URLSearchParams(Array.from(new FormData(formElement))).toString()

Ejemplo

Mostrar fragmento de código

var form = document.querySelector('form');
var out = document.querySelector('output');

function updateResult() {
  try {
    out.textContent = new URLSearchParams(Array.from(new FormData(form)));
    out.className = '';
  } catch (e) {
    out.textContent = e;
    out.className = 'error';
  }
}

updateResult();
form.addEventListener('input', updateResult);

body { font-family: Arial, sans-serif; display: flex; flex-wrap: wrap; }
input[type="text"] { margin-left: 6px; max-width: 30px; }
label + label { margin-left: 10px; }
output { font-family: monospace; }
.error { color: #c00; }
div { margin-right: 30px; }

<!-- FormData polyfill for older browsers -->
<script src="https://unpkg.com/[email protected]/formdata.min.js"></script>
<div>
  <h3>Form</h3>
  <form id="form">
    <label>x:<input type="text" name="x" value="1"></label>
    <label>y:<input type="text" name="y" value="2"></label>
    <label>
    z:
    <select name="z">
      <option value="a" selected>a</option>
      <option value="b" selected>b</option>
    </select>
  </label>
  </form>
</div>
<div>
  <h3>Query string</h3>
  <output for="form"></output>
</div>

Expandir fragmento

Compatible con IE 10

Para navegadores aún más antiguos (por ejemplo, IE 10), utilice el polyfill FormData , un Array.frompolyfill si es necesario y este código:

Array.from(
  new FormData(formElement),
  function(e) { return e.map(encodeURIComponent).join('='); }
).join('&')

May 17 '2017 19:05 glebm

La biblioteca en miniatura de serialización no depende de un marco. Aparte de algo así, necesitarás implementar la función de serialización tú mismo. (aunque con un peso de 1,2 kilobytes, ¿por qué no usarlo?)

Jul 26 '2012 01:07 Lusitanian