How to replace value with the data-attribute on form submit? JQuery

Question

I have input text field displays staff name on the form. That field also has data-staff attribute for staff ID. In data base I want to store staff ID instead of staff name. I use JQuery ajax to submit the form. When I check my parameters in debugging tools I see only values for each field what is expected. I was wondering if I can somehow replace value for staff input field with data attribute? Or if there is better way to handle this situation? Here is my example:

HTML:

<input type="text" name="frm_staff" id="frm_staff" value="John, Miller" data-staff="052667" size="40" maxlength="50" /> 

JQuery:

formData = $('#'+frmID).serialize();

$.ajax({
    type: 'POST',
    url: 'Components/myFunction.cfc?method='+frmID,
    data: formData,
    dataType: 'json'
}).done(function(obj){
    if(obj.STATUS === 200){
        return true;
    }else{
        return false;
    }
}).fail(function(jqXHR, textStatus, errorThrown){
    alert(errorThrown);
});

If anyone knows better technique for this case please let me know. Thank you.

Answer 1

You can reset the value of your input, using $('#frm_staff').val() and .data() method, before serializing the form.

Your code would look like this:

$('#frm_staff').val($('#frm_staff').data('staff'));
formData = $('#'+frmID).serialize();