Enable /disable button based on values in textarea

Enable /disable button based on values in textarea

Hi,
 
I have a textarea and input type button in my aspx page.
 
The controls are added dynamically, In the F12 developer tools, I can see the controls as below:
 
  1. <textarea onblur="return (TextBox.OnBlur(this, event));"
  2. style="white-space: pre; position: relative; resize: none;"
  3. onpropertychange="return (TextBox.OnPropertyChange(this, event));" id="ctl00_PlaceHolderMain_XmlFormControl_V1_I1_T5"
  4. class="s_5jghZOsnCxGdM8MP_0 u_5jghZOsnCxGdM8MP_0 a5_5jghZOsnCxGdM8MP_0 a4_5jghZOsnCxGdM8MP_0"
  5. onfocus="return (TextBox.OnFocus(this, event));"
  6. title="Type comments to include with your response." rows="1" autocomplete="off"
  7. OriginalId="V1_I1_T5" FormId="ctl00_PlaceHolderMain_XmlFormControl"
  8. ViewDataNode="11" direction="ltr" wrapped="true"
  9. ScriptClass="TextBox" IsSelecting="false"></textarea>
 
The button is shown as :
 
  1. <input style="width: 76px; height: 21px; text-align: center;" id="ctl00_PlaceHolderMain_XmlFormControl_V1_I1_B7"
  2. class="w_5jghZOsnCxGdM8MP_0 x_5jghZOsnCxGdM8MP_0 a6_5jghZOsnCxGdM8MP_0 aw_5jghZOsnCxGdM8MP_0"
  3. onfocus="return (Button.OnFocus(this, event));"
  4.  title="Reject" onclick="return (Button.OnClick(this, event));" value="Reject"
  5. type="button" OriginalId="V1_I1_B7"
  6. FormId="ctl00_PlaceHolderMain_XmlFormControl"
  7. ViewDataNode="13" direction="ltr"
  8. wrapped="true" ScriptClass="Button"
  9. buttonid="Approval_btnReject">
 
In the Page load, I want the "Reject" button to be disabled. If the user enters data in the textarea, then enable the button, else disable the button.
 
  1. I have tried this,
  3.   $(document).ready(function () {
          var buttons = document.getElementsByTagName("input");
            var buttonsCount = buttons.length;
  4.         for (var i = 0; i <= buttonsCount; i += 1) {
  5.             if (buttons[i].value == "Reject") {
                    $(buttons[i]).attr("disabled", "disabled");
                    button[i].disabled = true;
                    var btnId = button[i].id;            
                }
            }
            var txtarea = document.getElementsByTagName("textarea");
            var txtId = "";
            var txtareaCount = txtarea.length;
            for (var i = 0; i <= txtareaCount; i += 1) {
  6.             if (txtarea[i].title == "Type comments to include with your response.") {
                    txtId = txtarea[i].id;
    // check for data in this textarea. If data is entered, then enable button, else disable it
                }
            }
  7. });
 
In the page load, the button is shown as disabled, but if I hover over the button, then it is getting enabled.
How to fix this? Also,If the user enters data in the textarea, then enable the button, else disable the button.
 
How to achieve this?
Thanks