How to fetch multiple values from an input field and add to a textarea?

Question

I want to add single value in textbox and after clicking the add this will show in TextArea. And when I will do this process in next time the new value will show in line after the last value. But in next time it is overwritting my last value and show the recent one. How can I save my last values and show them sequentially before the new value. Here is my html code,

    <div class="row">
<div class="col-md-6">
    <div class="input-group">
        @using (Html.BeginForm("Process", "Home", FormMethod.Post, new
        {
            enctype = "multipart/form-data"
        }))
        {
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">Connect To:</span>                     
                @Html.TextBoxFor(model => model.ipAddress, new { @class = "form-control" })
            </div>    
                }
            </div>
</div>
<div class="col-md-6">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">Recent Devices</h3>
        </div>
        @Html.TextArea("Recent Devices", (string)@ViewBag.recentDevices, new { style = "max-width:100%; min-height:250px", @class = "form-control" })
    </div>
</div>

And in my controller code,

    Session["recentDevices"] = con.ipAddress;
    Viewbag.recentDevices = Session["recentDevices"];

mancestr · Accepted Answer · 2016-11-03 14:25:56Z

2

If you want a simple Javascript solution, use:

document.getElementById("MyTextarea").value += "Added text";

Or, depending on how you coded it, you could also use:

var text = document.getElementById("YourInput").value
document.getElementById("MyTextarea").value += text;

Update:

I'm not sure if this helps you, but this script will put the value where the cursor is. The other scripts add the element to the end of the textarea, so they should work for you, but if you want a better script, use this one.

typeInTextarea(document.getElementById('MyTextarea'), "Added Text");


      function typeInTextarea(el, newText) {
    var start = el.selectionStart
    var end = el.selectionEnd
    var text = el.value
    var before = text.substring(0, start)
    var after  = text.substring(end, text.length)
    el.value = (before + newText + after)
    el.selectionStart = el.selectionEnd = start + newText.length
    el.focus()
  }

edited Nov 3, 2016 at 14:25

answered Nov 3, 2016 at 11:33

mancestr

1,0103 gold badges16 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mahbub Over a year ago

Thanks . Second one is working perfectly with my criteria

Enrico · Accepted Answer · 2016-11-03 11:31:25Z

0

if you use ASP.NET MVC, my suggestions are:

create your own MVC component
use jQuery to do what you want

Why are you using a TextArea for a list of IP? If you replace it with a ListBox you can manage everything directly from database or something like that.

answered Nov 3, 2016 at 11:31

Enrico

6,90212 gold badges88 silver badges194 bronze badges

Comments

Kevin B Burns · Accepted Answer · 2016-11-03 18:24:54Z

0

You can always roll your own setup. I would have a textbox with a button, and to the right a listbox that has all of the ip addresses that the user entered. You can even include an "X" to the right of the entered item so that the user can delete it. When you post the data back, all you have to do is perform an $.each on the DIV elements to get the data and post it as a comma separated string.

answered Nov 3, 2016 at 18:24

Kevin B Burns

1,0679 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to fetch multiple values from an input field and add to a textarea?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related