'stepUp' called on an object that does not implement interface HTMLInputElement

Question

I have a dropdown of countries with id #country. I am trying to pass the value selected as a ajax request to a php file - countrycode.php and pass the value received to another input field with id #tele.. My code is as follows:

<script>
$('#country').change(function() {
    //var country = $(this).val();
    var country = $('#country').val();
    //alert(country);
});
                $.ajax({
                    type: "POST",
                    url: 'countrycode.php',
                   data: { country : country },
                    success: function(data)
                    {
                       $("#tele").html(data);
                    }
                });
</script>

The alert(country); displays the correct country selected. I tried using:

var country = $(this).val();

too with correct alert message.

The problem is with the:

data: { country : country },

i am receiving error: TypeError: 'stepUp' called on an object that does not implement interface HTMLInputElement

I tried all the answers in Stackoverflow..but cannot understand the reason why it is not working ????

Answer 1

Your country variable is inside change function. So it will be undefined for ajax. I think it must be global.

Can you try this?

<script>
      var country;
      $('#country').change(function() {
            //var country = $(this).val();
            country = $('#country').val();
            //alert(country);
            $.ajax({
                type: "POST",
                url: 'countrycode.php',
                data: { country : country },
                success: function(data)
                      {
                         $("#tele").val(data);
                      }
            });
      });
</script>