How to set textbox value in jQuery?

Question

How do I properly load the a certain value into a textbox using jQuery? Tried the one below but I get the [object Object] as output. Please enlighten me on this, I'm new to jQuery.

proc = function(x, y) {
  var str1 = $('#pid').value;
  var str2 = $('#qtytobuy').value;
  var str3 = $('#subtotal').load('compz.php?prodid=' + x + '&qbuys=' + y);
  $('#subtotal').val(str3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form name="yoh" method="get">
  Product id: <input type="text" name="pid" value=""><br/> 
  Quantity to buy:<input type="text" name="qtytobuy" value="" onkeyup="proc(document.yoh.pid.value, this.value);"></br>

  Subtotal:<input type="text" name="subtotal" id="subtotal" value=""></br>
  <div id="compz"></div>

</form>

Answer 1

I think you want to set the response of the call to the URL 'compz.php?prodid=' + x + '&qbuys=' + y as value of the textbox right? If so, you have to do something like:

$.get('compz.php?prodid=' + x + '&qbuys=' + y, function(data) {
    $('#subtotal').val(data);
});

Reference: get()

You have two errors in your code:

• load() puts the HTML returned from the Ajax into the specified element:

  Load data from the server and place the returned HTML into the matched element.

  You cannot set the value of a textbox with that method.

• $(selector).load() returns the a jQuery object. By default an object is converted to [object Object] when treated as string.

Further clarification:

Assuming your URL returns 5.

If your HTML looks like:

<div id="foo"></div>

then the result of

$('#foo').load('/your/url');

will be

<div id="foo">5</div>

But in your code, you have an input element. Theoretically (it is not valid HTML and does not work as you noticed), an equivalent call would result in

<input id="foo">5</input>

But you actually need

<input id="foo" value="5" />

Therefore, you cannot use load(). You have to use another method, get the response and set it as value yourself.

Answer 2

Note that the .value attribute is a JavaScript feature. If you want to use jQuery, use:

$('#pid').val()

to get the value, and:

$('#pid').val('value')

to set it.

http://api.jquery.com/val/

Regarding your second issue, I have never tried automatically setting the HTML value using the load method. For sure, you can do something like this:

$('#subtotal').load( 'compz.php?prodid=' + x + '&qbuys=' + y, function(response){ $('#subtotal').val(response);
});

Note that the code above is untested.

http://api.jquery.com/load/

Answer 3

I would like to point out to you that .val() also works with selects to select the current selected value.

Answer 4

try

subtotal.value= 5 // some value

proc = async function(x,y) {
  let url = "https://server.test-cors.org/server?id=346169&enable=true&status=200&credentials=false&methods=GET&" // some url working in snippet
  
  let r= await(await fetch(url+'&prodid=' + x + '&qbuys=' + y)).json(); // return json-object
  console.log(r);
  
  subtotal.value= r.length; // example value from json
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form name="yoh" method="get"> 
Product id: <input type="text" id="pid"  value=""><br/>

Quantity to buy:<input type="text" id="qtytobuy"  value="" onkeyup="proc(pid.value, this.value);"></br>

Subtotal:<input type="text" name="subtotal" id="subtotal"  value=""></br>
<div id="compz"></div>

</form>