How to append and delete text from an input

Question

Ok when i click on an button with the class "allas" i want that jquery appends the text of the button to my input with the id "inputbox". So far all works good:

$(document).ready(function() {
    $('.allas').click(function() {
        $('#inputbox').val($(this).text());
    });
});

But first problem is that my code always replaces the input val, when i click on another button with the class "allas". I want that jquery adds the value seperated by an ;

And "i think the more difficult part" i want an undo function, that when the user clicks again on an button that he yet has pressed the value of the button should be delted from the input!

I hope you understand me? Thanks for help!

http://jsfiddle.net/WcCTe/

can you post a part of your html

Pumpkinpro
– Pumpkinpro

2013-07-21 12:21:08 +00:00
Commented Jul 21, 2013 at 12:21 — Pumpkinpro
– Pumpkinpro, Commented Jul 21, 2013 at 12:21
jsfiddle.net/WcCTe

Em Sta
– Em Sta

2013-07-21 12:23:56 +00:00
Commented Jul 21, 2013 at 12:23 — Em Sta
– Em Sta, Commented Jul 21, 2013 at 12:23

Khanh TO · Accepted Answer · 2013-07-21 12:42:17Z

1

A simple way to do it:

 var inputValues = [];
 $(document).ready(function() {
    $('.allas').click(function() {
        var inputValue = $(this).text();
        var index = inputValues.indexOf(inputValue);
        if (index  >= 0){
           inputValues.splice(index,1);
        }
        else{
           inputValues.push(inputValue); 
        }
        $('#inputbox').val(inputValues.join(";"));
    });
});

DEMO

If you don't want to store global variable, try this:

$(document).ready(function() {
    $('.allas').click(function() {
        var inputValues = [];
        if ($('#inputbox').val() != "")
        {
            inputValues = $('#inputbox').val().split(";");
        }
        var inputValue = $(this).text();
        var index = inputValues.indexOf(inputValue);
        if (index  >= 0){
           inputValues.splice(index,1);
        }
        else{
           inputValues.push(inputValue); 
        }
        $('#inputbox').val(inputValues.join(";"));
    });
});

DEMO

edited Jul 21, 2013 at 12:42

answered Jul 21, 2013 at 12:23

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

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

2 Comments

Em Sta Over a year ago

Your code is shocking good!! Man thank you!!! And only in 14 lines, youre a god!!

Khanh TO Over a year ago

@Em Sta: glad to hear that. Hope it helps.

Tomas Santos · Accepted Answer · 2013-07-21 12:43:53Z

Try keeping a history of the value.

Fiddle Demo

HTML

<input type="text" id="inputbox" value=""><br>
<button class="allas">one</button>
<button class="allas">two</button>
<button class="allas">three</button>
<button class="undo">undo</button>

Document Ready

$(function() 
{
    var history = [''];

    $('.allas').click(function() 
    {
        var $this = $(this);
        var $inputbox = $('#inputbox');
        var value = $inputbox.val() + $(this).text();
        history.push(value) 
        $inputbox.val(value);
    });

    $('.undo').click(function()
    {
        history.pop();
        var lastIndex = history.length - 1;
        var $inputbox = $('#inputbox');
        var value = history[lastIndex];
        $inputbox.val(value);

    }); 
});

Collectives™ on Stack Overflow

How to append and delete text from an input

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related