get value of an input using jquery and onchange

Question

I have a dynamic table in which I can add many rows as needed using jquery.

On this rows there is a select list dropdown. This select has a list. In function of the selected option, I try to do an ajax request and to apply the result in one of input of this rows.

The trouble I'm actually having is that I can not get the value of the selected list for the concerning rows. I added a class to the select list. The request is happening onchange but it can not get the value of the select list.

below is what I tried :

<script type="text/javascript">
            $().ready(function(){
            $('.debours_tva').change(function(e){
            var debours_id = $(this).closest("tr").find("input.debours_tva").val
            console.log(debours_id);
            var input = $(this).closest("tr").find("input.taux")
                $.ajax({
                url: 'requetes_ajax/check_taux_tva_debours.json.php',
                method: 'GET',
                data: 'debours_id=' + debours_id,
                success: function(returnData){
                    console.log(returnData);
                    if(returnData !=''){
                    input.removeAttr('value');
                    input.attr('value',returnData)
                    }else{

                    input.removeAttr('value');
                    input.attr('value',returnData)
                    }
                }, 
                dataType :'json'
                });
            });
            });
</script>

Actualy the problem met is that line

 var debours_id = $(this).closest("tr").find("input.debours_tva").val

that returns the following things instead of its value :

function ( value ) {
        var hooks, ret, isFunction,
            elem = this[0];

        if ( !arguments.length ) {
            if ( elem ) {
                hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];

                if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
                    return ret;
                }

                ret = elem.value;

                return typeof ret === "string" ?
                    // handle most common string cases
                    ret.replace(rreturn, "") :
                    // handle cases where value is null/undef or number
                    ret == null ? "" : ret;
            }

            return;
        }

        isFunction = jQuery.isFunction( value );

        return this.each(function( i ) {
            var val,
                self = jQuery(this);

            if ( this.nodeType !== 1 ) {
                return;
            }

            if ( isFunction ) {
                val = value.call( this, i, self.val() );
            } else {
                val = value;
            }

            // Treat null/undefined as ""; convert numbers to string
            if ( val == null ) {
                val = "";
            } else if ( typeof val === "number" ) {
                val += "";
            } else if ( jQuery.isArray( val ) ) {
                val = jQuery.map(val, function ( value ) {
                    return value == null ? "" : value + "";
                });
            }

            hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ];

            // If set returns undefined, fall back to normal setting
            if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) {
                this.value = val;
            }
        });
    } 

Anykind of help will be much appreciated.

Answer 1

You need to replace

.val

by

.val()

The first expression returns the function which is responsible for getting the value. The second will execute it and actually returns the field's value.