jqueryでテキストボックスの値を設定する方法

jqueryを使用して特定の値をテキストボックスに適切にロードするにはどうすればよいですか？以下の1つを試してみましたが、[object Object]出力として得られます これについて教えてください、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>

URLへの呼び出しの応答を'compz.php?prodid=' + x + '&qbuys=' + yテキストボックスの値として設定したいと思いますよね？もしそうなら、あなたは次のようなことをしなければなりません：

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

参照： get()

コードに2つのエラーがあります。

• load()Ajaxから返されたHTMLを指定された要素に配置します。

  サーバーからデータを読み込み、返されたHTMLを一致した要素に配置します。

  その方法ではテキストボックスの値を設定できません。

• $(selector).load()jQuery オブジェクトを返します。デフォルトでは、オブジェクトは[object Object]文字列として扱われるときに変換されます。

さらに明確化：

あなたのURLが戻ると仮定します5。

HTMLが次のようになっている場合：

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

その後の結果

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

になります

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

しかし、コードにはinput要素があります。理論的には（これは有効なHTMLではなく、気づかなかったように機能しません）、同等の呼び出しは

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

しかし、実際に必要なのは

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

したがって、は使用できませんload()。別のメソッドを使用して応答を取得し、自分で値として設定する必要があります。

この.value属性はJavaScript機能であることに注意してください。jQueryを使用する場合は、以下を使用します。

$('#pid').val()

値を取得します。

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

それを設定します。

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

2番目の問題については、loadメソッドを使用してHTML値を自動的に設定しようとしたことがありません。確かに、あなたはこのようなことをすることができます：

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

上記のコードはテストされていないことに注意してください。

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

.val（）はselectでも機能し、現在選択されている値を選択することを指摘しておきます。

試す

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>