Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > PHP > PHP Forum > เลือกชื่อสินค้าใน dropdown แล้วเเสดงราคาสินค้า ชื่อกับราคาอยู่ในdatabase เดี่ยวกัน



 

เลือกชื่อสินค้าใน dropdown แล้วเเสดงราคาสินค้า ชื่อกับราคาอยู่ในdatabase เดี่ยวกัน

 



Topic : 135500



โพสกระทู้ ( 9 )
บทความ ( 0 )



สถานะออฟไลน์




ลือกชื่อสินค้าใน dropdown แล้วเเสดงราคาสินค้าCode (PHP)
 <center><div class="panel-heading"></center>
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
    
<tr class="w3-table-all" style="background-color:#CCFFFF;color:black">
<th class="text-center"> # </th>
<th class="text-center"> สินค้า </th>
<th class="text-center"> จำนวน </th>
<th class="text-center"> ราคา </th>
<th class="text-center"> ราคารวม </th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>1</td>
<td>        
  <select name="pd_id" id="pd_id" class="form-control" required>
                  <?php while($row1 = mysqli_fetch_array($result3)):;?>
                  <option value="<?php echo $row1[0];?>"><?php echo $row1[1];?></option>
                  <?php endwhile;?>
           </select></td>
            
<td><input type="number" name='qty[]' placeholder='Enter Qty' class="form-control qty" step="0" min="0"/></td>
<script>    
$( "select" ) .change(function () {    
document.getElementById("loc").innerHTML="You selected: "+document.getElementById("pd_id").value;  
});  
</script>
<td><input type="number" name='price[]' placeholder='Enter Unit Price' class="form-control price" step="0.00" min="0"/></td>
<td><input type="number" name='total[]' placeholder='0.00' class="form-control total" readonly/></td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>

<div class="row clearfix">
<div class="col-md-12">
<button id="add_row" class="btn btn-default pull-left">Add Row</button>
<button id='delete_row' class="pull-right btn btn-default">Delete Row</button>
</div>
</div>
<div class="row clearfix" style="margin-top:20px">
<div class="pull-right col-md-4">
<table class="table table-bordered table-hover" id="tab_logic_total">
<tbody>
<tr class="w3-table-all" style="background-color:#CCFFFF;color:black">
<th class="text-center">Sub Total</th>
<td class="text-center"><input type="number" name='sub_total' placeholder='0.00' class="form-control" id="sub_total" readonly/></td>
</tr>
<tr>
<th class="text-center">Tax</th>
<td class="text-center"><div class="input-group mb-2 mb-sm-0">
<input type="number" class="form-control" id="tax" placeholder="0">
<div class="input-group-addon">%</div>
</div></td>
</tr>
<tr>
<th class="text-center">Tax Amount</th>
<td class="text-center"><input type="number" name='tax_amount' id="tax_amount" placeholder='0.00' class="form-control" readonly/></td>
</tr>
<tr>
<th class="text-center">Grand Total</th>
<td class="text-center"><input type="number" name='total_amount' id="total_amount" placeholder='0.00' class="form-control" readonly/></td>
</tr>

</tbody>
</table>


//
<script type="text/javascript">
$(document).ready(function(){

option_list('addr0');

var i=1;
$("#add_row").click(function(){b=i-1;
$('#addr'+i).html($('#addr'+b).html()).find('td:first-child').html(i+1);
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
option_list('addr'+i);
i++; 
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
calc();
});

$(".product").on('change',function(){
option_checker(this)
});


$('#tab_logic tbody').on('keyup change',function(){
calc();
});
$('#tax').on('keyup change',function(){
calc_total();
});

});

function option_checker(id)
{
var myOption=$(id).val();
var s =0;
$('#tab_logic tbody tr select').each(function(index, element){
var myselect = $(this).val();
if(myselect==myOption){
s += 1;
}
});
if(s>1){
alert(myOption+' as been added already try new..')  
}
}

function option_list(id)
{

}

function calc()
{
$('#tab_logic tbody tr').each(function(i, element) {
  
var html = $(this).html();

var qty = $(this).find('.qty').val();
var price = $(this).find('.price').val();
$(this).find('.total').val(qty*price);

calc_total();
});
}

function calc_total()
{
total=0;
$('.total').each(function() {
total += parseInt($(this).val());
});
$('#sub_total').val(total.toFixed(2));
tax_sum=total/100*$('#tax').val();
$('#tax_amount').val(tax_sum.toFixed(2));
$('#total_amount').val((tax_sum+total).toFixed(2));
}
</script>





Tag : PHP, CakePHP, XAMPP







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2020-08-28 01:11:28 By : nan433022 View : 1741 Reply : 6
 

 

No. 1



โพสกระทู้ ( 1,458 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

คุณเป็นคนเดียวที่ครอบ PHP code เป็น จากที่บอกไปทั้งหมดหลายๆ คน
แต่ยังขาด indentation อย่างที่คุณทำมามันชิดซ้ายหมดเลย เลยอ่านยาก




อันดับแรก ศึกษา jQuery selector ก่อนครับ เพราะในโค้ดยังอ้างอิงไม่ถูกต้อง
https://www.thaicreate.com/jquery/jquery-selectors-element.html
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

onchange ที่เขียนมามีทั้งหมด 4 ที่

025. $( "select" ) .change(function () {


091. $(".product").on('change',function(){


096. $('#tab_logic tbody').on('keyup change',function(){


099. $('#tax').on('keyup change',function(){


อยากทราบว่าตรงไหนที่เกี่ยวข้องกับ
Quote:
เลือกชื่อสินค้าใน dropdown


ถ้าตอบคำถามนี้ไม่ได้ ก็ไปต่อลำบากครับ






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-08-28 03:30:23 By : PhrayaDev
 


 

No. 2



โพสกระทู้ ( 9 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 1 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-08-28 03:30:23
รายละเอียดของการตอบ ::
ขอบคุณครับผมเป็นนักศึกษาทำโปรเจ็คครับขอบคุณที่แนะนำครับในส่วนที่ของโค้ดใต้ ซีเล็คผมยังใช้ไม่เป็นเลยทำให้วางมั่วไปครับซึ่งผมยังไม่รู้ที่จะใช้ซีเล็ครูปแบบไหนครับ แต่โค้ด
Code (PHP)
<script>   
$( "select" ) .change(function () {   
document.getElementById("loc").innerHTML="You selected: "+document.getElementById("pd_id").value; 
}); 
</script>

โค้ดนี้ผมแค่ทดลองวางครับ
Code (PHP)
<select name="pd_id" id="pd_id" class="form-control" required>
<?php while($row1 = mysqli_fetch_array($result3)):;?>
<option value="<?php echo $row1[0];?>"><?php echo $row1[1];?></option>
<?php endwhile;?>
</select></td>

แต่โค้ดส่วนนี้ เป็น dropdown ในส่วนนี้ดึงมาได้ส่วนโค้ดด้านบนพอดีเจอมาจากในเว็บเลยเอามาวางครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-08-28 17:07:55 By : nan433022
 

 

No. 3



โพสกระทู้ ( 1,458 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

Code (PHP)
<center>
   <div class="panel-heading">
</center>
<table class="table table-bordered table-hover" id="tab_logic">
   <thead>
      <tr class="w3-table-all" style="background-color:#CCFFFF;color:black">
         <th class="text-center"> # </th>
         <th class="text-center"> สินค้า </th>
         <th class="text-center"> จำนวน </th>
         <th class="text-center"> ราคา </th>
         <th class="text-center"> ราคารวม </th>
      </tr>
   </thead>
   <tbody>
      <tr id='addr0'>
         <td>1</td>
         <td>
            <select name="pd_id" id="pd_id" class="form-control" required>
               <?php while($row1 = mysqli_fetch_array($result3)):;?>
               <!-- เพิ่ม attribute เพื่อเก็บราคาจากฐานข้อมูล เปลี่ยน  $row1['price'] เป็นชื่อคอลัมน์ที่เก็บราคาสินค้า -->
               <option value="<?php echo $row1[0];?>" price="<?php echo $row1['price'];?>"><?php echo $row1[1];?></option>
               <?php endwhile;?>
            </select>
         </td>
         <td><input type="number" name='qty[]' placeholder='Enter Qty' class="form-control qty" step="0" min="0"/></td>
         <td><input type="number" name='price[]' placeholder='Enter Unit Price' class="form-control price" step="0.00" min="0"/></td>
         <td><input type="number" name='total[]' placeholder='0.00' class="form-control total" readonly/></td>
      </tr>
      <tr id='addr1'></tr>
   </tbody>
</table>
<div class="row clearfix">
   <div class="col-md-12">
      <button id="add_row" class="btn btn-default pull-left">Add Row</button>
      <button id='delete_row' class="pull-right btn btn-default">Delete Row</button>
   </div>
</div>
<div class="row clearfix" style="margin-top:20px">
<div class="pull-right col-md-4">
<table class="table table-bordered table-hover" id="tab_logic_total">
   <tbody>
      <tr class="w3-table-all" style="background-color:#CCFFFF;color:black">
         <th class="text-center">Sub Total</th>
         <td class="text-center"><input type="number" name='sub_total' placeholder='0.00' class="form-control" id="sub_total" readonly/></td>
      </tr>
      <tr>
         <th class="text-center">Tax</th>
         <td class="text-center">
            <div class="input-group mb-2 mb-sm-0">
               <input type="number" class="form-control" id="tax" placeholder="0">
               <div class="input-group-addon">%</div>
            </div>
         </td>
      </tr>
      <tr>
         <th class="text-center">Tax Amount</th>
         <td class="text-center"><input type="number" name='tax_amount' id="tax_amount" placeholder='0.00' class="form-control" readonly/></td>
      </tr>
      <tr>
         <th class="text-center">Grand Total</th>
         <td class="text-center"><input type="number" name='total_amount' id="total_amount" placeholder='0.00' class="form-control" readonly/></td>
      </tr>
   </tbody>
</table>

<script>
   $(document).ready(function () {

      option_list('addr0');

      var i = 1;
      $("#add_row").click(function () {
         b = i - 1;
         $('#addr' + i).html($('#addr' + b).html()).find('td:first-child').html(i + 1);
         $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
         option_list('addr' + i);
         i++;
      });
      $("#delete_row").click(function () {
         if (i > 1) {
            $("#addr" + (i - 1)).html('');
            i--;
         }
         calc();
      });

      $(".product").on('change', function () {
         option_checker(this)
      });


      $('#tab_logic tbody').on('keyup change', function () {
         calc();
      });
      
      $('#tax').on('keyup change', function () {
         calc_total();
      });
      
      // ย้าย onchange ของ select มาไว้ใน ready() ด้วยกันโค้ดจะได้ดูเป็นสัดส่วน
      /*
      $( "select" ).change(function () {    
         document.getElementById("loc").innerHTML="You selected: "+document.getElementById("pd_id").value;  
      });
      */
      
      // แต่แนะนำให้ใช้ id selector ป้องกันเผื่ออยากใส่ select option ในหน้านี้เพิ่มเติมภายหลัง
      $("#pd_id").change(function () {
         // ดึงราคาจาก attribute (price) ของ select option ที่มีสถานะเป็น selected มาแสดงใน column ราคา
	     $("#addr0 input[name='price[]']").val($(this).find('option:selected').attr('price')); 
      });
   });

function option_checker(id) {
   var myOption = $(id).val();
   var s = 0;
   $('#tab_logic tbody tr select').each(function (index, element) {
      var myselect = $(this).val();
      if (myselect == myOption) {
         s += 1;
      }
   });
   if (s > 1) {
      alert(myOption + ' as been added already try new..')
   }
}

function option_list(id) {

}

function calc() {
   $('#tab_logic tbody tr').each(function (i, element) {

      var html = $(this).html();

      var qty = $(this).find('.qty').val();
      var price = $(this).find('.price').val();
      $(this).find('.total').val(qty * price);

      calc_total();
   });
}

function calc_total() {
   total = 0;
   $('.total').each(function () {
      total += parseInt($(this).val());
   });
   $('#sub_total').val(total.toFixed(2));
   tax_sum = total / 100 * $('#tax').val();
   $('#tax_amount').val(tax_sum.toFixed(2));
   $('#total_amount').val((tax_sum + total).toFixed(2));
}
</script>




ดูตัวอย่างการย่อหน้าโค้ด เพื่อสะดวกในการอ่านด้วยนะครับ
หรือจะใช้ online formatter เอาก็ได้

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-08-28 18:48:30 By : PhrayaDev
 


 

No. 4



โพสกระทู้ ( 9 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 3 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-08-28 18:48:30
รายละเอียดของการตอบ ::
ขอบคุณครับ รายการเเสดงแล้วแต่เพิ่มอันที่สองไม่ได้ครับ
เพิ่มสินค้าต่อแล้วราคาไม่เเสดง

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-08-28 19:49:58 By : nan433022
 


 

No. 5



โพสกระทู้ ( 1,458 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

line 107: ผมอุตส่าห์ใส่คอมเม้นต์ไว้ให้
Code (JavaScript)
// แต่แนะนำให้ใช้ id selector ป้องกันเผื่ออยากใส่ select option ในหน้านี้เพิ่มเติมภายหลัง


เมื่อกดเพิ่มแถว select option ก็ต้องมีมากกว่าหนึ่ง
แต่เราใส่ fixed id ให้กับ select element
ทำให้ select ท้้งหลาย มี id เหมือนกันทั้งหมด
ซึ่งผิดต่อ native language rules ของการอ้างอิง element ด้วย id
ซึ่งจะมีซ้ำกันไม่ได้ ไม่ว่าจะเป็น element ชนิดเดียวกันหรือไม่ก็ตาม
(ถ้านึกภาพไม่ออกให้นึกถึงหมายเลขประจำตัวประชาชน)

ทางออกคือทำเป็น dynamic id
https://forum.jquery.com/topic/is-it-possible-to-set-id-to-dynamically-created-div
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-08-28 20:49:21 By : PhrayaDev
 


 

No. 6



โพสกระทู้ ( 1,458 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

จริงๆ มีหลายวิธี เช่น หนึ่งในหลายวิธีที่ว่าคือ no id + element name selector

Code (HTML)
<select name="pd_id" class="form-control" required>


Code (JavaScript)
$("select").change(function () {  // ใช้ selector เหมือนวิธีเดิมของคุณ


จะเห็นว่ามันทำงานได้เหมือนกัน แถมง่ายกว่า dynamic id ด้วย
แต่ไม่แนะนำ ...เพราะอะไรลองค้นดูเองครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-08-28 22:05:39 By : PhrayaDev
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : เลือกชื่อสินค้าใน dropdown แล้วเเสดงราคาสินค้า ชื่อกับราคาอยู่ในdatabase เดี่ยวกัน
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 03
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่