วิธีตั้งค่า textbox ใน jquery


107

ฉันจะโหลดค่าที่แน่นอนลงในกล่องข้อความโดยใช้ 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 คืออะไร? ประกาศไว้ที่ไหน? ดูเหมือนว่าคุณกำลังพยายามโหลดวัตถุเป็นค่าเมื่อคุณอาจต้องการคุณสมบัติจากวัตถุนั้น -
Fgblanch

ขออภัยลืมตั้งค่า st3 = $ ('# subtotal') load ('compz.php? prodid =' + x + '& qbuys =' + y);
Wern Ancheta

คำตอบ:


170

ฉันคิดว่าคุณต้องการตั้งค่าการตอบสนองของการโทรไปยัง URL 'compz.php?prodid=' + x + '&qbuys=' + yเป็นค่าของกล่องข้อความใช่ไหม ถ้าเป็นเช่นนั้นคุณต้องทำสิ่งต่อไปนี้

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

อ้างอิง: get()

คุณมีข้อผิดพลาดสองประการในรหัสของคุณ:

  • load()ทำให้HTML ที่ส่งคืนจาก Ajax ลงในองค์ประกอบที่ระบุ:

    โหลดข้อมูลจากเซิร์ฟเวอร์และวาง HTML ที่ส่งคืนลงในองค์ประกอบที่ตรงกัน

    คุณไม่สามารถกำหนดค่าของกล่องข้อความด้วยวิธีการดังกล่าว

  • $(selector).load()ผลตอบแทนที่ jQuery วัตถุ โดยค่าเริ่มต้นอ็อบเจ็กต์จะถูกแปลง[object Object]เมื่อถือว่าเป็นสตริง

คำชี้แจงเพิ่มเติม :

5สมมติว่าผลตอบแทนที่ URL ของคุณ

หาก 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
Wern Ancheta

1
@Ieyasu Sawada: ตอนนี้คุณกำลังส่งผ่านวัตถุ JavaScript ไป$('#subtotal').val(str3);เพราะload()ไม่ได้ผลอย่างที่คิด ได้คุณสามารถใช้load()เพื่อโหลดข้อความหรือ HTML divเป็นค่ากล่องข้อความ
Felix Kling

@ Ieyasu Sawada: ดูการอัปเดตของฉันเพื่อชี้แจงเพิ่มเติมหวังว่าจะช่วยได้!
Felix Kling

คำถามสุดท้ายทำไมฉันถึงได้ช่องว่างก่อนผลลัพธ์จริงในเอาต์พุตเป็นไปได้ไหมที่จะตัดออกใน jquery โดยทั่วไป compz.php มีช่องว่างจำนวนมากเพื่อให้อ่านได้ง่ายขึ้นและช่องว่างเหล่านั้นจะถูกส่งออกพร้อมกับผลลัพธ์
Wern Ancheta

@Ieyasu Sawada: คุณสามารถใช้ฟังก์ชั่น JavaScript ปกติเช่นด้วยนิพจน์ทั่วไป:data = data.replace(/\s+/, '');
Felix Kling

56

โปรดทราบว่า.valueแอตทริบิวต์เป็นคุณลักษณะของ JavaScript หากคุณต้องการใช้ jQuery ให้ใช้:

$('#pid').val()

เพื่อรับค่าและ:

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

เพื่อตั้งค่า

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

เกี่ยวกับปัญหาที่สองของคุณฉันไม่เคยลองตั้งค่า HTML โดยอัตโนมัติโดยใช้loadวิธีนี้ แน่นอนคุณสามารถทำสิ่งนี้:

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

โปรดทราบว่าโค้ดด้านบนยังไม่ได้ทดสอบ

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


2
ควรชี้ไปที่หน้าjQuery api ที่เกี่ยวข้องval()เพื่อวัตถุประสงค์ในการอ้างอิง
เดวิดกล่าวว่าคืนสถานะโมนิกา

1
แม้ว่าจะเป็นวิธีพื้นฐานเกินไปที่จะชี้ให้เห็นบางที? แค่ความเห็นต่ำต้อยของฉัน ... อัปเดตยังไงก็ได้!
เมาโร

compz.php คำนวณผลคูณของตัวเลข 2 ตัวในอินพุต ฉันเดาว่าส่วนที่โหลดค่าที่คำนวณ: $ ('# subtotal'). load ('compz.php? prodid =' + x + '& qbuys =' + y); ได้รับการปฏิบัติเป็นวัตถุนั่นคือเหตุผลที่ฉันเห็นวัตถุวัตถุเป็นผลลัพธ์แล้วฉันจะแปลงเป็นค่าปกติได้อย่างไร
Wern Ancheta

1
มันไม่เคยธรรมดาเกินไปดูคำถามอีกครั้ง ถ้าเขาเห็นหน้านี้หรือรู้จักเนื้อหาของมันเขาอาจจะไม่ได้ถามคำถามนี้ =)
เดวิดบอกว่าคืนสถานะโมนิกา

1
การชี้ให้เห็นปัญหาที่แท้จริงน่าจะเป็นจุดเริ่มต้นที่ดี Peace and Love;)
Mauro

5

ฉันอยากจะชี้ให้คุณเห็นว่า .val () ยังใช้งานได้กับการเลือกเพื่อเลือกค่าที่เลือกในปัจจุบัน


0

ลอง

subtotal.value= 5 // some value

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.