Add/Remove Textbox Value from Textarea

Question

I'm going off this existing example on StackOverflow, which simply adds a textbox value to a textarea as a new line with some accompanying text.

I modified it to work via onChange however, and am adding multiple textboxes that will each add new lines if there is a value present; all works fine:

$(document).on('change', '#dlnum input', function (e){

    var inputEl = $(this);
    var textareaEl = $('#BoloDesc');

        //If input has any text
        if($(inputEl).val().length){

            //Appending line to textarea
            $(textareaEl).val($(textareaEl).val()+'DL NUMBER'+' '+$(inputEl).val()+"\r\n");

        return false;
    }

});

All this works fine; my question is, just as the textbox value is added or appended to the textarea when a value exists in that textbox, I'd like for the textarea to remove that particular textbox value from the textarea when it's empty.

I know Googling this brings up setting .val='', but of course this will clear out the entire textarea, which isn't what I want to do. I simply want to remove that particular textbox value while keeping all of the others in there.

How can I do this?

Original StackOverflow post is here: append textbox value to textarea on enter

Please see "Should questions include “tags” in their titles?", where the consensus is "no, they should not"! — user57508
– user57508, Commented Apr 9, 2015 at 15:01

Csaba Adam Meszaros · Accepted Answer · 2015-04-09 18:42:40Z

1

I would declare a global array called

var content = [];

Then when the change event gets fired I would add the content of the input box to a specific index(same input always to the same index), like:

$(document).on('change', '#dlnum input', function (e){
    content['dl_number'] = $(this).val();
    render();  
});

After the content has been set in the array, each change event should call the render function which would combine the content of the array and should modify the content of the textarea.

function render(){
    var text = "";
    for (var x in content) {
       text += content[x] ? content[x] + "\r\n" : "";
    }
    $('#BoloDesc').val(text);
}

edited Apr 9, 2015 at 18:42

answered Apr 9, 2015 at 15:14

Csaba Adam Meszaros

1244 bronze badges

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

8 Comments

Sarasota Tim Over a year ago

This seems easy enough, sounds like what I need, however, the content['dl_number']....what is that referencing? dlnum_input is my textbox, BoloDesc is my textarea...thanks a ton for the help by the way! EDIT: sorry no, dlnum is the DIV that input is wrapped in. The actual id of the textbox isn't referenced anywhere.

Csaba Adam Meszaros Over a year ago

dl_number is just an internal identifier, you can change it to whatever you would like as soon as it's unique for each input. "#BoloDesc" is the id of the textarea, "#dlnum input" references the input box (you have used this in your example, thats why I used the same reference) which is identified in the array as dl_number.

Sarasota Tim Over a year ago

Hmm I've got the JS setup like this:

<script type="text/javascript"> var content = [];  $(document).on('change', '#dlnum input', function (e){     content['dl_number'] = $(this).val();     render();   });  function render(){     var text = "";     $.each(content, function( index, value ) {         text += value ? value + "\r\n" : "";     });     $('#BoloDesc').val(text); } </script>

Sarasota Tim Over a year ago

Referencing the following HTML below:

<div id="dlnum"><span class="srch_title">Driver License:</span><br /> <cfinput name="Bolo_DLNum" id="Bolo_DLNum" type="text" class="inputs_nomargin_lg" maxlength="50" onFocus="this.className='inputs_nomargin_lg_highlight'" onBlur="this.className='inputs_nomargin_lg'" value="#session.bolo_driverlicense#"></div>

Doesn't appear to work?

Csaba Adam Meszaros Over a year ago

Change this from $(document).on('change', '#dlnum input', function (e) to $(document).on('change', '#Bolo_DLNum', function (e) and it should work.

|

mohamedrias · Accepted Answer · 2015-04-09 15:22:52Z

I'm just checking if that value is present in the textarea, if it's present then am removing it via array splice method.

$("#delete").on("click", function() {
  var value = $("#quickLinksTextbox input").val();  
  var textareaEl = $('#quickLinksURLs');
  var textareavalue = textareaEl.val().split("\n");
  if(textareavalue.indexOf(value) >= 0) {
     textareavalue.splice(textareavalue.indexOf(value),1);
     textareaEl.val(textareavalue.join("\n"));
  }
});

Here is the full demo:

$(document).on('keypress', '#quickLinksTextbox input', function (e){
   
var inputEl = $(this);
var textareaEl = $('#quickLinksURLs');

//Enter was pressed
if(e.keyCode == 13){
     
    //If input have any text
    if($(inputEl).val().length){
        
        //Appending word (with ending new line) to textarea
        $(textareaEl).val($(textareaEl).val()+$(inputEl).val()+"\r\n");
        
        //Cleaning input
        $(inputEl).val('');
    }
        
    return false;
}
});

$("#delete").on("click", function() {
  var value = $("#quickLinksTextbox input").val(),
  textareaEl = $('#quickLinksURLs'),
  textareavalue = textareaEl.val().split("\n");
  if(textareavalue.indexOf(value) >= 0) {
      textareavalue.splice(textareavalue.indexOf(value),1);
      textareaEl.val(textareavalue.join("\n"));
      $("#quickLinksTextbox input").val('');
  }
});

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div id="quickLinksTextbox">
 <input>
</div>
<textarea id="quickLinksURLs" rows="5"></textarea>

<button id="delete">Delete</button>

Collectives™ on Stack Overflow

Add/Remove Textbox Value from Textarea

2 Answers 2

8 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Linked

Related