Manipulate form data before it's sent with jQuery
<p>I want to encrypt some data in a form using jQuery before it's sent to the server, it can be a MD5 hash. It is a small project, so I don't really need to use SSL.</p>

<p>I have the  following JavaScript code where I use <code>$.md5</code> in the password confirmation info:</p>

<pre><code>    $(document).ready(function() {
        var dataToSend = {};
        dataToSend['action'] = 'signup';
        dataToSend['name'] = name.val();
        dataToSend['email'] = email.val();
        dataToSend['confsenha'] = $.md5(pass2.val());

        var options = {
            target: '#error', 
            url: 'insert.php',
            beforeSubmit: validate,
            data: dataToSend,
            success: function(resposta) {
                $('#message').html(resposta);
            }
        };
        $('#customForm').ajaxForm(options); 
    });
</code></pre>

<p>The problem is that the data is being duplicated. I tought that overwriting the data being sent by using the var <code>dataToSend</code> would make <code>ajaxForm</code> send only data in that map. But besides sending data from <code>dataToSend</code>, it also sends data from the form, so what I wanted to encrypt using MD5 appears both encrypted and clean. This is an example of what goes in the request:</p>

<blockquote>
  <p>usuario=user&amp;email=user%40email.com&amp;senha=12345&amp;confsenha=12345&amp;send=&amp;action=signup&amp;name=user&amp;email=user%40email.com&amp;confsenha=d41d8cd98f00b204e9800998ecf8427e</p>
</blockquote>

<p>I know I have to define the a function <code>beforeSerialize</code>, but I don't know how to manipulate form data. Can anyone tell me how to do that?</p>
