how to use jquery get request on drop down change

Question

I have a drop down. whenever user changes it to a particular field. I want to go back to the server (send the selected id) and get a response back. Response back will basically be 1 or 2

If it is 1. then I want to disable an element with id one

if it is 2. then I want to disable an element with id two

How can i achieve this using jquery?

what I have so far:

$('#product_prod_name').change(function () 
  {get('/pages/response_back'
});

I'm kind of lost with jquery..

Answer 1

If I understand you correctly, the following should be a step in the right direction:

// Once the change event fires
$("#product_prod_name").change(function(){
  // Fire a GET request to server with present value
  $.get("/pages/response_back", {"var":$(this).val()}, function(result) {
    $("#"+result).attr("disabled", "disabled"); // should be #1 or #2
  });
});

This assumes that your server will always respond with "1" or "2". If it can have some other response, you may want to make this a switch, or some other conditional check prior to disabling the element.

Answer 2

$("#product_prod_name").change(function() {
  $.get("/pages/response_back", { name: $(this).val() }, function(result) {
    $("#one").toggle(result == 1);
    $("#two").toggle(result == 2);
  });
});

This will properly show/hide each element regardless of the number of times the user changes the selection. If the server returns 1, it'll show #one and hide #two. Vice-versa, if the server returns 2, it'll show #two and hide #one. I've made it explicit for you to easily understand what's going on. Take a look at http://api.jquery.com/toggle/