Jak zmodyfikować zserializowane dane formularzy w jQuery?

82

Próbuję przesłać swój formularz w AJAX, więc muszę serializować () dane. Ale ja używam fckEditori jQuery nie wie, jak sobie z tym poradzić, więc po serializacji próbuję ręcznie zmodyfikować wartość, ale na razie bez szczęścia ... jakieś pomysły

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
źródło
Dlaczego nie wstawisz go przed serializacją?
Adam Arold
Problem polega na tym, że podczas procesu serilizacji w kluczu `` content '' ustawiane są wartości domyślne, więc nie mogę po prostu dołączyć nowej wartości, muszę zaktualizować tę już w niej
zawartą
Ach, to wszystko zmienia; zobacz moją zaktualizowaną odpowiedź.
TJ Crowder

Odpowiedzi:

155

serializezwraca ciąg zakodowany w adresie URL zawierający pola formularza. Jeśli chcesz dołączyć do niego, możesz to zrobić, korzystając ze standardowych reguł ciągów zakodowanych w adresie URL, np .:

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

(Powyższe zakłada, że valuespo serializewywołaniu zawsze będzie jedna wartość ; jeśli to niekoniecznie jest prawdą, określ, czy użyć &na podstawie tego, czy valuesjest pusta, zanim do niej dodasz.)

Alternatywnie, jeśli chcesz, możesz użyć, serializeArraya następnie dodać do tablicy i użyć jQuery.paramdo przekształcenia wyniku w ciąg zapytania, ale wydaje się, że to długa droga:

// 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);

Aktualizacja : W komentarzu dodanym później powiedziałeś:

Problem polega na tym, że podczas procesu serilizacji w kluczu „content” ustawiane są wartości domyślne, więc nie mogę po prostu dołączyć nowej wartości, muszę zaktualizować tę, która już się w niej znajduje ”

To wszystko zmienia. Trudno jest szukać w contentciągu zakodowanym w adresie URL, więc wybrałbym tablicę:

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);

Prawdopodobnie chciałbyś, aby ta funkcja była wielokrotnego użytku.

TJ Crowder
źródło
4

Oto pełna wtyczka jquery oparta na odpowiedzi @ TJ. Możesz zadzwonić

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

Która zastąpi lub doda parametr „foo” wartością „bar” (lub jakimkolwiek innym parametrem, który dodasz w obiekcie)

Wtyczka 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
źródło
3

Z ES15 teraz. Możesz użyć tego zamiast tego do edycji aktualnie przesłanej wartości (najkrótszej)

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

lub funkcja natywna

var values = $("#frmblog").serializeArray();
values.find(function(input) { 
    return input.name == 'content';
}).value = content_val;
console.log(values);
Yanuarizal Kurnia
źródło
1

użyj następującej funkcji, która zadziałała dla mnie

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
źródło