Remove 'readonly' attribute from multiple form fields with edit button

Question

I have a form on my website with multiple user data fields; 'name', 'phone', 'email'.

By default, I want the page to load with the fields set to 'readonly'.

Then, I want to be able to click an 'edit button' to remove the 'readonly' attribute from all of the fields, so they may each be edited if need be.

I am using this bit of javascript, which I can set to select the inputs by either the generic ('input'), by the id ('#any_shared_id'), or by the class ('.any_shared_class').

However, so far... no matter which selector I use, I can only get this script to effectively remove the 'readonly' attribute from the first input.

The Form:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit Test Form</title>
</head>
<body>

<button id="removeAttribute" name="editBtn">Edit</button><br><br>

<form action="" method="POST">

<label>Name:</label><br><input type="text" id="name" class="inputField" name="name" 
value="John Smith" readonly><br><br>
    
<label>Phone:</label><br><input type="phone" id="phone" class="inputField" name="phone" 
value="555-555-5555" readonly><br><br>
    
<label>Email:</label><br><input type="email" id="email" class="inputField" name="email" 
value="jsmith@email.com" readonly><br><br>

<button type="submit" name="submit">Submit</button>

</form>
</body>
</html>

The Script:

<script>

var editButton= document.querySelector('#removeAttribute');

var get= document.querySelector('#name');

editButton.addEventListener('click', () => {

get.removeAttribute('readonly');

});

</script>

Please see [`querySelectorAll`](//developer.mozilla.org/en/docs/Web/API/Document/querySelectorAll) and understand the differences to [`querySelector`](//developer.mozilla.org/en/docs/Web/API/Document/querySelector). See also [What do querySelectorAll and getElementsBy\* methods return?](/q/10693845/4642212). — Sebastian Simon, Jan 18 '23 at 21:39
I should have mentioned in my question that I did attempt 'querySelectorAll'. Admittedly, I may have done something wrong, but in my attempts, not only did that fail to remove the 'readonly' attribute from the other fields, but it also failed to remove it from the first one. — Nam Tab, Jan 18 '23 at 21:47

score 1 · Accepted Answer · answered Jan 18 '23 at 21:42

Your code is correct but it works only for the first input field.

Just use querySelectorAll, select all input fields, and remove the readonly attribute on all fields.

const elements = document.querySelectorAll("input");

elements.forEach(element => {
    element.removeAttribute("readonly");
});

const button = document.querySelector("#removeAttribute");
const elements = document.querySelectorAll("input");

button.addEventListener("click", () => {

    elements.forEach(element => {
        element.removeAttribute("readonly");
    });

});

<button id="removeAttribute" name="editBtn">Edit</button><br><br>

<form action="" method="POST">

<label>Name:</label><br><input type="text" id="name" class="inputField" name="name" 
value="John Smith" readonly><br><br>
    
<label>Phone:</label><br><input type="phone" id="phone" class="inputField" name="phone" 
value="555-555-5555" readonly><br><br>
    
<label>Email:</label><br><input type="email" id="email" class="inputField" name="email" 
value="jsmith@email.com" readonly><br><br>

<button type="submit" name="submit">Submit</button>

</form>

@NamTab - Alternatively, you could use querySelectorAll('[readonly]') so that only readonly elements are processed. And it also works with readonly textareas. — Yogi, Jan 18 '23 at 22:21

Remove 'readonly' attribute from multiple form fields with edit button

1 Answers1