フォームの詳細を入力し、[追加] ボタンをクリックすると、フォームの詳細がその場で表形式で追加され、実際にはどこにも保存されません。データベースに挿入して、選択した画像をアップロードする必要があります。
スクリーンショットの URL: http://www.orsatechnology.com/conv.jpg
解決するのを手伝ってください。
グリッドを生成するコード
// To Generate conveyance Grid
$(document).ready(function(){
var i = 0;
$('#addMore').click(function(){
$('#dailyReportFrm').validate();
$('#gridDiv').show();
var conNature = $('#con_nature').val();
var conNatureval = $('#con_nature :selected').text();
var noofKM = $('#no_of_km').val();
var perKMcost = $('#cost_per_km').val();
var noofDay = $('#no_of_day').val();
var bill = $('#bill').val();
var billAttach = $('#bill_attach').val();
var claimAmount = $('#claim_amt').val();
var empRemark = $('#emp_remark').val();
var str='';
var id = i++;
str ='<tr id="removeTR_'+i+'"><td>'+conNatureval+'<input type="hidden" id="con_nature_'+i+'" name="con_nature[]" value="'+conNature+'"><input type="hidden" id="no_of_km_'+i+'" name="no_of_km[]" value="'+noofKM+'"><input type="hidden" name="cost_per_km[]" id="cost_per_km_'+i+'" value="'+perKMcost+'"><input type="hidden" id="no_of_day_'+i+'" name="no_of_day[]" value="'+noofDay+'">'+bill+'<input type="hidden" id="bill_'+i+'" name="bill[]" value="'+bill+'"><input type="hidden" id="bill_attach_'+i+'" name="bill_attach[]" value="'+billAttach+'"></td><td>'+empRemark+'<input type="hidden" id="emp_remark_'+i+'" name="emp_remark[]" value="'+empRemark+'"></td><td>'+claimAmount+'<input type="hidden" id="claim_amt_'+i+'" name="claim_amt[]" value="'+claimAmount+'"></td><td align="center"><img class="delGridRow" onclick="delGridRow('+i+')" id="delConv_'+i+'" src="../../../public/images/delete_icon.png" style="cursor:hand; cursor:pointer;" title="Click to Delete"></td></tr>';
$('#convGrid').before("<tr></tr>",str);
$("#convGrid").val('');
$('#con_nature').val('');
$('#no_of_km').val('');
$('#cost_per_km').val('');
$('#no_of_day').val('');
$('#bill').val('');
$('#bill_attach').val('');
$('#claim_amt').val('');
$('#emp_remark').val('');
$("#KMDiv").hide();
$('#expenseNatureBoarding').hide();
$('#billAvailableDiv').hide();
$('#billAttachDiv').hide();
});
});
function delGridRow(id)
{
if(id!="")
{
var ans = confirm('Are you sure want to delete?');
if(ans==true)
{
$('#removeTR_'+id).remove();
/* if(id=='1')
{
$('#gridDiv').hide();
}*/
return true;
}
else
{
return false;
}
}
}
HTML code
<form name="dailyReportFrm" id="dailyReportFrm" method="post" onsubmit="return validate(this)" enctype="multipart/form-data">
<div id="conveyanceDiv">
<div style="overflow: auto;display:none;" id="gridDiv">
<table class="data display datatable" id="example">
<thead>
<tr>
<th>Nature of Expense</th>
<!-- th>Bill</th -->
<th>Amount</th>
<th>Remarks</th>
<th>Action</th>
</tr>
</thead>
</tr>
<tr class="odd gradeX" id="convGrid"></tr>
</table>
</div>
<!-- ################### Conveyance form start here ################### -->
<div class="add-conveyance-heading_bg"><b>Fill Expense Details</b></div>
<div class="daily-report-form">
<div id="Conveyance-feild">
<ul>
<li id="natureOfExpenseDiv">
<label>Nature of Expense <span class="red">*</span></label>
<div class="inputarea">
<select name="con_nature[]" id="con_nature" class="required" title="Select a Nature of conveyance">
<option value="">- Select -</option>
<?php foreach($natureofconvArray as $cn=>$cnv): ?>
<option value="<?php echo $cnv['nature_id'];?>"> <?php echo $cnv['nature_name']; ?> </option>
<?php endforeach; ?>
</select></div>
<div class="clear"></div>
</li>
<li id="KMDiv">
<label>No. of KMs <span class="red">*</span></label>
<div class="inputarea">
<select name="no_of_km[]" id="no_of_km" class="required" title="Select no. of K.M.">
<option value="">--Select--</option>
<?php for($km = 1; $km <= 500; $km++) { ?>
<option value="<?php echo $km; ?>"> <?php echo $km; ?> </option>
<?php } ?>
</select>
Amount per KM Rs.<input type="text" name="cost_per_km[]" id="cost_per_km" style="background-color:#FFFFFF;border:0px;font-weight:bold;padding-bottom:4px;" readonly="readonly" maxlength="5" value="<?php echo $perKMcost;?>" /> </div>
<div class="clear"></div>
</li>
<li id="expenseNatureBoarding" style="display:none;">
<label>No. of Days <span class="red">*</span></label>
<div class="inputarea">
<select name="no_of_day[]" id="no_of_day" class="required" title="Select no. of Day">
<option value="">--Select--</option>
<?php for($day = 1; $day <= 20; $day++) { ?>
<option value="<?php echo $day;?>"> <?php echo $day; ?> </option>
<?php } ?>
</select></div>
<div class="clear"></div>
</li>
<li id="billAvailableDiv" style="display:none;">
<label>Bill Available <span class="red">*</span></label>
<div class="inputarea">
<select name="bill[]" id="bill" class="required" title="Select bill availability">
<option value="">- Select -</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select></div>
<div class="clear"></div>
</li>
<li id="billAttachDiv" style="display:none;">
<label>Attach</label>
<div class="inputarea"><input type="file" name="bill_attach[]" id="bill_attach" /></div>
<div class="clear"></div>
</li>
<li id="amountClaimDiv">
<label>Amount Claimed <span class="red">*</span></label>
<div class="inputarea">
<input name="claim_amt[]" id="claim_amt" type="text" maxlength="5" readonly="readonly" class="text-box required number" title="Enter amount" />
</div>
<div class="clear"></div>
</li>
<li id="conveyanceRemarkDiv">
<label>Remarks <span class="red">*</span></label>
<div class="inputarea"><textarea name="emp_remark[]" id="emp_remark" cols="" rows=""></textarea></div>
<div class="clear"></div>
</li>
</ul>
</div>
<div style="text-align:right; margin-top:10px;">
<a href="javascript:void(0)"><img src="<?php echo $this->baseurl();?>/public/images/add-more-btn.jpg" alt="Add more" id="addMore" /></a></div>
<p class="red" id="msg"><b>Note:</b> In case of 1st and Last Visit, Claimed Amt. will be 0.00 upto 20 km.</p>
</div>
</div>
<div style="text-align:center; margin-top:10px;">
<input type="submit" class="submit-btn" value="Save & Next Visit" />
<input type="submit" class="submit-btn" value="Save & Exit" />
</div>
<div> </div>
</form>