如何从输入字段中获取多个值并添加到文本区域？

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"];

Answer 1

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;

:

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()
  }

Answer 2

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.

Answer 3

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.