Form Inputdaki Verileri Diğer Inputa Kopyalama

Merhaba arkadaşlar,

Bu örnek bir bölümdeki form input verilerini diğer form inputlara kopyalamak için son derece basit bir örnektir. Bir alandaki bilgiler diğer alanlara da girilebiliyorsa çok kullanışlı olur.

E-ticaret sitelerinde sık sık karşılaştığınız iletişim adresim aynı zamanda fatura adresim olsun seçeneğiyle aynıdır.

Hemen kodları sizinle paylaşmak istiyorum.. jQuery Kodlarımız:

$(document).ready(function(){
    $("input#ayni").click(function(){
        if ($("input#ayni").is(':checked')){
            // Seçim yapildiginda kopyala
            $("input#iletisim-email").val($("input#email").val());
            $("input#iletisim-ad").val($("input#ad").val());
            $("input#iletisim-tel").val($("input#tel").val());
        }else{
            // Seçim kaldirildiginda iletisim kismini temizle
            $("input#iletisim-email").val("");
            $("input#iletisim-ad").val("");
            $("input#iletisim-tel").val("");
        }
    });
});

<form>
    <p style="font-weight: bold;">Fatura</p>
    Email: <input type="text" name="email" id="email" value="test@trkodlama.com" />
    <br />Ad: <input type="text" name="ad" id="ad" value="TR Kodlama" />
    <br />Telefon: <input type="text" name="tel" id="tel" value="0555 555 55 55" />

    <p style="padding-top: 15px; font-weight: bold;">Iletisim</p>

    İletişim adresim fatura adresimle ayni olsun?: <input type="checkbox" name="ayni" id="ayni" />
    <br />Email: <input type="text" name="email" id="iletisim-email" />
    <br />Name: <input type="text" name="ad" id="iletisim-ad" />
    <br />Tel: <input type="text" name="tel" id="iletisim-tel" />
</form>