CODEWITHSUNDEEP
javascriptformstext
NB Mei
NB Mei

Reputation: 3

Delete specific text from form when clicked

Basically I want to make a function that, when the text is clicked, it prints the 'id' on the form. and when it's clicked again, only that 'id' is deleted (prior clicked/printed 'id's remain).

The print script I have so far:

function imprime01(obj) {
        document.form2.text.value = document.form2.text.value +  obj.title;
         }

the div

<div onclick="imprime01(this);" title="240 ">240</div>
<div onclick="imprime01(this);" title="230 ">230</div>
<div onclick="imprime01(this);" title="220 ">220</div>

So what I want is: when I click 240, 230 it prints "240 230" on the form, and when I click "240" again, it deletes only "240" from the form. Is there a way to achieve this?

Upvotes: 0

Views: 80

Answers (3)

gilly3
gilly3

Reputation: 91657

There are many ways to do this.

I would store your ids in an array. In your click handler, test for the existence of the id in your array and remove it if it exists, otherwise add it. Then write all the ids in the array to your text box:

var idList = [];
function imprime01(obj) {
    var id = obj.title;
    var idIndex = idList.indexOf(id);
    if (idIndex > -1) {
        idList.splice(idIndex, 1);
    }
    else {
        idList.push(id);
    }
    document.form2.text.value = idList.join(" ");
 }

This may be a little more involved than a simple string replacement, but it gives you other functionality that could be useful later. For example, if another part of your program needs to know which ids have been selected, they are already available in an array.

Edit: Rather than storing the array in a variable, you could generate it on the fly in your click handler with string.split(" "):

function imprime01(obj) {
    var id = obj.title;
    var idList = document.form2.text.value.split(" ");
    var idIndex = idList.indexOf(id);
    if (idIndex > -1) {
        idList.splice(idIndex, 1);
    }
    else {
        idList.push(id);
    }
    document.form2.text.value = idList.join(" ");
 }​

Working demo: http://jsfiddle.net/gilly3/qWRct/

Upvotes: 1

Oriol
Oriol

Reputation: 288650

See http://jsfiddle.net/BdEMx/

function imprime01(obj) {
    var arr=document.form2.text.value?document.form2.text.value.split(' '):[];
    var i=arr.indexOf(obj.title);
    if(i===-1){
        arr.push(obj.title);
    }else{
        arr.splice(i,1);
    }
    document.form2.text.value = arr.join(' ');
}

You shouldn't add a space at the end of title attributes only because you want to join some of them.

Upvotes: 0

mostar
mostar

Reputation: 4841

Use replace and indexOf functions:

var str = document.form2.text.value;
if(str.indexOf(obj.title) != -1)
    document.form2.text.value = str.replace(obj.title,""); 
else
    document.form2.text.value = str +  obj.title;

Upvotes: 0

Related Questions