Getting HTML object and passing it as a string in jQuery

Question

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?

I was only thinking toString() this whole time, but what about on error or success function, I am trying to output value as shown in console, but only shows when have string type as "error". but I tried ex.message.val() for the error function, but not showing. — Alejandro H
– Alejandro H, Commented Mar 6, 2020 at 2:25
the error function happens when the server responds an http error. In your code you set the value of input messageDisplay as a static string "error" so when the error function executes it displays error not the exact error message — Shadow Fiend
– Shadow Fiend, Commented Mar 6, 2020 at 2:37
hmmm... so how could this message, "Something wasnt selected properly" be displayed in #messageDisplay as shown in the console? in success? and does itemInput.message need to be changed to itemInput.message.val() as well? — Alejandro H
– Alejandro H, Commented Mar 6, 2020 at 2:47
Have you change the the .toString to .val()? if yes, does this message object still displays? if yes, try to check the ajax page on what output you are hoping to receive. You dont need to change it to itemInput.message.val() the itemInput variable holds the response or data outputed by your ajax call. — Shadow Fiend
– Shadow Fiend, Commented Mar 6, 2020 at 2:56

Sean Moody · Accepted Answer · 2020-03-06 02:20:53Z

1

The .val() function is what you need to use, so var id = $("#itemID").val(); should get you the value of the input field.

Source: https://www.tutorialrepublic.com/faq/how-to-get-the-value-in-an-input-text-box-using-jquery.php

answered Mar 6, 2020 at 2:20

Sean Moody

3801 gold badge2 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John Clinton · Accepted Answer · 2020-03-06 04:45:48Z

try using this and let me know if there is an error

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

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

                        message.val("error");
                    }

                })

            })
        });

Collectives™ on Stack Overflow

Getting HTML object and passing it as a string in jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related