Is it possible to change form data before sending it?

Question

I'd like to find any generic method to change data before sending forms. It is, if I have a <form> that contains a <input> of certain type (class) and user press send button, I'd like to transform this input value to another format so it arrive to server in a corrected format.

I know I can set a submit() handler to process data, but I need a generic solution that setup this mechanism on load on all page forms and forgets about it (perhaps some forms are sent by AJAX, other use Jquery.validate to send, etc)

Answer 1

Use jQuery's to select all form elements: $('form') and register a handler for the form submit event. Something like this:

$('form').submit(function(e){
    e.preventDefault()
    var $this = $(this)
    var formData = $this.serialize()
    // do some thing to it
    var yourData = transform(formData)
    $.ajax({
       post: $this.attr('action'),
       data: yourData,
       ...
    })
})

References

• submit()
• jQuery CSS Selector
• Form serialize()