jquery - 有没有办法使用 jQuery 的序列化表单字段并修剪字段中的值？

Question

我有一个使用 jQuery 提交 ajax 帖子的表单，它序列化发送的表单。代码如下所示：

var form = $("form");
var action = form.attr("action");
var serializedForm = form.serialize();
$.post(action, serializedForm, function(data)
{
  ...
});

这里的问题是，如果一个字段有尾随空格，则序列化函数会将这些空格转换为加号 (+)，此时它们应该被剥离。

有没有办法在不执行以下操作的情况下修剪字段：

$("#name").val( jQuery.trim( $("#name") ) );

Answer 1

您可以尝试遍历对象并修剪所有内容。

//Serialize form as array
var serializedForm = form.serializeArray();
//trim values
for(var i =0, len = serializedForm.length;i<len;i++){
  serializedForm[i] = $.trim(serializedForm[i]);
}
//turn it into a string if you wish
serializedForm = $.param(serializedForm);

Answer 2

修剪 DOM 中的所有<input>和<textarea></textarea>元素值：

$('input, textarea').each(function(){
    $(this).val(jQuery.trim($(this).val()));
});

Answer 3

有点晚了，但这可能是你想要的：

var form = $("form");
var action = form.attr("action");
var formArr = form. serializeArray();
$.each(formArr , function(i, field) {
  formArr[i].value = $.trim(field.value);
});
var serializedForm = $.param(formArr);
$.post(action, serializedForm, function(data)
{
  ...
});

Answer 4

您可以在提交之前遍历所有输入并修剪。

$("input, textarea").each(function(){
   $(this).val(jQuery.trim($(this).val()));
});

Answer 5

这些解决方案都不起作用，因为它们实际上更改了页面上的表单字段。我只想修改字段的值，而不更改用户输入的内容。

Answer 6

您可以做的一件事是拥有一个带有隐藏值的单独表单，并在用户提交时将实际的、修剪过的表单值存储在隐藏值中，然后您可以序列化“隐藏”表单并发布它。只是一个想法。

Answer 7

如果您使用的 ASP.NET 每页只能有一个表单，则只能提交给定 DIV 的值，如下所示：

var dataString = "source=contactDiv";
dataString += getDataString(divId, "input"); // add inputs
dataString += getDataString(divId, "select"); //add select elements

然后发布更新如下：

$.post("UpdateContact.aspx",
        dataString,
        afterUpdate,
        "json");

辅助函数

function afterUpdate(data){
//add some post-update info
}

function getDataString(divId, tagName) {
    var data = "";
    var elements = $("#" + divId + " " + tagName);
    for (var i = 0; i < elements.length; i++) {
        var el = elements[i];
        var name = el.name;
        var value = $(el).val();
        if (value != null && value != "undefined")
            value = $.trim(value + ""); //added "" to fix IE 6 bug for empty select     
        if (el.type == "checkbox")
            value = el.checked;
        else if (el.type == "radio" && !el.checked)
            value = "";
        if (!(value == "" || value == "undefined" || name == "" || name == "undefined"))
            data += "&" + name + "=" + escape(value);
    }

    return data;
}

Answer 8

如果您已经包含 jquery 文件，则使用此脚本

var formFilters = $('input, textarea');
        formFilters.each(function(){
            $(this).val($(this).val().trim());
        });