Event binding using jQuery

Question

I am trying to display city options based on State selected, where states are dynamically loaded according to selected country (country list is static). but the problem is my action page which receives the data from ajax is not receiving any value for state. This is my first try for event binding so please help.

$(document).ready(function() {
  $('#country').change(function() {
    var value = $(this).val();
    $.ajax({
      url: "state_selector_db.php",
      method: "post",
      data: {
        "country": value
      },
      success: function(result) {
        var obj = jQuery.parseJSON(result)
        $('div#state').html(obj.state);
      }
    });
  });
  $('body').on("change", function() {
    var value2 = $(this).val();
    $.ajax({
      url: "state_selector_db.php",
      method: "post",
      data: {
        "state": value2
      },
      success: function(res) {
        var obj2 = jQuery.parseJSON(res)
        $('div#city').html(obj2.city);
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><b>Country:&nbsp</b>
</p>
<select id="country">
  <option value="na">Select</option>
  <option value="india">India</option>
  <option value="usa">USA</option>
  <option value="england">England</option>
</select>
<div id="state"></div>
<div id="city"></div>

Did you check if the php script you're sending the request to sends the correct data as valid JSON? — MildlySerious
– MildlySerious, Commented Mar 23, 2015 at 11:55
Actually, using $('body').change, you're directly refering to the body. Despite it might be working, the $(this) should then refere to the body, rather than an input change, shouldn't it? — briosheje
– briosheje, Commented Mar 23, 2015 at 11:56
@Mr.Polywhirl lol ;) I knew that for a long time now. What I meant is, change event is for form elements and doesn't fire when HTML changes! — lshettyl
– lshettyl, Commented Mar 23, 2015 at 12:02

Rohit Rehan · Accepted Answer · 2015-03-23 12:06:50Z

1

You are on the right track but you will need a little change in event binding

to bind events to select element that you have populated after ajax use following. change event is of select.

$(document).ready(function () {
    $('body').on("change", "div#state select", function () {
        var value2 = $(this).val();
        $.ajax({
            url: "state_selector_db.php",
            method: "post",
            data: {
                "state": value2
            },
            success: function (res) {
                var obj2 = jQuery.parseJSON(res)
                $('div#city').html(obj2.city);
            }
        });
    });
});

answered Mar 23, 2015 at 12:06

Rohit Rehan

5701 gold badge4 silver badges19 bronze badges

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

Comments

Manwal · Accepted Answer · 2015-03-23 11:57:01Z

0

Consider this following addition:

$('body').on("change", "#state", function () {
                       ^^^^^^^^

answered Mar 23, 2015 at 11:57

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

Collectives™ on Stack Overflow

Event binding using jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related