TypeError: stepUp called on an object that does not implement interface HTMLInputElement

TypeError: stepUp called on an object that does not implement interface HTMLInputElement

I have this code
Find/Add Horse

And I do ajax call when I click one the link
$(document).on(‘click’, ‘.find_or_add_horse’, function () {
var search_term = $(this).parents(‘.sub-middle-column’).find(‘.search_horse’);
var box_no = $(this).data(‘box_no’);

$.ajax({
url: “/startup_wizard/find_horse”,
dataType: ‘script’,
type: ‘GET’,
data: { box_no: box_no, search_term: search_term}
});
return false;

});

But when I click on the link I get this error “TypeError: ‘stepUp’ called on an object that does not implement interface HTMLInputElement” when I remove this code from ajax call
data: { box_no: box_no, search_term: search_term}

my code just work fine. Why this is happening and how to fix this? How can I send the data?

Solutions/Answers:

Solution 1:

If search_term is an input field you might want to get its value.

var search_term = $(this).parents('.sub-middle-column').find('.search_horse').val();

Right now you are referencing a jQuery Object containing a HTMLDom-Element but I think what you want is the string inside the search input element.

Solution 2:

TypeError: stepUp called on an object that does not implement interface HTMLInputElement comes when you forget # sign for(id) and . sign for class. when we can get value directly without . or # sign.

Related:  How to use JQuery to select the nth option

Wrong method:
- var email = $('PHMC_email').val();

Correct Method:

-var email = $('#PHMC_email').val(); Or
var email = $('.PHMC_email').val();

References