form - serialize table jquery

Serializar los datos del formulario a JSON

Question

Esta pregunta ya tiene una respuesta aquí:

• Convierta datos de formulario a objetos de JavaScript con jQuery 50 respuestas

Quiero hacer una validación previa al servidor de un formulario en un modelo Backbone.js . Para hacer esto, necesito que el usuario ingrese desde un formulario en datos utilizables. Encontré tres métodos para hacer esto:

1. var input = $("#inputId").val();
2. var input = $("form.login").serialize();
3. var input = $("form.login").serializeArray();

Desafortunadamente, ninguno de ellos proporciona un buen objeto JSON reabastecible y desarrollable que requiera. Ya examiné varias preguntas sobre Stack Overflow, pero solo encontré algunas bibliotecas adicionales.

¿No Underscore.js , el jQuery actual o el Backbone.js proporcionan un método de ayuda?

No puedo imaginar que no haya una solicitud para tal función.

HTML

<form class="login">
<label for="_user_name">username:</label>
<input type="text" id="_user_name" name="user[name]" value="dev.pus" />
<label for="_user_pass">password:</label>
<input type="password" id="_user_pass" name="user[pass]" value="1234" />
<button type="submit">login</button>
</form>

JavaScript

var formData = $("form.login").serializeObject();
console.log(formData);

Salidas

{
"name": "dev.pus",
"pass": "1234"
}

Modelo Backbone.js

var user = new User(formData);
user.save();

Answer 1

Al tratar de resolver el mismo problema (validación sin entrar en complementos y bibliotecas complejas), creé jQuery.serializeJSON , que mejora serializeArray para admitir cualquier tipo de objetos anidados.

Este plugin se hizo muy popular, pero en otro proyecto estaba usando Backbone.js , donde me gustaría escribir la lógica de validación en los modelos Backbone.js. Luego creé Backbone.Formwell , que le permite mostrar los errores devueltos por el método de validación directamente en el formulario.

Answer 2

Aquí hay una función para este caso de uso:

function getFormData($form){
var unindexed_array = $form.serializeArray();
var indexed_array = {};
$.map(unindexed_array, function(n, i){
indexed_array[n[''name'']] = n[''value''];
});
return indexed_array;
}

Uso:

var $form = $("#form_data");
var data = getFormData($form);

Answer 3

Bueno, aquí hay un práctico complemento para ello: https://github.com/macek/jquery-serialize-object

El problema es:

Avanzando, además de la serialización de núcleos, .serializeObject admitirá la serialización correcta para valores booleanos y numéricos, resultando tipos válidos para ambos casos.

Esperamos estos en> = 2.1.0

Answer 4

El siguiente código debería ayudarte. :)

 //The function is based on http://css-tricks.com/snippets/jquery/serialize-form-to-json/
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '''');
} else {
o[this.name] = this.value || '''';
}
});
return o;
};
$(function() {
$(''form.login'').on(''submit'', function(e) {
e.preventDefault();
var formData = $(this).serializeObject();
console.log(formData);
$(''.datahere'').html(formData);
});
});
</script>

Answer 5

Encontrado un posible ayudante:

https://github.com/theironcook/Backbone.ModelBinder

y para las personas que no quieren ponerse en contacto con los formularios: https://github.com/powmedia/backbone-forms

Voy a echar un vistazo más de cerca al primer enlace y dar algunos comentarios :)

Answer 6

Esto es lo que uso para esta situación como módulo (en mi formhelper.js):

define(function(){
FormHelper = {};
FormHelper.parseForm = function($form){
var serialized = $form.serializeArray();
var s = '''';
var data = {};
for(s in serialized){
data[serialized[s][''name'']] = serialized[s][''value'']
}
return JSON.stringify(data);
}
return FormHelper;
});

Es una mierda que parece que no puedo encontrar otra manera de hacer lo que quiero hacer.

Esto me devuelve este JSON:

{"first_name":"John","last_name":"Smith","age":"30"}

Answer 7

Mi contribución:

function serializeToJson(serializer){
var _string = ''{'';
for(var ix in serializer)
{
var row = serializer[ix];
_string += ''"'' + row.name + ''":"'' + row.value + ''",'';
}
var end =_string.length - 1;
_string = _string.substr(0, end);
_string += ''}'';
console.log(''_string: '', _string);
return JSON.parse(_string);
}
var params = $(''#frmPreguntas input'').serializeArray();
params = serializeToJson(params);

Answer 8

No pude encontrar una respuesta que pudiera resolver esto:

[{name:"Vehicle.Make", value: "Honda"}, {name:"Vehicle.VIN", value: "123"}]

Esto requiere este objeto:

{Vehicle: {Make: "Honda", "VIN": "123"}}

Así que tuve que escribir un serializador mío que resolvería esto:

function(formArray){
var obj = {};
$.each(formArray, function(i, pair){
var cObj = obj, pObj, cpName;
$.each(pair.name.split("."), function(i, pName){
pObj = cObj;
cpName = pName;
cObj = cObj[pName] ? cObj[pName] : (cObj[pName] = {});
});
pObj[cpName] = pair.value;
});
return obj;
}

Tal vez ayudará a alguien.

Answer 9

Puedes hacerlo:

function onSubmit( form ){
var data = JSON.stringify( $(form).serializeArray() ); // <-----------
console.log( data );
return false; //don''t submit
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit=''return onSubmit(this)''>
<input name=''user'' placeholder=''user''><br>
<input name=''password'' type=''password'' placeholder=''password''><br>
<button type=''submit''>Try</button>
</form>

mira esto: http://www.json.org/js.html

Answer 10

Sé que esto no cumple con el requisito de la función auxiliar, pero la forma en que lo he hecho es utilizar el método $ .each () de jQuery

var loginForm = $(''.login'').serializeArray();
var loginFormObject = {};
$.each(loginForm,
function(i, v) {
loginFormObject[v.name] = v.value;
});

Luego puedo pasar loginFormObject a mi backend, o puedes crear un userobject y guardarlo () en la red troncal también.

Answer 11

Si envía el formulario con JSON, debe eliminar [] en la cadena de envío. Puede hacerlo con la función jQuery serializeObject ():

var frm = $(document.myform);
var data = JSON.stringify(frm.serializeObject());
$.fn.serializeObject = function() {
var o = {};
// var a = this.serializeArray();
$(this).find(''input[type="hidden"], input[type="text"], input[type="password"], input[type="checkbox"]:checked, input[type="radio"]:checked, select'').each(function() {
if ($(this).attr(''type'') == ''hidden'') { //if checkbox is checked do not take the hidden field
var $parent = $(this).parent();
var $chb = $parent.find(''input[type="checkbox"][name="'' + this.name.replace(//[/g, ''/['').replace(//]/g, ''/]'') + ''"]'');
if ($chb != null) {
if ($chb.prop(''checked'')) return;
}
}
if (this.name === null || this.name === undefined || this.name === '''')
return;
var elemValue = null;
if ($(this).is(''select''))
elemValue = $(this).find(''option:selected'').val();
else elemValue = this.value;
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(elemValue || '''');
} else {
o[this.name] = elemValue || '''';
}
});
return o;
}

Answer 12

Si no te importan los elementos de forma repetitiva con el mismo nombre, puedes hacer:

var data = $("form.login").serializeArray();
var formData = _.object(_.pluck(data, ''name''), _.pluck(data, ''value''));

Estoy usando Underscore.js aquí.

Answer 13

Usando Underscore.js :

function serializeForm($form){
return _.object(_.map($form.serializeArray(), function(item){return [item.name, item.value]; }));
}

Answer 14

Usando jQuery y evitando serializeArray , el siguiente código se serializa y envía los datos del formulario en formato JSON:

$("#commentsForm").submit(function(event){
var formJqObj = $("#commentsForm");
var formDataObj = {};
(function(){
formJqObj.find(":input").not("[type=''submit'']").not("[type=''reset'']").each(function(){
var thisInput = $(this);
formDataObj[thisInput.attr("name")] = thisInput.val();
});
})();
$.ajax({
type: "POST",
url: YOUR_URL_HERE,
data: JSON.stringify(formDataObj),
contentType: "application/json"
})
.done(function(data, textStatus, jqXHR){
console.log("Ajax completed: " + data);
})
.fail(function(jqXHR, textStatus, errorThrown){
console.log("Ajax problem: " + textStatus + ". " + errorThrown);
});
event.preventDefault();
});

Answer 15

Utilizar:

var config = {};
jQuery(form).serializeArray().map(function(item) {
if ( config[item.name] ) {
if ( typeof(config[item.name]) === "string" ) {
config[item.name] = [config[item.name]];
}
config[item.name].push(item.value);
} else {
config[item.name] = item.value;
}
});