Click here to Skip to main content
14,920,611 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I tried to create an invoice for my shopping cart. I select the the item from the db as drop-down list and if I click the item it gives me the price automatically. That's on the first input select option. Then when I loop the input select option form for the rest item, (i.e) item 2,3,4 and so on . It didn't display the price. The first item displayed due to the id I used in my jquery. Please am new here and I need your help. Thanks. My code below

What I have tried:

HTML
<form method="post" id="invoice_form">
        <div class="table-responsive">
          <table class="table table-bordered">
         <tr>
          <td colspan="2" align="center"><h2 style="margin-top:10.5px">Create Invoice</h2></td>
          </tr>
          <tr>
          <td colspan="2">
          <div class="row">
         <div class="col-md-8">
          To,<br />
           RECEIVER (BILL TO)<br />
           <input type="text" name="order_receiver_name" id="order_receiver_name" class="form-control input-sm" 
            placeholder="Enter Receiver Name" />
            <textarea name="order_receiver_address" id="order_receiver_address" class="form-control" 
            placeholder="Enter Billing Address"></textarea>
            </div>
           <div class="col-md-4">
            Reverse Charge<br />
           <input type="text" name="order_no" id="order_no" class="form-control input-sm" placeholder="Enter 
           Invoice No." />
           <input type="text" name="order_date" id="order_date" class="form-control input-sm" readonly 
           placeholder="Select Invoice Date" />
           </div>
           </div>
            <br />
            <table id="invoice-item-table" class="table table-bordered">
            <tr>
            <th width="7%">Sr No.</th>
            <th width="20%">Item Name</th>
            <th width="5%">Quantity</th>
            <th width="5%">Price</th>
            <th width="10%">Actual Amt.</th>
            <th width="12.5%" colspan="2">Tax1 (%)</th>
           <th width="12.5%" colspan="2">Tax2 (%)</th>
           <th width="12.5%" colspan="2">Tax3 (%)</th>
           <th width="12.5%" rowspan="2">Total</th>
           <th width="3%" rowspan="2"></th>
           </tr>
            <tr>             
           <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th>Rate</th>
             <th>Amt.</th>
              <th>Rate</th>
              <th>Amt.</th>
              <th>Rate</th>
              <th>Amt.</th>
               </tr>
          <tr>
          <td><span id="sr_no">1</span></td>
         <td><select input type="text" name="item_name[]" id="item_name1"  class="form-control input-sm 
          item_name"><option>Select Products</option>
          <?php
	        include('db.php');
		$sql = mysql_query("SELECT * FROM tbl_product");
		while ($row = mysql_fetch_array($sql)){
		 echo "<option data-price=".$row['Price'].">".$row['Product']."</option>";
		  }
	 ?> 
         </select>
         </td>
         <td><input type="text" name="order_item_quantity[]" id="order_item_quantity1" data-srno="1" class="form- 
          control input-sm order_item_quantity" /></td>
           <td><input type="text" name="order_item_price[]" id="order_item_price1" data-srno="1" class="form- 
           control input-sm number_only order_item_price" /></td>
            <td><input type="text" name="order_item_actual_amount[]" id="order_item_actual_amount1" data- 
            srno="1" class="form-control input-sm order_item_actual_amount" readonly /></td>
            <td><input type="text" name="order_item_tax1_rate[]" id="order_item_tax1_rate1" data-srno="1" 
            class="form-control input-sm number_only order_item_tax1_rate" /></td>
            <td><input type="text" name="order_item_tax1_amount[]" id="order_item_tax1_amount1" data-srno="1" 
            readonly class="form-control input-sm order_item_tax1_amount" /></td>
            <td><input type="text" name="order_item_tax2_rate[]" id="order_item_tax2_rate1" data-srno="1" 
            class="form-control input-sm number_only order_item_tax2_rate" /></td>
           <td><input type="text" name="order_item_tax2_amount[]" id="order_item_tax2_amount1" data-srno="1" 
            readonly class="form-control input-sm order_item_tax2_amount" /></td>
            <td><input type="text" name="order_item_tax3_rate[]" id="order_item_tax3_rate1" data-srno="1" 
            class="form-control input-sm number_only order_item_tax3_rate" /></td>
           <td><input type="text" name="order_item_tax3_amount[]" id="order_item_tax3_amount1" data-srno="1" 
            readonly class="form-control input-sm order_item_tax3_amount" /></td>
            <td><input type="text" name="order_item_final_amount[]" id="order_item_final_amount1" data-srno="1" 
            readonly class="form-control input-sm order_item_final_amount" /></td>
            <td></td>
             </tr>
             </table>
             <div align="right">
             <button type="button" name="add_row" id="add_row" class="btn btn-success btn-xs">+</button>
             </div>
             </td>
             </tr>
              <tr>
               <td align="right">Total</td>
              <td align="right"><span id="final_total_amt"></span></td>
              </tr>
              <tr>
             <td colspan="2"></td>
              </tr>
              <tr>
              <td colspan="2" align="center">
               <input type="hidden" name="total_item" id="total_item" value="1" />
              <input type="submit" name="create_invoice" id="create_invoice" class="btn btn-info" value="Create" />
              </td>
              </tr>
              </table>
               </div>
              </form>

This is the jquery code that loop and display item and price.

JavaScript
$(function(){

   $('#invoice_form').on('click', function(){								 
   var count = $(this).find('option:selected').attr('data-price');
  var row_id = $(this).attr("id");
       $('#order_item_price'+count).val(row_id );
      $('#order_item_price1').val(count).append(html_code);
})
});
       
$(document).ready(function(){
var final_total_amt = $('#final_total_amt').text();
var count = 1;

$(document).on('click', '#add_row', function(){
  count++;
  $('#total_item').val(count);
  var html_code = '';
  html_code += '<tr id="row_id_'+count+'">';
  html_code += '<td><span id="sr_no">'+count+'</span></td>';
  html_code += '<td><select input type="text" name="item_name[]" id="item_name'+count+'" class="form- 
  control input-sm item_name"><option>Select Products</option>
  <?php 
$r = mysql_query("select * from tbl_product"); 
        while($row = mysql_fetch_array($r)){
        echo '<option data-price='.$row["Price"].'>'.$row["Product"].'</option>';
    } 
?>
    </select>
   </td>';
   html_code += '<td><input type="text" name="order_item_quantity[]" id="order_item_quantity'+count+'" 
   data-srno="'+count+'" class="form-control input-sm number_only order_item_quantity" /></td>';
   html_code += '<td><input type="text" name="order_item_price[]" id="order_item_price'+count+'" data- 
   srno="'+count+'" class="form-control input-sm number_only order_item_price" /></td>';
  html_code += '<td><input type="text" name="order_item_actual_amount[]" 
  id="order_item_actual_amount'+count+'" data-srno="'+count+'" class="form-control input-sm 
  order_item_actual_amount" readonly /></td>';       
  html_code += '<td><input type="text" name="order_item_tax1_rate[]" id="order_item_tax1_rate'+count+'" 
  data-srno="'+count+'" class="form-control input-sm number_only order_item_tax1_rate" /></td>';
  html_code += '<td><input type="text" name="order_item_tax1_amount[]" 
  id="order_item_tax1_amount'+count+'" data-srno="'+count+'" readonly class="form-control input-sm 
   order_item_tax1_amount" /></td>';
  html_code += '<td><input type="text" name="order_item_tax2_rate[]" id="order_item_tax2_rate'+count+'" 
  data-srno="'+count+'" class="form-control input-sm number_only order_item_tax2_rate" /></td>';
  html_code += '<td><input type="text" name="order_item_tax2_amount[]" 
   id="order_item_tax2_amount'+count+'" data-srno="'+count+'" readonly class="form-control input-sm 
   order_item_tax2_amount" /></td>';
  html_code += '<td><input type="text" name="order_item_tax3_rate[]" id="order_item_tax3_rate'+count+'" 
  data-srno="'+count+'" class="form-control input-sm number_only order_item_tax3_rate" /></td>';
  html_code += '<td><input type="text" name="order_item_tax3_amount[]" 
  id="order_item_tax3_amount'+count+'" data-srno="'+count+'" readonly class="form-control input-sm 
  order_item_tax3_amount" /></td>';
  html_code += '<td><input type="text" name="order_item_final_amount[]" 
  id="order_item_final_amount'+count+'" data-srno="'+count+'" readonly class="form-control input-sm 
  order_item_final_amount" /></td>';
  html_code += '<td><button type="button" name="remove_row" id="'+count+'" class="btn btn-danger btn-xs 
  remove_row">X</button></td>';
  html_code += '</tr>';
  $('#invoice-item-table').append(html_code);
});
  $(document).on('click', '.remove_row', function(){
  var row_id = $(this).attr("id");
  var total_item_amount = $('#order_item_final_amount'+row_id).val();
  var final_amount = $('#final_total_amt').text();
  var result_amount = parseFloat(final_amount) - parseFloat(total_item_amount);
  $('#final_total_amt').text(result_amount);
  $('#row_id_'+row_id).remove();
  count--;
  $('#total_item').val(count);
});

function cal_final_total(count)
{
  var final_item_total = 0;
  for(j=1; j<=count; j++)
  {
    var quantity = 0;
    var price = 0;
    var actual_amount = 0;
    var tax1_rate = 0;
    var tax1_amount = 0;
    var tax2_rate = 0;
    var tax2_amount = 0;
    var tax3_rate = 0;
    var tax3_amount = 0;
    var item_total = 0;
    quantity = $('#order_item_quantity'+j).val();
    if(quantity > 0)
    {
      price = $('#order_item_price'+j).val();
      if(price > 0)
      {
        actual_amount = parseFloat(quantity) * parseFloat(price);
        $('#order_item_actual_amount'+j).val(actual_amount);
        tax1_rate = $('#order_item_tax1_rate'+j).val();
        if(tax1_rate > 0)
        {
          tax1_amount = parseFloat(actual_amount)*parseFloat(tax1_rate)/100;
          $('#order_item_tax1_amount'+j).val(tax1_amount);
        }
        tax2_rate = $('#order_item_tax2_rate'+j).val();
        if(tax2_rate > 0)
        {
          tax2_amount = parseFloat(actual_amount)*parseFloat(tax2_rate)/100;
          $('#order_item_tax2_amount'+j).val(tax2_amount);
        }
        tax3_rate = $('#order_item_tax3_rate'+j).val();
        if(tax3_rate > 0)
        {
          tax3_amount = parseFloat(actual_amount)*parseFloat(tax3_rate)/100;
          $('#order_item_tax3_amount'+j).val(tax3_amount);
        }
        item_total = parseFloat(actual_amount) + parseFloat(tax1_amount) + parseFloat(tax2_amount) + 
         parseFloat(tax3_amount);
        final_item_total = parseFloat(final_item_total) + parseFloat(item_total);
        $('#order_item_final_amount'+j).val(item_total);
      }
    }
    }
     $('#final_total_amt').text(final_item_total);
    }

     $(document).on('blur', '.order_item_price', function(){
      cal_final_total(count);
    });
Posted
Updated 10-Jun-20 22:46pm
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900