Question

I have some codes to combine several fields and pass to 1 input field F on user’s profile page. After loading, #Salary_para1 will pass value to field F first, then when user enter value in #Salary_value, it will pass its value to field F too. Same condition with checkbox #Salary_para2.

There is problem after user save their profile page. Let say, field F have value “MYR1000 + Allowance” after saved. After loading, field F still shown value of #Salary_para1 (‘MYR’ in sample) instead of “MYR1000 + Allowance”.

1) How to make sure that field F shown “MYR1000 + Allowance” after loading??
2) How to make it don’t pass value of #Salary_para1 (MYR) if user didn’t input value to #Salary_value?
3) How to make sure that if field F after loading have value of “MYR” and “+ Allowance”, then field #Salary_para1 will show ‘MYR’ and checkbox #Salary_para2 will be checked? (revert back)

http://jsfiddle.net/e2ScF/69/

CODE:

<select id="Salary_para1">
  <option value="">Choose...</option>
  <option value="0" selected>MYR</option>
  <option value="1" >SGD</option>
</select>
<input id="Salary_value" type="text"/>
 + <input type="checkbox" id="Salary_para2" name="Salary_para2" value=" + Allowance"  />Allowance<br/>
<input type="text" id="targetTextField" name="targetTextField" size="31" tabindex="0" maxlength="99" value="MYR1000 + Allowance">

$(function() {
setTarget();
$("#Salary_para1,#Salary_para2").change(setTarget);
$("#Salary_value").keyup(setTarget);

function setTarget() {
    var tmp = $("option:selected", "#Salary_para1").text();
    tmp += $("#Salary_value").val();
    tmp += $("#Salary_para2:checked").val() || '';
    $('#targetTextField').val(tmp);
}
});

Answer 1

1) is possible only if your are saving the F field somewhere.. since it is not possible to get
a javascript var after reload

2) check for condition if empty or not and do your stuff there

3)revertback is possible.. considering you have the F field var saved somewhere…load the var.. split it into arras and check for condition..

check this fiddle..

http://jsfiddle.net/e2ScF/75/

and fiddle with other example..

http://jsfiddle.net/e2ScF/74/