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

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);
        }
    });

CodePudding user response：

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>

CodePudding user response：

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);
        }

CodePudding user response：

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();
       }
     }
});