so I'm new on JavaScript, and what I'm trying to do is remove the attribute readonly from some text input fields. My code is working, but what is happening it is removing readonly for like 1 sec, and it went back for read only. the below picture will explain what I'm trying to say (cause my English is terrible) enter image description here
And this is my code:
<form name="editForm" method="post" class="edit">
<script>
function ro(i) {
document.getElementById(i).focus();
document.getElementById(i).select();
document.getElementById(i).removeAttribute("readonly");
}
</script>
<p>First Name:</p>
<input id="i1" type="text" name="fname" readonly> <button onclick="ro('i1')"> Edit </button>
<p>Last Name:</p>
<input id="i2" type="text" name="lname" readonly> <button onclick="ro('i2')"> Edit </button>
<p>Username:</p>
<input id="i3" type="text" name="username" readonly> <button onclick="ro('i3')"> Edit </button>
<p>Password:</p>
<input id="i4" type="password" name="password" readonly> <button id="e4" > Edit </button><br>
<!--<input type="password" name="cpassword" placeholder="Confirm Password" required>-->
<input type="submit" name="signup" value="Sign Up">
</form>
