สอบถามเรื่อง jQuery เลือกแล้วส่งค่าไปยัง input ที่มี id เหมือนกัน ไม่ทราบว่ามีวิธีไหนบ้าง

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามเรื่อง jQuery เลือกแล้วส่งค่าไปยัง input ที่มี id เหมือนกัน ไม่ทราบว่ามีวิธีไหนบ้าง

ตามภาพ เมื่อผมแสดงข้อมูลจาก db ออกมาแล้วมี 2 ข้อมูล คราวนี้ผมต้องการ

เมื่อผมเลือกช่องผลการดำเนินงานข้อมูลที่ 1 -> เป็น ดำเนินการเรียบร้อยแล้ว อยากให้ข้อมูลไปมันไปแสดงที่ช่อง
ผล % ความก้าวหน้า เป็น 100

แล้วข้อมูลที่ 2 -> เป็น ยังไม่กำเนินการ อยากให้ข้อมูลไปมันไปแสดงที่ช่อง
ผล % ความก้าวหน้า เป็น 0

โดยที่ input ทั้งสอง ที่ผมกล่าวมา (ช่องผลการดำเนินงาน) และ (ผล % ความก้าวหน้า) มีชื่อและไอดีเหมือนกัน
เราจะเขียน jQuery ยังไงครับ ผมลองทำโดยอ้างจากไอดีก็ไม่ได้ มันจะขึ้นอันแรกอันเดียว

รบกวนด้วยครับ ขอบคุณครับ

Thammarat Phanphai 02-09-2019 15:14:48

ข่าวประกาศ หรือกระทู้ถามนี้ ปิดการถาม-ตอบ ไม่สามารถตอบกลับได้

ความคิดเห็นที่ 1

ทำความเข้าใจเพิ่มเติมในคำแนะนำ http://niik.in/que_2933_6542

id ของ ellement ไม่ควรซ้ำกัน อาจเพิ่มค่า unique ต่อท้าย เพื่อทำให้ id ไม่เหมือนกัน เช่น

<input id="myinput<?=$unique_id?>" value="" />

หรือใช้เป็น css class name แทน เช่น เพิ่ม css class เพิ่มใช้งานเฉพาะไป

<input id="myinput" class="old_css_class" value="" />

เป็น

<input id="myinput" class="old_css_class new_css_class" value="" />

ninenik 02-09-2019

ความคิดเห็นที่ 2

ขออนุญาตสอบถามต่อครับ

ตามรูปผมเลือกช่อง ผลการดำเนินงาน ขึ้นช่อง กี่% ผมกรอก 20

ค่า 20 ถูกส่งไป ช่อง ผล % ความก้าวหน้า
------------------------
ข้อมูลถัดมา
------------------------
ผมเลือกช่อง ผลการดำเนินงาน เป็น ดำเนินการเรียบร้อยแล้ว

ข้อมูลขึ้นที่ช่อง ผล % ความก้าวหน้า เป็น 100

---------------------------

่ผมเขียน sum กันแล้วที่ ช่อง 20 และ 100 แต่ข้อมูลมันไม่ไปโชว์ที่ ช่อง % รวมความก้าวหน้า

มันต้องมีการกระทำเกิดขึ้นก่อนเช่น ผมไปลบ เลข 20 แล้วเติม 20 ใหม่ มันถึงจะไปแสดงค่ารวม

ผมอยากให้เลือกเสร็จแล้วมันคำนวณทุกอย่างแลย ไม่ทราบว่าต้องใช้ function ไหนของ jQuery ครับ

ขอบคุณครับ

Thammarat Phanphai 03-09-2019 14:33

ความคิดเห็นที่ 3

ดูโค้ด จากตัวอย่างนี้เป็นแนวทาง
ตัวอย่าง

โค้ด

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <title>Document</title> 
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" >
</head>
<body>
 
  <br>
  <div style="width:400px;margin:auto;padding:10px;background-color:gold;">
    <div class="row">
    <div class="col">
      <select class="form-control css-my-select">
        <option value="">Select</option>
        <option value="10">10</option>
        <option value="20">20</option>
      </select>      
    </div>
    <div class="col">      
      <input type="text" class="form-control css-my-input" value="" />
    </div>    
  </div>  
    <div class="row">
    <div class="col">
      <select class="form-control css-my-select">
        <option value="">Select</option>
        <option value="10">10</option>
        <option value="20">20</option>
      </select>      
    </div>
    <div class="col">      
      <input type="text" class="form-control css-my-input" value="" />
    </div>    
  </div>  
    <div class="row">
    <div class="col">
    </div>
    <div class="col">
      <input type="text" class="form-control css-my-input-total" />
    </div>
  </div>
    </div> 
  
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
  
  
});
</script>
</body>
</html>

ถ้าเราจะกำหนดค่าให้กับ input text ของแต่ละแถว กับ input text ผลรวมมีค่าเท่ากับ 0 จะอ้างอิงผ่าน css class name
จะมีเรื่องของ array มาเกี่ยวกับ ซึ่งใน javascript จะนับ key ที่ base 0 นั่นคือตัวที่ 1 คือ key เท่ากับ 0

<script type="text/javascript">
$(function(){
 
  // มีหลายตัว อ้างอิงผ่าน key 
  $(".css-my-input").eq(0).val(0); // ตัวที่ 1
  $(".css-my-input").eq(1).val(0); // ตัวที่ 2
  // หรือใช้ $(".css-my-input:eq(0)").val(0);
  // หรือใช้ $(".css-my-input:eq(1)").val(0);
  
  // มีตัวเดียว สามารถใช้
  $(".css-my-input-total").val(0); 
  /// หรือ $(".css-my-input-total").eq(0).val(0);  ก็ได้
  
});
</script>

>>> อัพเดท >>> 03-09-2019
------------------------------------------
เราลองบวกค่า input text ทั้งสองตัว ดังนี้

   var total_sum = 0;
   console.log(typeof(total_sum)); // number
   
   var _a = $(".css-my-input").eq(0).val();
   var _b = $(".css-my-input").eq(1).val();
   console.log(typeof(_a)); // string
   console.log(typeof(_b)); // string
   
   total_sum = _a + _b;
   console.log(typeof(total_sum)); // string
   $(".css-my-input-total").val(total_sum);

ผลลัพธ์ที่ได้คือ input text ทั้งหมด เป็นค่าว่าง เนื่องจากตัวแปร _a และ _b เป็น string ค่าว่าง
การบวกกัน โดยใช้เครื่องหมาย + จึงเป็นการนำ string สองตัวมาต่อกัน แล้วนำมาเก็บในตัวแปร total_sum
เดิมตัวแปร total_sum เป็น number หรือตัวเลข แต่พอนำมากำหนดค่าใหม่ เป็นค่าจากผลบวกของ _a และ _b
จึงทำให้ total_sum กลายเป็น string ไปด้วย การจะเปลี่ยน string เป็นตัวเลข เราจะใช้ parseInt() หรือ parseFloat()
แต่ถ้าเราเรียกใช้คำส่ัง parseInt() หรือ parseFloat() ให้กับ string ค่าว่าง จะได้ค่าเป็น NaN มาจาก "Not a Number"
เราสามารถใส่เงื่อนไข ว่าถ้าเป็นค่า NaN ให้มีค่าเป็น 0 ได้ดังนี้

   var total_sum = 0;
   console.log(typeof(total_sum)); // number
   
   var _a = $(".css-my-input").eq(0).val();
   var _b = $(".css-my-input").eq(1).val();
   _a = (isNaN(parseInt(_a)))?0:parseInt(_a); 
   _b = (isNaN(parseInt(_b)))?0:parseInt(_b); 
   console.log(typeof(_a)); // number
   console.log(typeof(_b)); // number
   
   total_sum = _a + _b;
   console.log(typeof(total_sum)); // number
   $(".css-my-input-total").val(total_sum);

การอ้างอิง css-my-input class ข้างต้น เราสามารถใช้การวนลูปจัดการ ได้ดังนี้

   var total_sum = 0;
   console.log(typeof(total_sum)); // number
      
   // เราจะใช้การวนลูป เพิ่มค่าเข้าไปใน ตัวแปร total_sum
   $(".css-my-input").each(function(index,element){
	   console.log(index); // key index
	   console.log(element); // element
	   
	   // เราสามารถอ้างอิงแต่ละรายการโดยใช้
	   // $(".css-my-input").eq(index).va();
	   // หรือ $(element).val();
	   var _eleValue = $(element).val();
	   _eleValue = (isNaN(parseInt(_eleValue)))?0:parseInt(_eleValue); 
	   total_sum+= _eleValue; // เพิ่มค่าเข้าไปใน total_sum
   });

   console.log(typeof(total_sum)); // number
   $(".css-my-input-total").val(total_sum);

การทำงานของคำสั่งข้างต้น จะทำงานเมื่อ เราเปิดหน้าเพจนี้ขึ้นมา หรือมาจาก window onload event แต่สิ่งทีเราต้องการคือ
ต้องการให้ เมื่อมีการเปลี่ยนแปลงค่าของ input ที่ใช้ css-my-input แล้วให้ทำการทำงานคำสั่งนี้ ก็จะได้เป็น

<script type="text/javascript">
$(function(){
  
  // ใส่ event เมื่อมีการเปลี่ยนค่าของ css-my-input class element
	$(".css-my-input").on("change",function(){  
	   var total_sum = 0;
	   $(".css-my-input").each(function(index,element){
		   var _eleValue = $(element).val();
		   _eleValue = (isNaN(parseInt(_eleValue)))?0:parseInt(_eleValue); 
		   total_sum+= _eleValue; // เพิ่มค่าเข้าไปใน total_sum
	   });	   
	   $(".css-my-input-total").val(total_sum);	
	});
   
});
</script>

ทดสอบการทำงาน เมื่อเราเปลี่ยนช่องแรกเป็น 3 และ เปลี่ยนช่องที่สองเป็น 2 ช่องผลรวมจะเท่ากับ 5

ต่อไป เราจะลองส่งค่า select ที่อยู่ฝั่งซ้ายไปยัง input ที่อยูฝั่งขวา แทนการเปลี่ยนค่าใน input โดยตรง คำอธิบายในโค้ด

	// ใส่ event ให้ select เมื่อมีการเปลี่ยนแปลงข้อมูล  
  	$(".css-my-select").on("change",function(){
		var selectValue = $(this).val(); // ค่าของ option value ที่เลือก
		
		// ความสัมพันธ์ของ select และ input คือ การอ้างอิงจาก css class name ที่เป็น array
		// นั่นหมายความว่า ถ้าตัว select ตัวที่หนึ่ง ทำงาน จะให้มีผลกับ ตัว input ตัวที่ 1 เป็นตัน
		// สิ่งที่จะอ้างอิง ก็คือ  key index เราต้องหาว่า select ตัวนี้มี key index เป็นเท่าไหร่ จากคำสั่งดังนี้
		var indexKey = $(".css-my-select").index(this);
		console.log(indexKey); // ถ้าเราเปลี่ยนแปลงตัวแรก ก็จะได้ key เท่ากับ 0 เปลี่ยนแปลงตัวที่สอง จะได้ key เท่ากับ 1
		
		// เท่านี้เราก็สามารถส่งค่าไป input css-my-input ที่อยู่ในแถวเดียวกันได้ดังนี้
		$(".css-my-input").eq(indexKey).val(selectValue);
	});

ทดสอบเปลี่ยนค่าจาก select

จะเห็นว่า input ฝั่งขวา ค่าเปลี่ยนแปลงไปตาม การเลือกของ select ฝั่งซ้าย แต่ เราจะเห็นว่า ผลรวมไม่ทำงาน นั่นคือ input ฝั่งขวาทั้งสอง
ไม่นำค่ามารวมกัน ทั้งที่มีการเปลี่ยนแปลงค่า ทั้งนี้เพราะ event onchange ของ input จะเกิดขึ้นก็ต่อเมื่อ เรามีการกระทำจาก
ผู้ใช้โดยตรงกับ elements นั้นๆ แต่ในกรณีนี้ เราเปลี่ยนแปลงผ่านคำสั่ง javascript
เราสามารถแก้ปัญหาโดย ใช้คำสั่ง ที่ทำให้ มีการปล่อย event onchange เกิดขึ้นกับ css-my-input โดยใช้คำสั่ง trigger("ชื่อ event");

// ให้ทำการปล่อย change event ให้กับ css-my-input
$(".css-my-input").trigger("change");

การที่จะเกิด event ใดๆ ก็ต้องเกิดจากผู้ใช้กระทำโดยตรงต่อ element นั่น หรือโดยการส่งต่อ จากการกระทำใน element หนึ่งแทนก็ได้
ดังนั้น เราสามารถคำสั่ง trigger() เมื่อผู้ใช้กระทำกับ select โดยวางไว้ส่วนท้ายของ คำสั่งได้
ดูโค้ดตัวอย่างเต็มได้ดังนี้

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <title>Document</title> 
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" >
</head>
<body>
 
  <br>
  <div style="width:400px;margin:auto;padding:10px;background-color:gold;">
  <?php
  // วนลูปแสดงรายการ 2 ชุดเหมือนกัน
   for($i=1; $i <=2; $i++){?>
  <div class="row">
    <div class="col">
      <select class="form-control css-my-select">
        <option value="">Select</option>
        <option value="10">10</option>
        <option value="20">20</option>
      </select>      
    </div>
    <div class="col">      
      <input type="text" class="form-control css-my-input" value="" />
    </div>    
  </div>  
  <?php } ?>
  <div class="row">
    <div class="col">
    </div>
    <div class="col">
      <input type="text" class="form-control css-my-input-total" />
    </div>
  </div>
    </div>
  
  
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
  
	// ใส่ event ให้ select เมื่อมีการเปลี่ยนแปลงข้อมูล  
  	$(".css-my-select").on("change",function(){
		var selectValue = $(this).val(); // ค่าของ option value ที่เลือก
		
		// ความสัมพันธ์ของ select และ input คือ การอ้างอิงจาก css class name ที่เป็น array
		// นั่นหมายความว่า ถ้าตัว select ตัวที่หนึ่ง ทำงาน จะให้มีผลกับ ตัว input ตัวที่ 1 เป็นตัน
		// สิ่งที่จะอ้างอิง ก็คือ  key index เราต้องหาว่า select ตัวนี้มี key index เป็นเท่าไหร่ จากคำสั่งดังนี้
		var indexKey = $(".css-my-select").index(this);
		console.log(indexKey); // ถ้าเราเปลี่ยนแปลงตัวแรก ก็จะได้ key เท่ากับ 0 เปลี่ยนแปลงตัวที่สอง จะได้ key เท่ากับ 1
		
		// เท่านี้เราก็สามารถส่งค่าไป input css-my-input ที่อยู่ในแถวเดียวกันได้ดังนี้
		$(".css-my-input").eq(indexKey).val(selectValue);
		
		// ให้ทำการปล่อย change event ให้กับ css-my-input
		$(".css-my-input").trigger("change");
	});
  
  // ใส่ event เมื่อมีการเปลี่ยนค่าของ css-my-input class element
	$(".css-my-input").on("change",function(){  
	   var total_sum = 0;
	   $(".css-my-input").each(function(index,element){
		   var _eleValue = $(element).val();
		   _eleValue = (isNaN(parseInt(_eleValue)))?0:parseInt(_eleValue); 
		   total_sum+= _eleValue; // เพิ่มค่าเข้าไปใน total_sum
	   });	   
	   $(".css-my-input-total").val(total_sum);	
	});
   
});
</script>
</body>
</html>

ตัวอย่าง DEMO

ninenik 03-09-2019

ความคิดเห็นที่ 4

ได้แล้วครับ

ขอบคุณมากครับ

Thammarat Phanphai 04-09-2019 11:01

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน