user3790186 user3790186 - 7 months ago 13
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

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>