Adding custom URL parameter alongwith $(this.form).serialize()

Question

I am using this code to serialize the form of the current submit button. It works fine!

data: $(this.form).serialize() // it is used in $.ajax() 

But when I try to add my own custom parameter like this

$(this.form).serialize() +'&address_serial=' + 
$('#address').val().replace(new RegExp('\n', 'g'), '<br />')

It is more likely to break the code, and the form reloads instead of staying static and sending the ajax request.

Note that I do have the return false at the end of the code to stop further posting of the form while submit is clicked.

How can I either add a custom parameter, or alter the current value of the textarea so that each enter key gets saved!

Answer 1

.serialize creates a paramstring, therefore, to add params to it, use string concatenation.

var data = $("#myform").serialize() + "&" + $.param({foo: "bar"});

using $.param additionally ensures that the resulting string is properly encoded.

Alternatively, you can use encodeURIComponent:

$(this.form).serialize() +'&address_serial=' + encodeURIComponent($('#address').val());

And, to help with debugging, it's almost always better to use event.preventDefault() rather than return false simply because return false won't be reached if an error occurs while event.preventDefault() will if you use it at the top.