Как отключать readonly при клике на ссылку?

457

28 ноября 2016, 17:49

Здравствуйте. Есть форма:

.inp { 
  margin: 15px; 
}

<form action="?" method="post"> 
  <div class="inp"> 
    <input type="text" name="name" readonly /> <a href="javascript:void(0);">изменить имя</a> 
   </div> 
   
  <div class="inp"> 
    <input type="text" name="familia" readonly /> <a href="javascript:void(0);">изменить фамилию</a> 
   </div> 
   
  <div class="inp"> 
    <input type="text" name="login" readonly /> <a href="javascript:void(0);">изменить логин</a> 
   </div> 
 </form>

Вопрос: Каким образом сделать что бы при клике по ссылке рядом с полем - поле становилось доступным для ввода текста?

Возможно вопрос примитивный, но я в JavaScript практически не разбираюсь. Буду благодарен за любую полезную информацию!

Answer 1

var link = document.querySelectorAll('form a'); 
for (var i=0; i<link.length; i++ ) { 
	link[i].onclick = function(event) {	 
		event.preventDefault; 
		this.parentElement.querySelector('input').readOnly = false; 
	} 
}

input:read-only { 
	background: silver; 
	border: none; 
}

<form action="?" method="post"> 
	<div class="inp"> 
		<input type="text" name="name" readonly /> <a href="javascript:void(0);">изменить имя </a> 
	</div> 
 
	<div class="inp"> 
		<input type="text" name="familia" readonly /> <a href="javascript:void(0);">изменить фамилию</a> 
	</div> 
 
	<div class="inp"> 
		<input type="text" name="login" readonly /> <a href="javascript:void(0);">изменить логин</a> 
	</div> 
</form>

P.S. Добавил стили для демонстрации редактируемости

P.P.S. Если поля в форму добавляются динамически, то лучше использовать делегирование событий - навешивать обработчик на форму и слушать клики по всем ссылкам.

Answer 2

С использованием фич EcmaScript 6/2015:

var links = document.querySelectorAll("a"); 
 
Array.from(links).forEach(link => { 
    link.addEventListener("click", () => { 
        link.previousElementSibling.removeAttribute("readonly"); 
  }); 
});

<form action="?" method="post"> 
  <div class="inp"> 
    <input type="text" name="name" readonly /> <a href="javascript:void(0);">изменить имя</a> 
   </div> 
   
  <div class="inp"> 
    <input type="text" name="familia" readonly /> <a href="javascript:void(0);">изменить фамилию</a> 
   </div> 
   
  <div class="inp"> 
    <input type="text" name="login" readonly /> <a href="javascript:void(0);">изменить логин</a> 
   </div> 
 </form>