change input value before submit form using jQuery

I want to set hidden input value(username) based on client other input(email) in a form, then submit to server. (to make sure username equal to email)

However, the assignment to the hidden input is processed AFTER the form submitted. So 'username' is already None on server side.

<form id="altForm" action="" method="post">

<input type="hidden" name="username" id="id_username" maxlength="40" >

<input type="email" name="email" id="id_email" maxlength="40">

<input class="btn btn-primary pull-right" type="submit" value="Register" />
</form>

---

<script>

    $("#altForm").submit(function(e){
        e.preventDefault();
        var username = $("#id_email").val();
        $("#id_username").val(username);

    });

</script>