CODEWITHSUNDEEP
jquery
Sarasota Tim
Sarasota Tim

Reputation: 11

Add/Remove Textbox Value from Textarea

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

Upvotes: 1

Views: 1321

Answers (2)

Csaba Adam Meszaros
Csaba Adam Meszaros

Reputation: 124

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

Upvotes: 1

mohamedrias
mohamedrias

Reputation: 18566

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>

Upvotes: 0

Related Questions