user3790186 user3790186 - 1 year ago 119
Javascript Question

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

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 Source

Your country variable is inside change function. So it will 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>