toggle text area on button click

Question

I want to enable the text area, when I click the toggle button. Once the comments are saved from the text area, it has to hide and return to the old position. Since I'm a newbie, struggling a little. Thanks in advance :-)

<html>
   <body>
      <textarea class="ipText" name="myTextBox" id="txtBox" cols="50" rows="5"></textarea>
      </br>
      <button type="submit" onclick="saveComment()">Save</button>
      <input type="button" name="enableText" id="enableTxt" value="Click to Toggle" onclick="toggleText();">
      <script type ="text/javascript">
         function toggleText(txt) {
            document.getElementById("txtBox").disabled = !txt.clicked;
         }
      </script>
   </body>
</html>

EDIT: here is the jfiddle link. http://jsfiddle.net/suP8z/5/

Dipak G. · Answer 1 · 2014-07-22T04:07:49.190

1

Can you try :

<html>  
<body>
    <textarea class="ipText" name="myTextBox" disabled="disabled" id="txtBox" cols="50" rows="5"></textarea>
    </br>
    <button type="submit" onclick="document.getElementById('txtBox').disabled = true; return false;">Save</button>
    <input type="button" name="enableText" id="enableTxt" value="Click to Toggle" onclick="document.getElementById('txtBox').disabled = false; return false;">
</body>
</html>

edited Jul 22 '14 at 04:07

answered Jul 22 '14 at 03:51

Dipak G.

715
1
4
18

Nope it's not working. The jfiddle link too has the same old output. – dm90 Jul 22 '14 at 03:59
@ManivG Try the new code. Also, you can check jsFiddle at http://jsfiddle.net/suP8z/17/ – Dipak G. Jul 22 '14 at 04:08
1

@ManivG You must appreciate someone's efforts by marking "this answer solved my problem" / "this answer is useful". Final jsfiddle: http://jsfiddle.net/suP8z/17/ – Dipak G. Jul 22 '14 at 04:23
1

@ManivG How you want it to work? (1) Click on 'click to toggle' (2) it will allow to add comments (3) click on 'Save' and it will disable comment section. Then you can again 'click to toggle' to enable comments edit and save to disable/save comments. – Dipak G. Jul 22 '14 at 05:11
If jsfiddle isn't working then could you try above updated code? (http://stackoverflow.com/a/24878592/1266584) – Dipak G. Jul 22 '14 at 05:13
Hi dipak, I went offline for a while and couldn't check that. Thanks, it's disabling. By the way how to hide and show on the button click. – dm90 Jul 22 '14 at 05:14
I tried in my system now, that's working. Something wrong with the jfiddle. Thanks again. – dm90 Jul 22 '14 at 05:15
@ManivG If it's working, can you tick my answer as "solved your question". – Dipak G. Jul 22 '14 at 05:16

Krish R · Accepted Answer · 2014-07-22T04:07:17.393

1

Try this,

 function toggleText() {
      var Disabled = document.getElementById("txtBox").disabled;
      document.getElementById("txtBox").disabled = !Disabled;
   }

Add javscript in <head> tag of your HTML tag.

DEMO: http://jsfiddle.net/d8NMk/

edited Jul 22 '14 at 04:07

answered Jul 22 '14 at 03:58

Krish R

22,583
7
50
59

Try this, in your code/project. I have tried this in jsfiddle, i got error like `toggleText` undefined error. – Krish R Jul 22 '14 at 04:05
1

REason for Why simple javascript not working in jsfiddle - http://stackoverflow.com/questions/5468350/javascript-not-running-on-jsfiddle-net – Krish R Jul 22 '14 at 04:15
Thanks Krish !! It's working well in project. Something went wrong with my internet(jfiddle was facing issue). – dm90 Jul 22 '14 at 05:20

PaulDapolito · Answer 3 · 2014-07-22T04:13:21.720

By giving your <textarea> element the id txtBox, we can easily capture it using the document.getElementById function and negate its disabled attribute.

Here's the JavaScript code (goes inside the <head> tags):

<script>
    function toggleText() {
        var value = document.getElementById("txtBox").disabled;
        document.getElementById("txtBox").disabled = !value;
    };
</script>

And the HTML:

<body>
    <textarea class="ipText" name="myTextBox" id="txtBox" cols="50" rows="5"></textarea>
    </br>
    <button type="submit" onclick="saveComment()">Save</button>
    <input type="button" name="enableText" id="enableTxt" value="Click to Toggle" onclick="toggleText();">
</body>

Here's a sample jsfiddle: http://jsfiddle.net/suP8z/18/

The full working code is:

<html>
<head>
<script>
    function toggleText() {
        var value = document.getElementById("txtBox").disabled;
        document.getElementById("txtBox").disabled = !value;
     };
</script>
</head>
<body>
    <textarea class="ipText" name="myTextBox" id="txtBox" cols="50" rows="5"></textarea>
    </br>
    <button type="submit" onclick="saveComment()">Save</button>
    <input type="button" name="enableText" id="enableTxt" value="Click to Toggle" onclick="toggleText();">
</body>
</html>

toggle text area on button click

3 Answers3