Mahbub Mahbub - 1 month ago 9
HTML Question

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

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

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