Question

I have this field in one form:

<input type="text" name="promocode" id="promoCode" value="" style="width:24%" maxlength="5"> 

and this field in another form:

<input type="hidden" name="custom" class="promo" value="" />

How can I do, so whenever the value of #promoCode is changed, it will also change the value of .promo

Currenlty, I have this:

var promo = $("#promoCode").val();
$("#promoCode").change(function(){
    $('.promo').val(promo);    
});

But that doesn’t work.

Answer 1

$(function(){
    $("#promoCode").change(function(){
        $('.promo').val(this.value);    
    });
});

• Make sure the DOM is ready when you attach your callback to the change event
• this inside callback is the element the event attached to.
• If you cache #promoCode value outside the change callback it will be out of sync right after the first change! use this.value inside the callback just like I did.