次のシナリオがあります。数量とレートが入力され、最終レートが動的に計算される請求書ビルダーがあります。これに加えて、さらにフィールドを追加するオプションがあります。そのため、より多くの項目を入力できます。ここで、最終的にこの請求書を PDF として保存できるように、請求書に「プレビュー」オプションを提供する必要があります。
以下は、使用されるフォームの html コードです。
<form action = "display-invoice.php" name="invoice" id="invoice" data-parsley-validate method="post" enctype="multipart/form-data" >
<table>
<tr>
<td>Party Name </td><td> <input name="party_name" type="text" required id="party_name" placeholder="Party Name"/></td>
</tr>
<tr>
<td>Address</td><td><input name="party_address" type="text" required id = "party_address" placeholder="Enter Address"/></td>
</tr>
<tr>
<td>Invoice Number</td>
<td><?php include('connect.php');
$dbconn = new connect();
$rand_no = $dbconn->get_rand_no(10);
echo $rand_no;?>
</td>
<input type="hidden" name="invoice_number" value="<?php echo $rand_no;?>">
</tr>
</table>
<table>
<thead>
<tr>
<th>Item Name</th><th>Qunatity</th><th>Rate</th><th>Final Rate</th>
</tr>
<tbody id="invtbody">
<tr>
<td><input type="text" name="item_name[]" id ="item_name1" placeholder="Item Name" class="itemname" refid="1" required/></td>
<td><input type="text" name="item_qty[]" id ="item_qty1" placeholder="Quantity" class="itemqty" refid="1" required/></td>
<td><input type="text" name="item_rate[]" id ="item_rate1" placeholder="Rate" class="itemrate" refid="1" required/></td>
<td><input type="text" name="final_rate[]" id="final_rate1" refid="1" class="itemfinal" disabled/></td>
</tr>
</tbody>
<tr>
<td></td><td></td>
<td>GrandTotal </td><td><div id="totalamount"></div></td>
</table>
<div id="add"></div><br>
<input type="button" value="ADD MORE" id="addBtn" ><br>
<input type="submit" name="preview-invoice" value="PREVIEW" >
<input type="hidden" name="totalinputs" value="1">
<input type="hidden" name="total_amount[]" id="total_amount" value="0" >
</form>
そして、これは最終レートと総計が計算されるコードです:
$(".itemrate,.itemqty").live('keyup',function(){
var refid = $(this).attr('refid');
var qty = "#item_qty"+refid;
var rate = "#item_rate"+refid;
var finalrate = "#final_rate"+refid;
var totalinpval = $("input[name=total_amount]").val();
if(($(qty).val() != "") && ($(rate).val() != ""))
{
var total = parseInt($(qty).val()) * parseFloat($(rate).val());
$(finalrate).val(total);
$("#total_amount").val(total); //tried putting the value in the hidden value but this doesnt work too!
var grandtotal = 0;
$(".itemfinal").each(function(){
grandtotal += parseInt($(this).val());
});
$("#totalamount").html(grandtotal);
}
ajax呼び出しは次のようになります
$("input[name=preview-invoice]").click(function(){
$.ajax({
type:'POST',
url:'display-invoice.php',
data: $("#invoice").serialize(),
success: function(msg){}
})
})
display-invoice.php では、次のような値を表示しています:
<table border="2" bgcolor="#50D5CE">
<tr>
<th>Item Name</th><th>Quantity</th><th>Rate</th><th>Final Rate</th>
</tr>
<?php $totalcount = $_REQUEST['totalinputs'];
for($i=0;$i<$totalcount;$i++){ ?>
<tr>
<td><?php echo $_REQUEST['item_name'][$i]; ?></td>
<td><?php echo $_REQUEST['item_qty'][$i]; ?></td>
<td><?php echo $_REQUEST['item_rate'][$i]; ?> </td>
<td><?php echo $_REQUEST['final_rate'][$i]; ?></td>
</tr>
<?php
}
?>
<tr>
<td></td><td><td>Grandtotal</td><td><?php ?></td>
</tr>
</table>
私が得るエラーは Undefined Index: final_rate です。助けてください!