Remove certain text value from list of buttons

Question

I have a list of buttons. When one is clicked it appends the text "selected'" to the existing value of the button.

When one button is clicked I want to removed the text "selected" from the other buttons if the text is there.

Basically it should be like - Loop through all the buttons in the area (they all have a class of searchResult) and remove the value "selected" from each button if it is there.

Here is the code for each button:

<input type="button" class="searchResult" onclick="$(\'#usersToSend > *\').css(\'background-color\', \'#fff\');
var oldValue = this.value;
this.value=\'(selected) \' + oldValue; this.style.backgroundColor = \'#51CA3E\';
document.getElementById(\'hiddenUserFlag\').value = \''.$row['id'].'\';"
value="'.$row['username'].'">

Here is the code bit to pay attention to:

$(\'#usersToSend > *\').css(\'background-color\', \'#fff\');
var oldValue = this.value;
this.value=\'(selected) \' + oldValue;
this.style.backgroundColor = \'#51CA3E\';

Possible duplicate of http://stackoverflow.com/questions/10215792/javascript-change-value-of-button — Marcus Rommel, Sep 28 '14 at 15:09
Add some of your code or create fiddle, that reproduces behavior of your situation. -1 for creating video, that is totally not required. Explain your problem in writing. Good question is part of answer. — Deele, Sep 28 '14 at 15:11
I could see how you might think that http://stackoverflow.com/questions/10215792/javascript-change-value-of-button might be a duplicate answer, but for my question the button value is assigned from a database and I don't want to reload anything. Also as I said the best way of doing this would be to loop through each button inside the 'usersToSend' div and then remove the value '(selected)' if '(selected)' is there. — www139, Sep 28 '14 at 15:14
To escape (') because it's inside a php script sent in via ajax. — www139, Sep 28 '14 at 15:56

T J · Accepted Answer · 2014-09-28T15:32:51.143

1

You can use the :contains() selector and the text() method as shown below:

$("button").click(function(){
  $("button:contains('selected')").text(function(){
    return this.innerHTML.replace("selected","");
  })
  this.innerHTML+= "selected";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>button-</button>
<button>button-</button>
<button>button-</button>

Update: The above will not work with <input> buttons. for those, use .filter() and .val() methods asfollows:

$(":input").click(function(){
  $(":input").filter(function(){
    return this.value.indexOf("selected") > 0
  }).val(function(){
    return this.value.replace("selected","");
  })
  this.value+= "selected";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="button-" />
<input type="button" value="button-" />
<input type="button" value="button-" />

edited Sep 28 '14 at 15:32

answered Sep 28 '14 at 15:15

T J

42,762
13
83
138

Thank you looks promising. I'll try it! :D – www139 Sep 28 '14 at 15:17
In the end I ended up just doing changing of background color instead of changing text value because of other issues as well. Thank you all so much for your helpful answers and comments! – www139 Sep 28 '14 at 15:52
The code snippet would work well for the situation you proposed. However, for me the buttons are created with a php script and sent in by ajax. All the script which I posted was inline script. That's also why I had to do \' to escape (') – www139 Sep 28 '14 at 15:55
@user3011082 i just asked out of curiosity... While replying to a comment, Please reply back below the respective comment otherwise it'll confuse somebody else.. :) – T J Sep 28 '14 at 16:00

Remove certain text value from list of buttons

1 Answers1