Is there a way to use jQuery to serialize form fields and crop the value in the fields?

Question

I have a form that uses jQuery to submit an ajax message and serialize the form that is being submitted. The code is as follows:

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

The problem is that if the field has a space in it, the serialization function will turn these spaces into plus signs (+) when they should be removed.

Is there a way to crop fields without by following these steps:

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

Answer 1

You can try to scroll the object and crop 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 2

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

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

Answer 3

A bit late, but that 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) { ... }); 

Answer 4

You can iterate over all inputs and crop before sending.

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

Answer 5

None of these solutions work, as they actually change the form fields on the page. I just want to change the value of the field without changing what the user entered.

Answer 6

One thing you can do is to have a separate form with hidden values ​​and keep the actual, clipped form values ​​in hidden values ​​when the user submits, then you can serialize the “hidden” form and publish it. Just an idea.

Answer 7

If you use ASP.NET, where you can have only one form per page, you can only represent the values ​​of this 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"); 

secondary 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; }