Jquery/Javascript how to change button click function based on select option in dropdown menu?

Question

I have a submit button which calls a specific method based on the selected <option> by the user. The problem is both the previous and current addEventListener with their corresponding method gets called when I press the submit button. Both function one and two gets executed. I only want to execute functiontwo if the dropdown value is 2 and the user presses the submit button. What am I doing wrong?

HTML:

<select class="div-toggle" id="filter-list" data-target=".my-info-1">
    <option value="1" data-show=".1">Option 1</option>
    <option value="2" data-show=".2">Option 2</option>
</select>

<button  id="submitbutton">Submit</button>

JQuery/JavaScript:

I use the if pathname here because I use one general JavaScript file. If I declare the eventlistener outside functions I get undefined error on other pages because it can't find the element.

var btnsubmit = document.getElementById("submitbutton");


if (window.location.pathname=='/test/testpage.html') {
    $('#filter-list').on('change', function() {
        if(this.value == '1'){
            btnsubmit.addEventListener('click', functionOne);
        } else if(this.value == '2'){
            btnsubmit.addEventListener('click', functionTwo);
        }
    });

Well if you want to do it that way, then you obviously need to remove the existing event handler, when you add the "other" one. Much simpler of course would be to use only one event handler, assigned one single time - and then from in there call either functionOne or functionTwo. — C3roe
– C3roe, Commented Nov 25, 2021 at 12:52

Simone Rossaini · Accepted Answer · 2021-11-25 12:51:25Z

1

Instead of your method you can choise which function on button click base to select value like:

document.querySelector('#submitbutton').addEventListener('click', () => {
  
  var valueSelect = document.querySelector('#filter-list').value;
  if (valueSelect === '1') {
    functionOne();
  } else {
    functionTwo();
  }

});

function functionOne(){
  console.log('one');
}

function functionTwo(){
  console.log('two');
}

<select class="div-toggle" id="filter-list" data-target=".my-info-1">
  <option value="1" data-show=".1">Option 1</option>
  <option value="2" data-show=".2">Option 2</option>
</select>

<button id="submitbutton">Submit</button>

answered Nov 25, 2021 at 12:51

Simone Rossaini

8,1461 gold badge16 silver badges36 bronze badges

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

Comments

KreutzerCode · Accepted Answer · 2021-11-25 12:52:47Z

0

You need to unsubscribe from the previously set EventListener.

Something like this:

        if (this.value == '1') {
            btnsubmit.addEventListener('click', functionOne);
            btnsubmit.removeEventListener('click', functionTwo);
        } else if (this.value == '2') {
            btnsubmit.addEventListener('click', functionTwo);
            btnsubmit.removeEventListener('click', functionOne);
        }

answered Nov 25, 2021 at 12:52

KreutzerCode

4341 gold badge5 silver badges21 bronze badges

Comments

Davison Joseph · Accepted Answer · 2021-11-25 13:03:21Z

0

You can try something like this

$('#submitbutton').on('click', function() {
    if (window.location.pathname=='/test/testpage.html') {
       if($('#filter-list').val() == '1'){
          functionOne();
       } else if($("#filter-list").val() == '2'){
          functionTwo();
       }
     }
});

answered Nov 25, 2021 at 13:03

Davison Joseph

716 bronze badges

Collectives™ on Stack Overflow

Jquery/Javascript how to change button click function based on select option in dropdown menu?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related