Getting HTML object and passing it as a string in jQuery

I am trying to get the values of id and amount from html element with jQuery, but I am trying to figure out how to get the value and pass it a string.

Here is my HTML input elements totalAmountIn changes value as a float number:

<input type="text" value="0.00" id="totalAmountIn" readonly="readonly"></input><div class="col-md-4"><h1>Message</h1><input type="text" value="" id="messageDisplay" readonly="readonly"></input><h3>Item:</h3><input type="text" value="" id="itemId"></input><div class="col-md-4"><button type="button" id="makePurchase" class="btn btn-default">
            Make Purchase</button></div></div>

I have tried to use the object such as $("#itemId") and pass it a string using toString(), but I am not getting the actual input.

$("#makePurchase").on("click", function () {
        var id = $("#itemId").toString();
        var amount = $("#totalAmountIn").toString();
        var message = $("#messageDisplay");

        $.ajax({
            type: 'GET',
            url: 'http://localhost:8080/money/' + amount + '/item/' + id,
            success: function(itemInput) {
                message.val(itemInput.message);
            },
            error: function(ex) {

                message.val("error");
            }

        })

    })

I noticed that the each variable is being passed as [object%20Object], perhaps I am not getting the value correctly, how should I be doing this?