Заполнение поля из нескольких полей ввода?

Question

Я пытаюсь заполнить поле уличным адресом, городом, штатом и почтовым индексом, но прямо сейчас, когда я ввожу данные в каждое поле, он заменяет последнее.

$("#trainer_address").keyup(function() { 
     $('#location').val($(this).val()); 
    }); 

    $("#trainer_city").keyup(function() { 
     $('#location').val($(this).val()); 
    }); 

    $("#trainer_state").keyup(function() { 
     $('#location').val($(this).val()); 
    }); 

    $("#trainer_zip").keyup(function() { 
     $('#location').val($(this).val()); 
    }); 

Как заставить его сохранить предыдущее значение, а затем добавьте следующий, так что я могу закончить с чем-то вроде 402 StreetAddress City State, 12345?

Answer 1

Это потому, что вы переписываете его. Попробуйте конкатенации:

$('#location').val($('#location').val() + $(this).val()); 

Например, изменить:

$("#trainer_zip").keyup(function() { 
    $('#location').val($(this).val()); 
}); 

к этому:

$("#trainer_zip").keyup(function() { 
    $('#location').val($('#location').val() + $(this).val()); 
}); 

ли, что для каждой функции keyup() событий

Answer 2

сцепить старый Вэл с новым val с использованием оператора + ... и вы можете избежать нескольких KeyUp функция, используя множественный селектор ....

попробовать это

$("#trainer_address,#trainer_city,#trainer_state,#trainer_zip").keyup(function() { 
    var location=$('#location').val(); 
    $('#location').val(location + $(this).val()); 
}); 

Answer 3

Вы можете использовать родной value так:

$('#location')[0].value += this.value; 

Answer 4

Этот скрипт сделает это:

var $loc = $('#location'), 
    address = [], 

getAddress = function() { 
    var str = address.slice(0, 3).join(' ') + ', ' + (address[3] || ''); 
    return str.replace(/\s+/g, ' ').replace(/,\s$/, ''); 
} 

$("#trainer_address, #trainer_city, #trainer_state, #trainer_zip").on({ 
    focus: function() { 
     $loc.val(getAddress()); 
    }, 
    keyup: function() { 
     address[$(this).index()] = $(this).val(); 
     $(this).trigger('focus'); 
    } 
}); 

http://jsfiddle.net/J6G9f/1/

Сценарий также правильно обрабатывает удаление частей адреса, и он автоматически обновляет результат.