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

Question

I have this code

<a data-remote="true" data-box_no="1" class="find_or_add_horse" href="#">Find/Add Horse</a>

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?

question from:https://stackoverflow.com/questions/22962933/typeerror-stepup-called-on-an-object-that-does-not-implement-interface-htmlinpu

Answer 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.