Detect change in textbox value whose value changes on button click

Question

I have the following piece of code:

$(".select").click(function(){
  $("input").val($(this).text()).change();
});
$("input").change(function(){
  alert($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<button class="select">1</button>
<button class="select">2</button>
<button class="select">3</button>
<button class="select">4</button>

Here, when I select the same value by clicking a <button>, the .change() function gets fired anyways which makes it no different from any other function i.e. ruins its specialization of being triggered only on change in value.

A similar question exists on SO, but it does not give any answer to this issue.

How to solve this issue?

What is the issue? You do not what to trigger the change if the value has not changed? So add a check before you set the value. If(value is not the same) do XXX — epascarello
– epascarello, Commented Dec 27, 2014 at 14:21
then what's the purpose of .change() if I'm the one who is supposed to check the value? — Nikunj Madhogaria
– Nikunj Madhogaria, Commented Dec 27, 2014 at 14:22
UM, you change the value manually. Even when you call change and it would check, it would NOT know the previous value. You could write a custom fn method that sets the value and does it for you, but any way you do it, you will need to do a check. — epascarello
– epascarello, Commented Dec 27, 2014 at 14:24
So, does that mean I can't detect the change in the textbox (in this case), solely using .change() method without using any conditions? — Nikunj Madhogaria
– Nikunj Madhogaria, Commented Dec 27, 2014 at 14:26

Ram · Accepted Answer · 2014-12-27 14:30:25Z

1

That's what .change() method without passing a handler does, triggering a change event. You should compare the values and trigger the event conditionally.

The change event is not fired when you change the value of an input programmatically. So as you are triggering the event manually (by using the change method), you should check the values yourself before triggering the event.

edited Dec 27, 2014 at 14:30

answered Dec 27, 2014 at 14:20

Ram

145k16 gold badges174 silver badges201 bronze badges

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

4 Comments

Nikunj Madhogaria Over a year ago

then what's the purpose of .change() if I'm the one who is supposed to check the value?

Nikunj Madhogaria Over a year ago

Yes. That's right. If I remove that, it won't get triggered at all. Can't I detect change using .change() method and avoid condition checks?

Nikunj Madhogaria Over a year ago

If I'm not calling .change() method explicitly, it won't get fired implicitly. I hope you get my point now.

Ram Over a year ago

@theScorpion Unfortunately no. Detection needs condition(s) after all.

Sumit Kumar · Accepted Answer · 2014-12-27 14:22:22Z

0

Add if statement and it will work according to your need

$(".select").click(function(){
if($("input").val() != $(this).text())
  $("input").val($(this).text()).change();
});
$("input").change(function(){
  alert($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<button class="select">1</button>
<button class="select">2</button>
<button class="select">3</button>
<button class="select">4</button>

answered Dec 27, 2014 at 14:22

Sumit Kumar

4221 gold badge7 silver badges29 bronze badges

4 Comments

Nikunj Madhogaria Over a year ago

what I was looking for, was to avoid any condition checks and detect change solely using .change() method.

Sumit Kumar Over a year ago

Then change() is meant to change the content no matter what your text box contains, the same text or not, it will perform its function, you have to add check statement

Nikunj Madhogaria Over a year ago

That's not right. .change() is used for detecting change in an <input>. Here's an example: jsbin.com/lecuyimiko/1/edit?html,js,output

Sumit Kumar Over a year ago

Yeah, you are right i was too lame, my intentions were that if you click on your button then the text will change inside your textbox no matter if you have same text or not and it will trigger the .change() function

Collectives™ on Stack Overflow

Detect change in textbox value whose value changes on button click

2 Answers 2

4 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related