.change() adds two values at the same time

Question

Good day, In my code, I need to use a drop-down list that has two values, say 1 and 2. When I click the #action-link link I append the corresponding text of the value into a textarea (#main-reply). I use Jquery .change() method to determine when selected value changed. Works ok unless I switch options several times and then it starts to add multiple values at a time even though I need insert in textarea only the corresponding value.

Here is a simple snippet of the code I use:

$("#action-link").click(function() {
  if ($("#option").val() == 1) {
    $("#main-reply").append("One");
  }
});

$("#option").change(function() {
  if ($(this).val() == 2) {
    $("#action-link").click(function() {
      $("#main-reply").append("Two");
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="option"><option value='1' selected>One</option><option value='2'>Two</option></select>
<a href="#" id="action-link">Add Value to textarea</a>
<br>
<textarea id="main-reply"></textarea>

How can I solve this? Thanks!

you bind a new event to your action link every time the option is changed and the val is 2. do an else if in your original click function then you don't need to bind in your change. If you want to change the value in the textarea on change then do that - do not bind another event handler — Pete, Jul 09 '18 at 13:56
I think it's a bad idea - simply add the selected option text in the handler, like `$('#main-reply').append($('#option > option:selected').text());`. — Chayim Friedman, Jul 09 '18 at 14:30

score 1 · Answer 1 · answered Jul 09 '18 at 14:15

Code adds another on-click listener when the value of the option was changed to '2' Link. Therefore the append() statament was being called multiple times, one from each listener.

$("#action-link").click(function() {
  var option = $("#option").val();
  if (option == 1) $("#main-reply").append("One");
  else if(option == 2) $("#main-reply").append("Two");
});

Vignesh Subramanian · Answer 2 · 2018-07-09T17:20:19.060

Most of the times, this issue occurs when you load the same js file twice.

When JS file gets loaded twice, 2 on change events will get attached to the same event. Hence the actions will happen twice

Check your code and make sure that the JS file is not loaded twice

If it's not loaded twice and somehow this issue is still occurring, then use below code

$("#option").off().on("change",function() {
  if ($(this).val() == 2) {
    $("#action-link").click(function() {
      $("#main-reply").append("Two");
    });
  }
});

This will remove any events attached to the change event and then adds the function

anomepani · Answer 3 · 2018-07-09T14:30:41.217

In your code click event is added on every change event for option value 2, which is not a good way as well.

You can write code as below

$("#action-link").click(function() {
  if ($("#option").val() == 1) {
    $("#main-reply").append("One");
  } else if ($("#option").val() == 2) {
    $("#main-reply").append("Two");
  }
});

$("#option").change(function() {
 // Just trigger click on change which handle other stuff
$("#action-link").trigger("click);
  // You can write use below code as well.
  // $("#action-link").click();

});

OR you can make it very simple as below which is dynamic regardless of any option value which will adds selected option value.

$("#action-link").click(function() {
   appendOptionValue($("#option").val()); 
});

$("#option").change(function() {
 appendOptionValue($("#option").val());
});

function appendOptionValue(optionValue){
     $("#main-reply").append(optionValue);
}

score 0 · Answer 4 · answered Jul 09 '18 at 14:33

this is it :

var val = $("#option").val();

$("#action-link").click(function() {
    $("#main-reply").append(val);
});

$("#option").change(function() {
  val = $(this).val();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="option">
  <option value='One' selected>One</option>
  <option value='Two'>Two</option>
</select>
<a href="#" id="action-link">Add Value to textarea</a>
<br>
<textarea id="main-reply"></textarea>

score 0 · Answer 5 · answered Jul 09 '18 at 14:35

this might helpful to you. Use text() instead of append

$(document).ready(function(){

        $('#action-link').click(function(event) {
            if($('#option').val()==1){
              $('#main-reply').text('one');
            }else{
             $('#main-reply').text('two');

            }

        });

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="option"><option value='1' selected>One</option><option value='2'>Two</option></select>
<a href="#" id="action-link">Add Value to textarea</a>
<br>
<textarea id="main-reply"></textarea>

.change() adds two values at the same time

5 Answers5