CODEWITHSUNDEEP
javascriptjquery
csling
csling

Reputation: 328

How do you listen for multiple field changes in javascript?

I currently have the following code to update a URL. How do I combine this into something more robust so that I'm not repeating myself 3 times basically. I only want this to update when one of the fields is changed.

$(document).ready(function(){
  $('#device_select').change(function() {
      var device = $(this).val();
      var face = $('#face_select').val();
      var position = $('#position_select').val();
      document.getElementById("add_dev_rack").href="127.0.0.1:8080/dcim/devices/"+device+"/edit/?face="+face+"&position="+position;
  });
  $('#face_select').change(function() {
      var device = $('#device_select').val();
      var face = $(this).val();
      var position = $('#position_select').val();
      document.getElementById("add_dev_rack").href="127.0.0.1:8080/dcim/devices/"+device+"/edit/?face="+face+"&position="+position;
  });
  $('#position_select').change(function() {
      var device = $('#device_select').val();
      var face = $('#face_select').val();
      var position = $(this).val();
      document.getElementById("add_dev_rack").href="127.0.0.1:8080/dcim/devices/"+device+"/edit/?face="+face+"&position="+position;
  });
});

Upvotes: 3

Views: 1070

Answers (3)

Anatoly Strashkevich
Anatoly Strashkevich

Reputation: 1914

What about this approach ? 

$(document).ready(function(){
        ['#position_select',  '#device_select',  '#face_select'].forEach(
            function(ev){
                $(ev).change(function() {
                    var device = $('#device_select').val();
                    var face = $('#face_select').val();
                    var position = $('#position_select').val();
                    document.getElementById("add_dev_rack").href="127.0.0.1:8080/dcim/devices/"+device+"/edit/?face="+face+"&position="+position;
                });
            }
        )
    }
    )

Upvotes: 1

Queder
Queder

Reputation: 310

Why not encapsulate your code in a function?

function updateURL() {
  var device = $('#device_select').val();
  var face = $('#face_select').val();
  var position = $('#position_select').val();
  document.getElementById("add_dev_rack").href="127.0.0.1:8080/dcim/devices/"+device+"/edit/?face="+face+"&position="+position;
}

You can then call the function anytime you want :

$(document).ready(function(){
  $('#device_select').change(updateURL);
  $('#face_select').change(updateURL);
  $('#position_select').change(updateURL);
});

Even better, you could add a second function so your code is more readable :

function listenForChanges(){
  $('#device_select').change(updateURL);
  $('#face_select').change(updateURL);
  $('#position_select').change(updateURL);
}

And call this function on document.ready :

$(document).ready(listenForChanges);

Upvotes: 3

Matej Žvan
Matej Žvan

Reputation: 766

$('#position_select, #device_select, #face_select').change(function() {
      var device = $('#device_select').val();
      var face = $('#face_select').val();
      var position = $('#position_select').val();
      document.getElementById("add_dev_rack").href="127.0.0.1:8080/dcim/devices/"+device+"/edit/?face="+face+"&position="+position;
  });

Have you tried somethign like this?

Upvotes: 5

Related Questions