如何在 jQuery 中设置文本框的值？答案

【问题标题】：How to set textbox value in jQuery?如何在 jQuery 中设置文本框的值？
【发布时间】：2021-04-14 18:09:59
【问题描述】：

如何使用 jQuery 将某个值正确加载到文本框中？尝试了下面的一个，但我得到了[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>

【问题讨论】：

什么是str3？它在哪里声明？当您可能只需要该对象的属性时，您似乎正在尝试将对象加载为值-
抱歉，忘记设置 st3 = $('#subtotal').load('compz.php?prodid=' + x + '&qbuys=' + y);

标签： javascript jquery

【解决方案1】：

我想你想把对 URL 'compz.php?prodid=' + x + '&qbuys=' + y 的调用响应设置为文本框的值，对吧？如果是这样，您必须执行以下操作：

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

参考：get()

您的代码中有两个错误：

load()将从Ajax返回的HTML放入指定元素中：

从服务器加载数据并将返回的 HTML 放入匹配的元素中。

您不能使用该方法设置文本框的值。
$(selector).load() 返回一个 jQuery object。默认情况下，当将对象视为字符串时，会将对象转换为 [object Object]。

进一步说明：

假设您的网址返回5。

如果你的 HTML 看起来像：

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

那么结果

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

将会

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

但是在您的代码中，您有一个输入元素。 理论上（它不是有效的 HTML，并且不能像您注意到的那样工作），等效调用会导致

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

但你确实需要

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

因此，您不能使用load()。您必须使用另一种方法，获取响应并将其设置为自己的值。

【讨论】：

如果我只想更改结果的加载位置，真的会变得更加困难吗？当我将上面的代码加载到 div 中时，我的代码就可以正常工作了。
@Ieyasu Sawada：嗯，目前您正在将 JavaScript 对象传递给 $('#subtotal').val(str3);，因为 load() 不像您认为的那样有效。是的，您可以使用 load() 将文本或 HTML 加载到 div 中，但不能作为文本框值。
@Ieyasu Sawada：请参阅我的更新以获得进一步的说明，希望对您有所帮助！
最后一个问题？为什么我会在输出的实际结果之前得到空格？是否可以在 jquery 中去除它们，基本上 compz.php 包含大量空格以提高可读性，而这些空格实际上是与结果一起输出
@Ieyasu Sawada：您可以使用普通的 JavaScript 函数，例如正则表达式：data = data.replace(/\s+/, '');

【解决方案2】：

请注意，.value 属性是 JavaScript 功能。如果你想使用 jQuery，请使用：

$('#pid').val()

获取值，并且：

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

设置它。

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

关于您的第二个问题，我从未尝试使用 load 方法自动设置 HTML 值。当然，你可以这样做：

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

请注意，上面的代码未经测试。

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

【讨论】：

值得指出val()的相关jQuery api页面，以供参考。
即使是太基本的指出来，也许吧？只是我的拙见......无论如何更新！
compz.php 计算输入中两个数字的乘积。我猜是加载计算值的部分： $('#subtotal').load('compz.php?prodid=' + x + '&qbuys=' + y);被视为对象，这就是为什么我将对象对象视为输出，那么如何将其转换为正常值
永远不会太基础，再看问题。如果他看过这个页面，或者知道它的内容，他可能不会问这个问题 =)
指出真正的问题会是一个很好的起点和平与爱;）

【解决方案3】：

我想向您指出，.val() 也适用于 selects 以选择当前选定的值。

【讨论】：

【解决方案4】：

试试

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>

【讨论】：