CODEWITHSUNDEEP
javascripthtml
Anand
Anand

Reputation: 397

Disable readonly to text box onclicking the button

I have used "readonly" attribute to the textbox which makes the textbox non editable and may i know how to disable the readonly attribute on clicking the button. can we do this by using any script ?

<input type="text" name="" value="" readonly="readonly"/><br/>
<input type="submit" name="" value="update" onclick="" />

Upvotes: 22

Views: 85058

Answers (3)

Satpal
Satpal

Reputation: 133403

You need to set readOnly property of element to false

You can use document.getElementById(), it reference to the element by its ID

HTML, Here I have added id to elements

<input type="text" id="myTextBox" name="" value="" readonly="readonly"/><br/>
<input type="submit" id="myButton"  name="" value="update" />

JavaScript, Here you can see readOnly property to false.

document.getElementById('myButton').onclick = function() {
   document.getElementById('myTextBox').readOnly =false;
};

DEMO

Additionally, I would suggest you to use 'type="button"' instead of type="submit"

Upvotes: 5

Oriol
Oriol

Reputation: 288100

You can do two things:

HTML:

<input id="myInput"  type="text"  readonly="readonly" /><br />
<input id="myButton" type="submit" value="update" />

JS (option 1): [Demo]

document.getElementById('myButton').onclick = function() {
    document.getElementById('myInput').removeAttribute('readonly');
};

JS (option 2): [Demo]

document.getElementById('myButton').onclick = function() {
    document.getElementById('myInput').readOnly = false;
};

Upvotes: 35

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

Well, to be simple! You can use jQuery to remove this attribute (jQuery would be simple, you can do this using JS too). Here is the code for that:

$('input[type=submit]').click(function () {
  $('input[type=text]').removeAttr('readonly');
})

https://api.jquery.com/removeAttr/

Upvotes: 5

Related Questions