How to get the Id of texarea

Reply

Beginer

Member

22 Points

68 Posts

How to get the Id of texarea

Apr 03, 2018 05:33 PM|Beginer|LINK

Dear All,

I have few rows in my html table . And in that I am able to get the value of textarea control .
But I required to get the ID of the textarea control on button click.

Can any one please help me how can I make it.

<head>
    <style>
        #customers {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

            #customers td, #customers th {
                border: 1px solid #ddd;
                padding: 8px;
            }

            #customers tr:nth-child(even) {
                background-color: #f2f2f2;
            }

            #customers tr:hover {
                background-color: #ddd;
            }

            #customers th {
                padding-top: 12px;
                padding-bottom: 12px;
                text-align: left;
                background-color: #4CAF50;
                color: white;
            }
    </style>
</head>
<body>

    <table id="customers">
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
         <th>participants</th><th>submit</th>
        </tr>

        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
            <td><textarea id="text" rows="1" cols="30"></textarea></td>
            <td><input type="button" value="Submit" class="use-address" onclick="submitvallues(this)"></td>
        </tr>

 
        <tr>
            <td>North/South</td>
            <td>Simon Crowther</td>
            <td>UK</td>
            <td><textarea id="text8" rows="1" cols="30"></textarea></td>
            <td><input type="button" value="Submit" class="use-address" onclick="submitvallues(this)"></td>
        </tr>

        <tr>
            <td>Paris spécialités</td>
            <td>Marie Bertrand</td>
            <td>France</td>
            <td><textarea id="text9" rows="1" cols="30"></textarea></td>
            <td><input type="button" value="Submit" class="use-address" onclick="submitvallues(this)"></td>
        </tr>
    </table>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        function submitvallues(button) {
         alert("Hello");
                    var row=$(button).closest('tr'),
                     input=row.find("td:eq(3) textarea");
	                alert(input.val());
        }
    </script>
</body>

Reply

mgebhard

All-Star

30731 Points

11182 Posts

Re: How to get the Id of texarea

Apr 03, 2018 06:33 PM|mgebhard|LINK

I can only assume you are rendering the HTML? Simply refactor the code to pass the textarea Id or textarea element rather than "this".

<td><input type="button" value="Submit" class="use-address" onclick="submitvallues('text8')"></td>

Reply

A2H

All-Star

50031 Points

9684 Posts

Re: How to get the Id of texarea

Apr 03, 2018 07:02 PM|A2H|LINK

Beginer

But I required to get the ID of the textarea control on button click. Can any one please help me how can I make it.

You can use attr method to get the id value of textbox controls.

input.attr('id')

Updated Code

<script type="text/javascript">
        function submitvallues(button) {
         alert("Hello");
         var row=$(button).closest('tr'),
         input=row.find("td:eq(3) textarea");
	 alert(input.attr('id'));
        }
</script>

Sample Working Demo

Thanks,
A2H
My Blog | Dotnet Funda

Reply

Eric Du

Contributor

6440 Points

2693 Posts

Re: How to get the Id of texarea

Apr 04, 2018 05:09 AM|Eric Du|LINK

Hi Beginer,

According to your description, you could use attr to get the value, about how to use this function, please check the following tutorial:

jquery .attr():

http://api.jquery.com/attr/

Also about the complete sample code, please check the following code:

<!DOCTYPE html>
<html>
<head>
    <style>
        #customers {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

            #customers td, #customers th {
                border: 1px solid #ddd;
                padding: 8px;
            }

            #customers tr:nth-child(even) {
                background-color: #f2f2f2;
            }

            #customers tr:hover {
                background-color: #ddd;
            }

            #customers th {
                padding-top: 12px;
                padding-bottom: 12px;
                text-align: left;
                background-color: #4CAF50;
                color: white;
            }
    </style>
</head>
<body>

    <table id="customers">
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
            <th>participants</th>
            <th>submit</th>
        </tr>

        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
            <td><textarea id="text" rows="1" cols="30"></textarea></td>
            <td><input type="button" value="Submit" class="use-address" onclick="submitvallues(this)"></td>
        </tr>


        <tr>
            <td>North/South</td>
            <td>Simon Crowther</td>
            <td>UK</td>
            <td><textarea id="text8" rows="1" cols="30"></textarea></td>
            <td><input type="button" value="Submit" class="use-address" onclick="submitvallues(this)"></td>
        </tr>

        <tr>
            <td>Paris spécialités</td>
            <td>Marie Bertrand</td>
            <td>France</td>
            <td><textarea id="text9" rows="1" cols="30"></textarea></td>
            <td><input type="button" value="Submit" class="use-address" onclick="submitvallues(this)"></td>
        </tr>
    </table>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        function submitvallues(button) {
            debugger;
            var row = $(button).closest('tr'),
                input = row.find("td:eq(3) textarea");
            alert(input.attr("id"));
        }
    </script>
</body>
</html>

Best Regards,

Eric Du

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

How to get the Id of texarea [Answered]RSS

3 replies

Shortcuts

How to get the Id of texarea

Re: How to get the Id of texarea

Re: How to get the Id of texarea

Beginer

Re: How to get the Id of texarea