¿Cómo modifico los datos del formulario serializado en jQuery?

81

Estoy tratando de enviar mi formulario en AJAX, así que tengo que serializar () los datos. Pero estoy usando fckEditory jQuery no sabe cómo lidiar con eso, así que después de la serialización, estoy tratando de modificar manualmente el valor, pero no tuve suerte hasta ahora ... alguna idea

if(content_val!=""){
    var values = $("#frmblog").serialize();
    values.content = content_val; //content_val is the manually fetched data which I am trying to insert into the serialized content.
    alert(content_val); alert(values);
}
Bluemagica
fuente
¿Por qué no lo inserta antes de serializar?
Adam Arold
El problema es que hay algunos valores predeterminados que se establecen en la clave 'contenido' durante el proceso de serilización, por lo que no puedo simplemente agregar un nuevo valor, tengo que actualizar el que ya está en él
Bluemagica
Ah, eso cambia las cosas; ver mi respuesta actualizada.
TJ Crowder

Respuestas:

152

serializedevuelve una cadena codificada en URL que contiene los campos del formulario. Si necesita agregarlo, hágalo utilizando las reglas estándar de cadenas codificadas en URL, por ejemplo:

var values = $("#frmblog").serialize();
values += "&content=" + encodeURIComponent(content_val);

(Lo anterior asume que siempre habrá un valor valuesdespués de la serializellamada; si eso no es necesariamente cierto, determine si usar en &función de si valuesestá vacío antes de agregarlo).

Alternativamente, si lo desea, puede usar serializeArrayy luego agregar a la matriz y usar jQuery.parampara convertir el resultado en una cadena de consulta, pero eso parece un largo camino:

// You can also do this, but it seems a long way 'round
var values = $("#frmblog").serializeArray();
values.push({
    name: "content",
    value: content_val
});
values = jQuery.param(values);

Actualización : en un comentario agregado más tarde, dijiste:

El problema es que se establecen algunos valores predeterminados en la clave 'contenido' durante el proceso de serilización, así que no puedo simplemente agregar un nuevo valor, tengo que actualizar el que ya está en él "

Eso cambia las cosas. Es difícil buscar contentdentro de la cadena codificada en URL, así que iría con la matriz:

var values, index;

// Get the parameters as an array
values = $("#frmblog").serializeArray();

// Find and replace `content` if there
for (index = 0; index < values.length; ++index) {
    if (values[index].name == "content") {
        values[index].value = content_val;
        break;
    }
}

// Add it if it wasn't there
if (index >= values.length) {
    values.push({
        name: "content",
        value: content_val
    });
}

// Convert to URL-encoded string
values = jQuery.param(values);

Probablemente desee que esta sea una función reutilizable.

TJ Crowder
fuente
4

Aquí hay un complemento de jquery completo basado en la respuesta de @ TJ. Puedes llamar

$('form#myForm').awesomeFormSerializer({
    foo: 'bar',
})

Que reemplazará o agregará el parámetro 'foo' con el valor 'bar' (o cualquier otro parámetro que agregue en el objeto)

Complemento jQuery:

// Not builtin http://stackoverflow.com/a/5075798/2832282
(function ( $ ) {
    // Pass an object of key/vals to override
    $.fn.awesomeFormSerializer = function(overrides) {
        // Get the parameters as an array
        var newParams = this.serializeArray();

        for(var key in overrides) {
            var newVal = overrides[key]
            // Find and replace `content` if there
            for (index = 0; index < newParams.length; ++index) {
                if (newParams[index].name == key) {
                    newParams[index].value = newVal;
                    break;
                }
            }

            // Add it if it wasn't there
            if (index >= newParams.length) {
                newParams.push({
                    name: key,
                    value: newVal
                });
            }
        }

        // Convert to URL-encoded string
        return $.param(newParams);
    }
}( jQuery ));
Cyril Duchon-Doris
fuente
2

Con ES15 ahora. Puede usar este en lugar de uno para editar el valor enviado actual (el más corto)

var values = $("#frmblog").serializeArray();
values.find(input => input.name == 'content').value = content_val;
console.log(values);

o función nativa

var values = $("#frmblog").serializeArray();
values.find(function(input) { 
    return input.name == 'content';
}).value = content_val;
console.log(values);
Yanuarizal Kurnia
fuente
0

usa la siguiente función, funcionó para mí

function(elementName,newVal)
{
    var postData = $("#formID").serialize();

var res = postData.split("&");
var str = "";

for(i=0;i<res.length;i++)
  {
    if(elementName == res[i].split("=")[0])
      {
        str += elementName + "=" + newVal+ "&";
      }
      else
      {
        str += res[i] + "&";
      }
  }
return str;
}
Malek Tubaisaht
fuente