Hello. There is a form:

.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>

Question: How to do what would be when you click on the link next to the field - the field became available for entering text?

Perhaps the question is primitive, but I practically do not understand JavaScript. I would be grateful for any useful information!

    2 answers 2

     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>

    PS Added styles to demonstrate editable.

    PPS If fields are added to a form dynamically, then it is better to use event delegation - hang the handler on the form and listen for clicks on all links.

      Using EcmaScript 6/2015 features:

       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>