Click here to Skip to main content
14,698,806 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have Textbox, TextArea and search button in my MVC view page

depends on the input entered by user from Textbox control I am making ajax call and appending data to the TextArea Control

I am Appending ID, firstname, lastname to the TextArea control in multiple lines(if I get 10 users I will arrange data in 10 lines)

Now If I click on firstline(firstuser) data, then it should display firstname,lastname of selected user in other textboxes how to make calls on dynamic generated text

What I have tried:

<div class="col-lg-4">
        <textarea readonly rows="15" cols="100" id="userDetails" style="resize: none;overflow:auto;color:gray" ></textarea>
    </div>


$("#userDetails").click(function () {
            alert("clickedon textarea");
        });


from above I am clicking on TextArea control, the event is firing, but I want to fire event on selected line
Posted
Updated 28-Dec-18 12:37pm

1 solution

Very interesting requirement. Let assume each lines are being separated by newline '\n', on textarea click, you can write something like below

1. Get the value in the textarea
2. Get the row number where the cursor landed on
3. Get the text from the selected row (t.value.split("\n")[rowNumber-1])

function getline()
{
    var t = $("#t")[0]; //1
    let rowNumber = t.value.substr(0, t.selectionStart).split("\n").length; //2

//do something with the selected line t.value.split("\n")[rowNumber-1]
    console.log(t.value.split("\n")[rowNumber-1]);
    alert(t.value.split("\n")[rowNumber-1]);
}


Here is an example: CP_textarea - JSFiddle[^]

Tested on: Firefox

Reference:
javascript - Getting Line Number In Text Area - Stack Overflow[^]
   
Comments
Divyay208 30-Dec-18 21:19pm
   
Great,Thank You So Much
Divyay208 2-Jan-19 15:16pm
   
can we highlight the selected line from the above on mouse click
Bryian Tan 2-Jan-19 16:17pm
   
You might have to use a plugin. Here is an example: jQuery highlightTextarea demo[^]

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900