Get Value From Dynamic textarea

Question

In the given code i have create a dynamic textarea, now when i try to get insert value from that textarea. It gives me null value.

 <form name="myForm">
 <textarea name="fname" <%#!((GPNS.BusinessLayer.SpecialItems.SpecialItem)Container.DataItem).Code.Equals("OTH", StringComparison.InvariantCultureIgnoreCase) ? "style='display: none;'" : string.Empty%> id="text<%#((GPNS.BusinessLayer.SpecialItems.SpecialItem)Container.DataItem).ID%>" maxlength="50" placeholder="Enter other item details"></textarea>
 </form>

Given is my function to get value from textarea box:

 function ValidateData() {
            if ($("textarea").is(":visible")) {
                //var x = document.forms["myForm"]["fname"].value;
                var x = document.getElementsByName("fname").value;
                if (x == null || x == "") {
                    alert("Please Enter Other Item Details");
                    return false;
                }
            }
            else return true
        }

Answer 1

Your textarea was dynamic so you can used textarea change event. You can use given code on load, so whenever you input text it sets on OtherItemValue:

var OtherItemValue;
 $("textarea").on('input change keyup', function () {
                if (this.value.length) {
                    OtherItemValue = this.value;
                } else {
                    OtherItemValue = "";
                }
            });

And then you can used below code:

function ValidateData() {
    if ($("textarea").is(":visible")) {
 if (OtherItemValue == null || OtherItemValue == "") {
            alert("Please Enter Other Item Details");
            return false;
        }
    }
    else return true
}

Answer 2

<form name="myForm">
 <textarea name="fname" <%#!((GPNS.BusinessLayer.SpecialItems.SpecialItem)Container.DataItem).Code.Equals("OTH", StringComparison.InvariantCultureIgnoreCase) ? "style='display: none;'" : string.Empty%> id="text<%#((GPNS.BusinessLayer.SpecialItems.SpecialItem)Container.DataItem).ID%>" maxlength="50" placeholder="Enter other item details"></textarea>
</form>

Your function should now look like this

function ValidateData() {
        if ($("textarea").is(":visible")) {
            //var x = document.forms["myForm"]["fname"].value;
            var x = document.getElementsByName("fname")[0].value;
            if (x == null || x == "") {
                alert("Please Enter Other Item Details");
                return false;
            }
        }
        else return true
    }

The problem with your code is that getElementsByName will get a list of elements, which don't have a value property. You need to get only a particular element and get its value. This solution may solve your problem, but will work if you don't have any other element with name as fname above the textarea.

Answer 3

Since you are using jQuery already, why don't you use it to achieve the desired result?

Your code would look like this:

function ValidateData() {
    if ($("textarea").is(":visible")) {
        var x = $("textarea").val();
        if (x == null || x == "") {
            alert("Please Enter Other Item Details");
            return false;
        }
    }

    return true
}

---

If you really need to use standard library, @Rachit Gupta's answer should solve the problem.

Answer 4

Use jquery .val() method to retrieve the value of the text area. you need to initialise textarea to empty at document ready function.

$(document).ready(function(){
   $("textarea[name='fname']").val("");    
});

    function ValidateData() {

    if ($("textarea").is(":visible")) {
        var x = $("textarea[name='fname']").val();
        if (x == null || x == "") {
            alert("In if " + x);
            return false;
        }
        else {
              alert("In else" + x);
        }
    }
    else {
            return true
    }
}