jQuery

<script>
// Webform Order copy address
var addrReg = ("#edit-submitted-adres-registraci"); // Адрес регистрации
var addrObj = ("#edit-submitted-adres-obekta-nedvizhimosti"); // Адрес объекта недвижимости
var addrCopy = ('input[name="submitted[adres_registracii_sovpadaet_s_adresom_obekta_nedvizhimosti][addr_copy]"]'); // Адрес регистрации совпадает с адресом объекта недвижимости

$(addrCopy).change(function() { 
	if ($(addrCopy).is(':checked')) { 
	$(addrObj).val($(addrReg).val());
	$(addrObj).attr('readonly', true);
	// alert('checked!');
}
else if (!$(addrCopy).is(':checked')) {
	$(addrObj).attr('readonly', false).val("");
	// alert('unchecked!');
	} else {
	alert('shit happens =(');
	}
});
</script>

Улучшенное решение | JavaScript

В данном варианте поле, куда мы копируем информацию принимает значение readonly. При снятии checkbox'a, поле вновь становится доступным и его value удаляется.
Обратите внимание, что событие onClick="uncheck(); check(); ..." может принимать сколько угодно функций.

JavaScript

<script>
function check() {
    var n1 = document.getElementById("sender_address"); 
    var n2 = document.getElementById("home_address");
    
    if (document.getElementById("copy_address").checked == true) {
        n2.value = n1.value;
        document.getElementById("home_address").readOnly = true;
    }
}
function uncheck() {
    if (document.getElementById("copy_address").checked == false) {
        document.getElementById("home_address").value = '';
        document.getElementById("home_address").readOnly = false;
    }
}
</script>

html

...
<input type="text" name="sender_address" id="sender_address" value="" placeholder="Ваш адрес проживания *">
<input type="checkbox" name="copy_address" id="copy_address" onClick="uncheck(); check();" />
Адрес проживания совпадает с адресом запрашиваемой информации.
<input type="text" name="home_address" id="home_address" value="" placeholder="Адрес дома, по которому запрашивается информация *"> ...

CSS (по желанию)

<style>
input[type="text"]:read-only {
    background-color: #EEE;
    color: #777;
}
</style>

Раннее решение

<script> 
function copy() { 
	var n1 = document.getElementById("id_1"); 
	var n2 = document.getElementById("id_2"); 
	n2.value = n1.value; 
} 
</script>

<form>
	<input type="text" id="id_1" name="id_1" value="" /><br />	
	<input type="checkbox" id="copy_id" name="copy_id" onClick="copy();" /> Копировать содержимое id_1 в id_2<br />	
	<input type="text" id="id_2" name="id_2" value="" />
</form>

Аналогичную фичу можно реализовать с помощью jQuery.


Выразить благодарность

Если эта публикация оказалась для Вас полезной и вы хотите выразить свою благодарность, сделайте пожалуйста её репост в социальных сетях или на своём сайте.

Так же, Вы можете перевести любую сумму, которую посчитаете нужной на наш счёт, что сильно мотивирует к написанию новых полезных статей.

Комментарии: