JQuery - Get the correct SELECTED-value by click of button when two buttons are in two separate forms using ONE function

Question

I deleted my last question from yesterday, and I have read to understand what to ask. So here I go again:

I am trying to get my script to get the correct value from the select, based on which button is clicked.

I have the following small redirecting script:

  (function($){
      // bind change event to select
      $("#button1,#button2").on('click', function () {
          var url =  $("#form-field-dynamic_select :selected").val();// get selected value
          if (url) { // require a URL
              window.location = url; // redirect
          }
          return false;
      });
  })(jQuery);

I have this html:

FORM 1:

FORM 2:

The way this works as of now, is that in FORM 1 - it works like it should, but in FORM 2 - it redirects to /page2 on both selects.

How can I get it so on FORM 2, it also redirects correctly to /page3 and /page4 if those selects are selected by user?

I am brand new to this, so feel free to explain how I need to think :)

EDIT

What I do understand is that my form-field-dynamic_select should be unique for each form, and so it should be different in the var URL, and I have played around with getElementByID(), but I just could not get that right.

If necessary for a modification on the script, I am able to rename the second select ID to something else.

user_3926618 · Answer

Rename the second select id to something else. Also you could try this

(function($){
      // bind change event to select
      $("#button1").on('click', function () {
          var url =  $("#form-field-dynamic_select :selected").val();// get selected value
          if (url) { // require a URL
              console.log(url);
              //window.location = url; // redirect
          }
          return false;
      });
      $("#button2").on('click', function () {
          var url =  $("#form-field-dynamic_select1 :selected").val();// get selected value
          if (url) { // require a URL
              console.log(url);
              //window.location = url; // redirect
          }
          return false;
      });
  })(jQuery);

user_10606400 · Answer

You can simply use .closest("form") to get form where button has been clicked and then using .find() & .val() get select-box value.

Demo code :

(function($) {
  $("#button1,#button2").on('click', function() {
    //use `this` (current button refernce) get form then slect value 
    var url = $(this).closest("form").find("select").val();
    if (url) {
      //window.location = url; // redirect
      console.log(url)
    }
    return false;
  });
})(jQuery);


FORM 1:

  
  

FORM 2:

JQuery - Get the correct SELECTED-value by click of button when two buttons are in two separate forms using ONE function

2 Answers