Question

With refer to answer of SOF’s Question, I would like to get a fix to have selected option value pass to target field automatically after page load (on user’s profile page).

I would also interested to know the change method on a textfield is trigged BEFORE it lost focus.

Sample on jsFiddle

$(function () {
    $("#options").change(function () {
        setTarget(); // Something has changed so lets rebuild the target
    });
    $("#options2").change(function () {
        setTarget(); // Something has changed so lets rebuild the target
    });
});

// Just get the values you want and update the target
function setTarget() {
    var tmp = $("#options").val();
    tmp += $("#options2").val();
    $('#targetTextField').val(tmp);
}

Answer 1

1. To have the selected option value passed at page load, had this event in your $ function :

   $(function () {
       ...
   
       // Add it here
       setTarget();
   });
   

2. For the change on the textfield which is transmitted to the value, use keyup event instead of change :

   $(function () {
       ...
   
       $("#options3").keyup(function () {
           setTarget(); // Text has changed
       });
   
       ...
   });
   

See this fiddle : http://jsfiddle.net/scaillerie/e2ScF/49/