AjaxSubmit overwrite form field before send

Question

I would like to overwrite the value of the "password" field before submiting a form on Jquery using AjaxSubmit function. I know I can just update the value on the input field but, I don't want the user to see this transformation. In other words, I just want to send a custom value to the password field and keep the current value on the screen...

How could I do that?

My current code:

var loginoptions = { 
    success: mySuccessFuction, 
    dataType: 'json'
}

$('#My_login_form').submit(function(e) {
    e.preventDefault();
    var pass=$("#My_login_form_password").val();
    if (pass.length>0){
        loginoptions.data={
            password: ($.sha1($("#My_login_form_csrf").val()+$.sha1(pass)))
        }
    $("#My_login_form").ajaxSubmit(loginoptions);
    delete loginoptions.data;
});

The problem with this code is that it is sending a "password" POST variable with the form field value and, a duplicated one with the value I set on "loginoptions.data".

Answer 1

It seems that ajaxSubmit uses the serialize() function of jquery on the form and then, adds the extra data serialized too. So, if I have a field named "password" with the value "1234" and then try to change that to "abcd", using "loginoptions.data.password", it will serialize everything and put the "options.data" like this:

"password=1234&field_2=value_2&password=abcd"

After many tries, I gave up on using ajaxSubmit function and decided to use ajax function to submit the form:

var the_form=$('form#My_login_form');
loginoptions.url=the_form.attr("action");
loginoptions.type=the_form.attr("method");
var serializedForm=decodeURIComponent(the_form.serialize());
loginoptions.data=serializedForm.deserializeToObject();
var pass=$("#My_login_form_password").val();
    if (pass.length>0){
        loginoptions.data.password= ($.sha1($("#My_login_form_csrf").val()+$.sha1(pass)));
    }
$.ajax(loginoptions);

Here is the deserializeToObject() function:

function deserializeToObject (){
    var result = {};
    this.replace(
        new RegExp("([^?=&]+)(=([^&]*))?", "g"),
        function($0, $1, $2, $3) { result[$1] = $3; }
    )
    return result;
}

String.prototype.deserializeToObject = deserializeToObject;

Answer 2

Building off of Cristiano's answer, I was able to get this to work. If you use :beforeSubmit(), the changed value doesn't post, but if you use the :beforeSerialize(), it posts the changed value.

         $('#ff').ajaxForm({
            beforeSerialize:function(jqForm, options){
                var serializedForm = decodeURIComponent(jqForm.serialize());
                options.data = serializedForm.deserializeToObject();
                options.data.tPassword = MD5($("#tPassword").val())     
            },
            success:function(data){
               // do stuff
            }
         });

Answer 3

If you want to do it anyhow then I think you can use callback function beforeSubmit: function(contentArray, $form, options){}

  beforeSubmit: function(contentArray, $form, options){ 
    for(var i=0; i<contentArray.length; i++){
      if(contentArray[i].name == "password") {
        contentArray[i].value = ($.sha1($("#My_login_form_csrf").val()+$.sha1(pass)))
      } 
    }
  }