Is there a way to use jQuery's serialize form fields and trim the value in the fields?

Question

Hi,

I have a form that uses jQuery to submit an ajax post and it serializes the form that is sent up. The code looks like this:

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

The problem here is that if a field has trailing white space, the serialize function will turn those spaces to plus (+) signs, when they should be stripped.

Is there a way to get the fields trimmed without doing the following:

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

Answer 1

Trim all <input> and <textarea></textarea> element values in the DOM:

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

Answer 2

You could loop over all of the inputs and trim before submitting.

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

Answer 3

Neither of those solutions work, since they actually change the form fields on the page. I just want to modify the value of the field that without changing what the user typed in.

Answer 4

You could try looping through the object and triming everything.

//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 5

One thing you could do is have a separate form with hidden values, and store the actual, trimmed, form values in the hidden values when the user submits, then you can serialize the "hidden" form and post that. Just an idea.

Answer 6

If you are using ASP.NET where you can have only one form per page, you can submit only the values of a given DIV as follows:

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

then post the update as follows:

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

helper functions

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 7

A little late, but this was probably what you wanted:

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