Интересно, есть ли функция в javascript без jquery или какой-либо инфраструктуры, которая позволяет мне сериализовать форму и получить доступ к сериализованной версии?
Form serialize javascript (без рамки)
Ответ 1
Миниатюрная библиотека from-serialize не использует фреймворк. В остальном вам нужно реализовать функцию сериализации самостоятельно. (хотя при весе 1,2 килобайта, почему бы не использовать его?)
Ответ 2
Вот чистый подход к JavaScript:
var form = document.querySelector('form');
var data = new FormData(form);
var req = new XMLHttpRequest();
req.send(data);
Хотя он работает только для запросов POST.
Ответ 3
Только для современных браузеров
Если вы нацелены на браузеры, которые поддерживают API URLSearchParams (самые последние браузеры) и конструктор FormData(formElement) (самые последние браузеры, кроме Edge), используйте это:
new URLSearchParams(new FormData(formElement)).toString()
Везде, кроме IE
Для браузеров, которые поддерживают URLSearchParams но не конструктор FormData(formElement), используйте этот polyfill FormData и этот код (работает везде, кроме IE):
new URLSearchParams(Array.from(new FormData(formElement))).toString()
пример
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>Ответ 4
function serialize (form) {
if (!form || form.nodeName !== "FORM") {
return;
}
var i, j, q = [];
for (i = form.elements.length - 1; i >= 0; i = i - 1) {
if (form.elements[i].name === "") {
continue;
}
switch (form.elements[i].nodeName) {
case 'INPUT':
switch (form.elements[i].type) {
case 'text':
case 'tel':
case 'email':
case 'hidden':
case 'password':
case 'button':
case 'reset':
case 'submit':
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
break;
case 'checkbox':
case 'radio':
if (form.elements[i].checked) {
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
}
break;
}
break;
case 'file':
break;
case 'TEXTAREA':
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
break;
case 'SELECT':
switch (form.elements[i].type) {
case 'select-one':
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
break;
case 'select-multiple':
for (j = form.elements[i].options.length - 1; j >= 0; j = j - 1) {
if (form.elements[i].options[j].selected) {
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].options[j].value));
}
}
break;
}
break;
case 'BUTTON':
switch (form.elements[i].type) {
case 'reset':
case 'submit':
case 'button':
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
break;
}
break;
}
}
return q.join("&");
}
Источник: http://code.google.com/p/form-serialize/source/browse/trunk/serialize-0.1.js
Ответ 5
Здесь немного измененная версия TibTibs:
function serialize(form) {
var field, s = [];
if (typeof form == 'object' && form.nodeName == "FORM") {
var len = form.elements.length;
for (i=0; i<len; i++) {
field = form.elements[i];
if (field.name && !field.disabled && field.type != 'file' && field.type != 'reset' && field.type != 'submit' && field.type != 'button') {
if (field.type == 'select-multiple') {
for (j=form.elements[i].options.length-1; j>=0; j--) {
if(field.options[j].selected)
s[s.length] = encodeURIComponent(field.name) + "=" + encodeURIComponent(field.options[j].value);
}
} else if ((field.type != 'checkbox' && field.type != 'radio') || field.checked) {
s[s.length] = encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value);
}
}
}
}
return s.join('&').replace(/%20/g, '+');
}
Отключенные поля отбрасываются, а имена также кодируются URL. Regex заменяет %20 символов имеет место только один раз, перед возвратом строки.
Строка запроса находится в идентичной форме с результатом метода jQuery $.serialize().
Ответ 6
Я начал с ответа от Johndave Decano.
Это должно исправить несколько вопросов, упомянутых в ответах на его функцию.
- Замените %20 символом +.
- Отправить/Типы кнопок будут представлены только в том случае, если они были нажаты отправьте форму. Кнопки
- Reset будут проигнорированы.
- Код казался излишним для меня, поскольку он делает по существу независимо от типов полей. Не говоря уж о несовместимость с типами полей HTML5, такими как "tel" и "электронная почта", таким образом, я исключил большинство спецификаций с помощью операторов switch.
Типы кнопок будут по-прежнему игнорироваться, если они не имеют значения имени.
function serialize(form, evt){
var evt = evt || window.event;
evt.target = evt.target || evt.srcElement || null;
var field, query='';
if(typeof form == 'object' && form.nodeName == "FORM"){
for(i=form.elements.length-1; i>=0; i--){
field = form.elements[i];
if(field.name && field.type != 'file' && field.type != 'reset'){
if(field.type == 'select-multiple'){
for(j=form.elements[i].options.length-1; j>=0; j--){
if(field.options[j].selected){
query += '&' + field.name + "=" + encodeURIComponent(field.options[j].value).replace(/%20/g,'+');
}
}
}
else{
if((field.type != 'submit' && field.type != 'button') || evt.target == field){
if((field.type != 'checkbox' && field.type != 'radio') || field.checked){
query += '&' + field.name + "=" + encodeURIComponent(field.value).replace(/%20/g,'+');
}
}
}
}
}
}
return query.substr(1);
}
Вот как я сейчас использую эту функцию.
<form onsubmit="myAjax('http://example.com/services/email.php', 'POST', serialize(this, event))">
Ответ 7
Если вам нужно отправить форму "myForm" с помощью POST в формате json, вы можете сделать:
const formEntries = new FormData(myForm).entries();
const json = Object.assign(...Array.from(formEntries, ([x,y]) => ({[x]:y})));
fetch('/api/foo', {
method: 'POST',
body: JSON.stringify(json)
});
Вторая строка преобразует из массива, как:
[["firstProp", "firstValue"], ["secondProp", "secondValue"], ...and so on... ]
... в обычный объект, как:
{"firstProp": "firstValue", "secondProp": "secondValue", ...and so on ... }
... он выполняет это преобразование, передавая mapFn в Array.from(). Этот mapFn применяется к каждой паре ["a", "b"] и преобразует их в {"a": "b"}, так что массив содержит множество объектов с только одним свойством в каждой. MapFn использует "destructuring" для получения имен первой и второй частей пары, а также использует ES6 "ComputedPropertyName" для установки имени свойства в объекте, возвращаемом mapFn (вот почему он говорит "[ х]: что-то ", а не просто" х: что-то ".
Все эти объекты с одним свойством затем передаются в аргументы функции Object.assign(), которая объединяет все объекты с одним свойством в один объект со всеми свойствами.
Array.from(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from
Разрушение в параметрах: https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6/
Подробнее об именах вычисляемых свойств здесь: Переменная как имя свойства в литерале объекта JavaScript?
Ответ 8
Работает во всех браузерах.
const formSerialize = formElement => {
const values = {};
const inputs = formElement.elements;
for (let i = 0; i < inputs.length; i++) {
values[inputs[i].name] = inputs[i].value;
}
return values;
}
const dumpValues = form => () => {
const r = formSerialize(form);
console.log(r);
console.log(JSON.stringify(r));
}
const form = document.querySelector('form');
dumpValues(form)();
form.addEventListener('change',dumpValues(form));<form action="/my-handling-form-page" method="post">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" value="John">
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_mail" value="[email protected]">
</div>
<div>
<label for="interests">Interest:</label>
<select required="" id="interests" name="interests">
<option value="" selected="selected">- None -</option>
<option value="drums">Drums</option>
<option value="js">Javascript</option>
<option value="sports">Sports</option>
<option value="trekking">Trekking</option>
</select>
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message">Hello My Friend</textarea>
</div>
</form>Ответ 9
Если вы хотите сериализовать входы на событие. Здесь используется чистый JavaScript-подход.
// serialize form
var data = {};
var inputs = [].slice.call(e.target.getElementsByTagName('input'));
inputs.forEach(input => {
data[input.name] = input.value;
});
Данные будут объектом JavaScript входов.
Ответ 10
Реорганизованная версия кода @SimonSteinberger с использованием меньших переменных и использование скорости циклов forEach (которые немного быстрее, чем for s)
function serialize(form) {
var result = [];
if (typeof form === 'object' && form.nodeName === 'FORM')
Array.prototype.slice.call(form.elements).forEach(function(control) {
if (
control.name &&
!control.disabled &&
['file', 'reset', 'submit', 'button'].indexOf(control.type) === -1
)
if (control.type === 'select-multiple')
Array.prototype.slice.call(control.options).forEach(function(option) {
if (option.selected)
result.push(encodeURIComponent(control.name) + '=' + encodeURIComponent(option.value));
});
else if (
['checkbox', 'radio'].indexOf(control.type) === -1 ||
control.checked
) result.push(encodeURIComponent(control.name) + '=' + encodeURIComponent(control.value));
});
return result.join('&').replace(/%20/g, '+');
}
Ответ 11
HTMLElement.prototype.serialize = function(){
var obj = {};
var elements = this.querySelectorAll( "input, select, textarea" );
for( var i = 0; i < elements.length; ++i ) {
var element = elements[i];
var name = element.name;
var value = element.value;
if( name ) {
obj[ name ] = value;
}
}
return JSON.stringify( obj );
}
Чтобы использовать следующее:
var dataToSend = document.querySelector("form").serialize();
Надеюсь, я помог.
Ответ 12
Я реорганизовал ответ TibTibs во что-то более читающее. Это немного длиннее из-за ширины 80 символов и нескольких комментариев.
Кроме того, он игнорирует имена пустых полей и пустые значения.
// Serialize the specified form into a query string.
//
// Returns a blank string if +form+ is not actually a form element.
function $serialize(form, evt) {
if(typeof(form) !== 'object' && form.nodeName !== "FORM")
return '';
var evt = evt || window.event || { target: null };
evt.target = evt.target || evt.srcElement || null;
var field, query = '';
// Transform a form field into a query-string-friendly
// serialized form.
//
// [NOTE]: Replaces blank spaces from its standard '%20' representation
// into the non-standard (though widely used) '+'.
var encode = function(field, name) {
if (field.disabled) return '';
return '&' + (name || field.name) + '=' +
encodeURIComponent(field.value).replace(/%20/g,'+');
}
// Fields without names can't be serialized.
var hasName = function(el) {
return (el.name && el.name.length > 0)
}
// Ignore the usual suspects: file inputs, reset buttons,
// buttons that did not submit the form and unchecked
// radio buttons and checkboxes.
var ignorableField = function(el, evt) {
return ((el.type == 'file' || el.type == 'reset')
|| ((el.type == 'submit' || el.type == 'button') && evt.target != el)
|| ((el.type == 'checkbox' || el.type == 'radio') && !el.checked))
}
var parseMultiSelect = function(field) {
var q = '';
for (var j=field.options.length-1; j>=0; j--) {
if (field.options[j].selected) {
q += encode(field.options[j], field.name);
}
}
return q;
};
for(i = form.elements.length - 1; i >= 0; i--) {
field = form.elements[i];
if (!hasName(field) || field.value == '' || ignorableField(field, evt))
continue;
query += (field.type == 'select-multiple') ? parseMultiSelect(field)
: encode(field);
}
return (query.length == 0) ? '' : query.substr(1);
}
Ответ 13
Я схватил метод entries() formData из ответа @moison и MDN, он сказал, что:
Метод FormData.entries() возвращает итератор, позволяющий через все пары ключ/значение, содержащиеся в этом объекте. Ключ каждого пара - объект USVString; значение либо USVString, либо Blob.
но единственная проблема заключается в том, что мобильный браузер (андроид и сафари не поддерживаются), а также рабочий стол IE и Safari
но в основном это мой подход:
let theForm = document.getElementById("contact");
theForm.onsubmit = function(event) {
event.preventDefault();
let rawData = new FormData(theForm);
let data = {};
for(let pair of rawData.entries()) {
data[pair[0]] = pair[1];
}
let contactData = JSON.stringify(data);
console.warn(contactData);
//here you can send a post request with content-type :'application.json'
};
код можно найти здесь
Ответ 14
// supports IE8 and IE9
function serialize(form) {
var inputs = form.elements;
var array = [];
for(i=0; i < inputs.length; i++) {
var inputNameValue = inputs[i].name + '=' + inputs[i].value;
array.push(inputNameValue);
}
return array.join('&');
}
//using the serialize function written above
var form = document.getElementById("form");//get the id of your form. i am assuming the id to be named form.
var form_data = serialize(form);
var xhr = new XMLHttpRequest();
xhr.send(form_data);
//does not work with IE8 AND IE9
var form = document.querySelector('form');
var data = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.send(data);
Ответ 15
Использование функции JavaScript JavaScript должно помочь всем браузерам, включая IE9>:
Array.prototype.slice.call(form.elements) // convert form elements to array
.reduce(function(acc,cur){ // reduce
var o = {type : cur.type, name : cur.name, value : cur.value}; // get needed keys
if(['checkbox','radio'].indexOf(cur.type) !==-1){
o.checked = cur.checked;
} else if(cur.type === 'select-multiple'){{
o.value=[];
for(i=0;i<cur.length;i++){
o.value.push({
value : cur.options[i].value,
selected : cur.options[i].selected
});
}
}
acc.push(o);
return acc;
},[]);
Живой пример ниже.
var _formId = document.getElementById('formId'),
formData = Array.prototype.slice.call(_formId.elements).reduce(function(acc,cur,indx,arr){
var i,o = {type : cur.type, name : cur.name, value : cur.value};
if(['checkbox','radio'].indexOf(cur.type) !==-1){
o.checked = cur.checked;
} else if(cur.type === 'select-multiple'){
o.value=[];
for(i=0;i<cur.length;i++){
o.value.push({
value : cur.options[i].value,
selected : cur.options[i].selected
});
}
}
acc.push(o);
return acc;
},[]);
// view
document.getElementById('formOutput').innerHTML = JSON.stringify(formData, null, 4);<form id="formId">
<input type="text" name="texttype" value="some text">
<select>
<option value="Opt 1">Opt 1</option>
<option value="Opt 2" selected>Opt 2</option>
<option value="Opt 3">Opt 3</option>
</select>
<input type="checkbox" name="checkboxtype" value="Checkbox 1" checked> Checkbox 1
<input type="checkbox" name="checkboxtype" value="Checkbox 2"> Checkbox 2
<input type="radio" name="radiotype" value="Radio Btn 1"> Radio Btn 1
<input type="radio" name="radiotype" value="Radio Btn 2" checked> Radio Btn 2
<select multiple>
<option value="Multi 1" selected>Multi 1</option>
<option value="Multi 2">Saab</option>
<option value="Multi 3" selected>Multi 3</option>
</select>
</form>
<pre><code id="formOutput"></code></pre>Ответ 16
document.serializeForm = function (selector) {
var dictionary = {};
var form = document.querySelector(selector);
var formdata = new FormData(form);
var done = false;
var iterator = formdata.entries();
do {
var prop = iterator.next();
if (prop.done && !prop.value) {
done = true;
}
else {
dictionary[prop.value[0]] = prop.value[1];
}
} while (!done);
return dictionary;
}
Ответ 17
В целях отладки это может помочь вам:
function print_form_data(form) {
const form_data = new FormData(form);
for (const item of form_data.entries()) {
console.log(item);
}
return false;
}
Ответ 18
Я надеюсь, что это сработает
var serializeForm = (formElement) => {
const formData = {};
const inputs = formElement.elements;
for (let i = 0; i < inputs.length; i++) {
if(inputs[i].name!=="")
formData[inputs[i].name] = inputs[i].value;
}
return formData;
}
Ответ 19
Я могу быть сумасшедшим, но я нахожу эти ответы серьезно раздутыми. Вот мое решение
function serialiseForm(form) {
var input = form.getElementsByTagName("input");
var formData = {};
for (var i = 0; i < input.length; i++) {
formData[input[i].name] = input[i].value;
}
return formData = JSON.stringify(formData);
}