Nhờ sửa giúp đoạn js tính tiền

xuxutrinh · May 25, 2021, 12:53pm

Mọi người ơi. mình đang làm form tính hóa đơn như hình:

mình chọn được món bên form tìm kiếm sang form hóa đơn được. Và tính được thành tiền ở dòng thứ 1 như sang dòng thứ 2 thì không tự tính được. mong mọi người giúp mình.

<script type="text/javascript">

    $(".them").click(function(){
        var mamon = $(this).parent().parent().children("td").eq(0).html();
        var tenmon = $(this).parent().parent().children("td").eq(1).html();
        var dongiamon = $(this).parent().parent().children("td").eq(2).html();
    
        $(".dsmon").append(
        '<tr>'+
          '<td width="37"></td>'+
          '<td width="68"><input type = "text" name = "mamon" value = " '+mamon+'"size = "3"/> </td>'+
          '<td width="176"><input type = "text" name = "tenmon" value ="'+tenmon+'"size = "15"/></td>'+
          '<td width="83"><input type="text" id = "dongia"  value ="'+dongiamon+'"/></td>'+
          '<td width="45"><input type="text" id= "soluong" onkeyup="tinh();" size = "3"/></td>'+
          
         '<td width="68"><input type="text" name = "result" id ="result"/></td>'+
           '<td width="38"></td>'+
          '<td width="38"></td>'+
         
        '</tr>'
        );

         
    });

        
        
function tinh()
      {
    
           var dongia = document.getElementById("dongia");
           var soluong = document.getElementById("soluong");
           var result = document.getElementById("result");
            
           var tong = dongia.value * soluong.value;         

           if (!isNaN(tong))
           {
                result.value = tong;
           }
      }
</script>

masoivn · November 3, 2015, 9:54am

mọi lần chạy nút thêm thì sẽ thêm 1 id giống như trên.
Em làm như vậy thì js làm sao biết được id của dòng nào.

Dòng 1 chạy được vì chỉ có 1 id dongia, soluong, result.
Qua dòng 2 thì js không biết id nào nên gây lỗi.

Em dùng firebug trên trình duyệt firefox hoặc chrome để đi bug js nhé.

xuxutrinh · November 3, 2015, 9:57am

Mong a nói rõ hơn cho em được hk a.? Tại vì em cũng còn yếu js này lắm a.

masoivn · November 3, 2015, 10:05am

javascript(js) dựa vào DOM (Document Object Model) để thao tác trên HTML.
js muốn thao tác trên tag HTML nào thì phải biết id hoặc là name để thao tác.

Như anh nói ở comment trước.
id: dongia, soluong, result đã giống nhau ở dòng thứ 2. Thì js sẽ không biết là tag hmtl nào để thao tác.

Em tìm hiểu thêm về công cụ firebug để debug trên javascript

xuxutrinh · November 3, 2015, 10:18am

cái công cụ đó là hiện là hiện lỗi trong javascript. Em hiểu anh nói là trùng id. Nhưng em không biết sửa như thế nào nên mới lên trang này hỏi á. mong a giúp em sửa lỗi này á

masoivn · November 3, 2015, 1:31pm

<script type="text/javascript">
    var index = 0;
     $(".them").click(function(){
    	var mamon = $(this).parent().parent().children("td").eq(0).html();
    	var tenmon = $(this).parent().parent().children("td").eq(1).html();
    	var dongiamon = $(this).parent().parent().children("td").eq(2).html();
        var iddongia = "dongia" + index;
       var idsoluong = "soluong" + index;
       var idresult = "result" + index;

    	$(".dsmon").append(               
    			'<tr>'+
        	      '<td width="37"></td>'+
        	      '<td width="68"><input type = "text" name = "mamon" value = " '+mamon+'"size = "3"/> </td>'+
        	      '<td width="176"><input type = "text" name = "tenmon" value ="'+tenmon+'"size = "15"/></td>'+
                  '<td width="83"><input type="text" id = "iddongia"  value ="'+dongiamon+'"/></td>'+
        	      '<td width="45"><input type="text" id= "idsoluong" onkeyup="tinh(index);" size = "3"/></td>'+

        	     '<td width="68"><input type="text" name = "idresult" id ="result"/></td>'+
    			   '<td width="38"></td>'+
        	      '<td width="38"></td>'+

       	        '</tr>'
    			);
                 index  = index  + 1;   	

    		});
    function tinh(inputIndex)
              {
                 var iddongia = "dongia" + inputIndex;
           var idsoluong = "soluong" + inputIndex;
           var idresult = "result" + inputIndex;

                   var dongia = document.getElementById(iddongia);
                   var soluong = document.getElementById(idsoluong);
                   var result = document.getElementById(idresult);

                   var tong = dongia.value * soluong.value;			

                   if (!isNaN(tong))
                   {
                        result.value = tong;
                   }
              }
    	</script>

anh thêm biến index để phân biệt dòng trước với dòng sau.
Code có thể không đúng. Em chạy, sai thì sửa lại 1 chút.

xuxutrinh · November 3, 2015, 12:12pm

Đúng như a nói là nó hk đúng. Nhưng thật sự em hk bik sửa lại sao nữa a ơi

masoivn · November 3, 2015, 1:38pm

anh đã sửa code ở trên lại rồi.
Anh nói ý tưởng để em nắm và sửa lại.
Giờ anh thêm 1 biến index, bắt đầu từ 0.
Mục đích của biến này giúp cho id dễ phân biệt và tăng 1 đơn vị mỗi khi nhấn nút thêm.

ví dụ: index =0 thì dòng đầu tiên sẽ có id là dongia0, soluong0, result0. Và index sẽ tăng 1 đơn vị. Giờ là index =1
Khi nhấn vào button thêm thì sẽ add thêm 1 dòng với id là dongia1, soluong1, result1. Và index sẽ tăng lên 2.

Em chịu khó chạy debug javasript đi. sẽ hiểu cái anh nói nãy giờ.

vhnam · November 4, 2015, 9:40am

Phần hướng dẫn của bác @masoivn mình hơi khó hiểu nên viết một code khác theo cách của mình…

Phần HTML

<!-- Block 1 -->
<h2>Danh mục món ăn</h2>
<table class="table table-bordered table-hover">
	<thead>
		<tr>
			<th>Mã món</th>
			<th>Tên món</th>
			<th>Đơn giá</th>
			<th>Chọn</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="col-id">12</td>
			<td class="col-name">Ếch nướng mọi</td>
			<td class="col-price">80000</td>
			<td>
				<button type="button" class="btn btn-success btn-choose">Chọn</button>
			</td>
		</tr>
		<tr>
			<td class="col-id">13</td>
			<td class="col-name">Bò cuộn phô mai</td>
			<td class="col-price">80000</td>
			<td>
				<button type="button" class="btn btn-success btn-choose">Chọn</button>
			</td>
		</tr>
		<tr>
			<td class="col-id">14</td>
			<td class="col-name">Gà nướng muối ớt</td>
			<td class="col-price">100000</td>
			<td>
				<button type="button" class="btn btn-success btn-choose">Chọn</button>
			</td>
		</tr>
		<tr>
			<td class="col-id">15</td>
			<td class="col-name">Hàu nướng mỡ hành</td>
			<td class="col-price">120000</td>
			<td>
				<button type="button" class="btn btn-success btn-choose">Chọn</button>
			</td>
		</tr>
		<tr>
			<td class="col-id">16</td>
			<td class="col-name">Tôm nướng mỡ tỏi</td>
			<td class="col-price">120000</td>
			<td>
				<button type="button" class="btn btn-success btn-choose">Chọn</button>
			</td>
		</tr>
	</tbody>
</table>

<!-- Block 2 -->
<h2>Danh sách món trong hóa đơn</h2>
<table class="table table-bordered table-hover">
	<thead>
		<tr>
			<th>STT</th>
			<th>Mã món</th>
			<th>Tên món</th>
			<th>Đơn giá</th>
			<th>Số lượng</th>
			<th>Thành tiền</th>
			<th>Lưu</th>
			<th>Xóa</th>
		</tr>
	</thead>
	<tbody id="bill-table">
		<tr>
			<td colspan="8" class="empty">Chưa chọn món</td>
		</tr>
	</tbody>
</table>

Còn đây là phần JavaScript

(function() {

var index = 1;

$('.btn-choose').on('click', choose);
$('#bill-table').on('change keyup paste', '.bill-quantity', changeValue);

function choose() {
	var self = this,
		bill = $('#bill-table'),
		data = getDataMenu($(self).parent().parent()),
		html = createRow(data);

	if (bill.find('.empty').length) {
		bill.empty();
	}

	bill.append(html);
}

function changeValue() {
	var self = this,
		row = $(self).parent().parent(),
		data = getDataBill(row);

	row.find('.bill-total').html(calculate(data.price, data.quantity));
}

function getDataMenu(row) {
	var id = $(row.find('.col-id')).html(),
		name = $(row.find('.col-name')).html(),
		price = $(row.find('.col-price')).html();

	var data = {
		id: id,
		name: name,
		price: price
	}

	return data;
}

function getDataBill(row) {
	var price = $(row.find('.bill-price')).html(),
		quantity = $(row.find('.bill-quantity')).val();

	var data = {
		price: price,
		quantity: quantity
	}

	return data;
}

function createRow(data) {
	var html = '<tr>';

	html += '<td>' + index++ + '</td>';
	html += '<td>' + data.id + '</td>';
	html += '<td>' + data.name + '</td>';
	html += '<td class="bill-price">' + data.price + '</td>';
	html += '<td><input type="text" value="1" class="bill-quantity" /></td>';
	html += '<td class="bill-total">' + calculate(data.price, 1) + '</td>';
	html += '<td></td>';
	html += '<td></td>';
	html += '</tr>';

	return html;
}

function calculate(price, quantity) {
	return price * quantity;
}

})();

Nếu dài quá làm biếng đọc thì bác vào đây mà down về ngâm cứu

xuxutrinh · November 5, 2015, 6:59am

a ơi, sao mà em chèn thêm đoạn ajax để khi mà bấm loại món thì ajax sẽ load món ra bên bảng Danh mục món ăn.

Khi em vô thì bảng danh món trong hóa đơn em bấm chọn nó không qua…

<script type="text/javascript" src="../jquerry/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
	$(function() {
		 $("#maloaimon").bind("change", function() {
			 $.ajax({
				 type: "GET", 
				 url: "modules/demo-table/ajax.php",
				 data: "maloaimon="+$("#maloaimon").val(),
				 success: function(html) {
					 $("#mamon").html(html);
				 }
			 });
		 }); 
	});
	</script>

<div class="left">
		<!-- Block 1 -->
	<h3 style="text-align:center;">Danh mục món ăn</h3>
    <table width="302" height="165" border="0" bgcolor="#FFCC00">
	    <tr>
	      <td height="40" colspan="5" style="text-align:right;">
	        <p align="center"><strong>Tìm kiếm món ăn</strong></p>
	        <p align="center"><input type="image" name="hoavan" id="hoavan" src="../images/icon/hoavan.png" /></p>
          </td>
        </tr>
	    <tr>
	      <td width="147" height="24" style="text-align:right;">Loại món</td>
	      <td width="84" height="24"><select name="maloaimon" id="maloaimon">
    			<option>chọn</option>
				<?php
                    
                    $result = mysql_query( "select MaLoaiMon,TenLoaiMon from loaimon");
                    while($row=mysql_fetch_assoc($result))
                        echo "<option value='".$row["MaLoaiMon"]."'>".$row["TenLoaiMon"]."</option>";
                ?>
    		</select></td>
	      <td width="92">&nbsp;</td>
	      <td width="151" colspan="2">&nbsp;</td>
        </tr>
    	<tr>
        	<td colspan="5">
            
        <!-------------------   Show món ăn theo loại món --- sd ajax -------------------->    
		<table class="table table-bordered table-hover"  id="mamon">
			
		</table>
        <!---------------------------------- end show --------------------------------->       
      </td>
    </tr>
  </table>

bảng tìm kiếm và ds món trong hóa đơn này em đều để trên 1 file là index…Còn bên bảng tìm kiếm khi load sẽ hiện bảng ds món ăn thì bảng ds món này em để ở 1 file riêng là ajax. Có thể tại vì vậy nên không chạy đc js bảng kia. Nhưng em không biết gộp chung lại được.