function get_form_html($form_id, $id) { ob_start(); ?> <div style="height: 150px; width: 320px; background-color: #ECECEC; border-radius: 5px;margin-left: auto;display: none; "> </div> <div style="margin-top: 10px; background-color:transparent;padding-bottom: 30px;"> <style> div#purchace_items td{ border: 1px solid #21ACD7; } div#purchace_items tbody td{ padding: 5px 0 5px 5px; } div#purchace_items tbody td input,div#purchace_items tbody td select{ padding: 0; border: 0; margin: 0; height: 100%; width: 100%; background-color: transparent; } </style> <div id="purchace_items" style="width: 100%; padding: 10px 0; color: #21ACD7;"> <table id="items_table" style="border-collapse: collapse; width: 100%; background-color: #fff; border-radius: 10px; color: #21ACD7;"> <thead style="text-align: center;"> <tr status="not_selected"> <td> # </td> <td> ID </td> <td> VENDOR NAME </td> <td> CONTACT NUMBER </td> <td> TIN NUMBER </td> <td style=""> CONTACT ADDRESS </td> </tr> </thead> <tbody style="padding-left: 3px; text-align: center; "> <?php $vendor = new wendors(); $vendors = $vendor->getWendors(); $i = 0; if ($vendors == NULL || sizeof($vendors) == 0) { echo '<tr><td colspan="8"> No Vendor Found </td></tr>'; } else { foreach ($vendors as $vendor) { ?> <tr id="<?php echo $vendor->id; ?> " onclick="select_row(this)" status="not_selected"> <td style="text-align: center;"><?php echo ++$i; ?> </td> <td><?php echo 'VENDOR-' . $vendor->id; ?> </td> <td id="vendor_name"><?php echo $vendor->wendor_name; ?> </td> <td id="contact_no"><?php echo $vendor->contact_no; ?> </td> <td id="wendor_tin_number"><?php echo $vendor->wendor_tin_number; ?> </td> <td id="contact_address"><?php echo $vendor->contact_address; ?> </td> </tr> <?php } } ?> </tbody> </table> </div> </div> <script type="text/javascript"> function select_row(row) { var j_row = $(row); if(j_row.attr('status') == 'selected'){ $('table#items_table tr').attr('status', 'not_selected'); $('table#items_table tr').css('background-color', '#FFF'); $('img#edit').css('display', 'none'); $('img#edit_fade').css('display', 'block'); $('img#delete').css('display', 'none'); $('img#delete_fade').css('display', 'block'); }else{ $('table#items_table tr').attr('status', 'not_selected'); $('table#items_table tr').css('background-color', '#FFF'); j_row.attr('status', 'selected'); j_row.css('background-color', '#C0EFFD'); $('img#edit').css('display', 'block'); $('img#edit_fade').css('display', 'none'); $('img#delete').css('display', 'block'); $('img#delete_fade').css('display', 'none'); } } function on_edit_clicked(){ var selected_row = $('tr[status="selected"]'); var vendor_name = selected_row.find('td#vendor_name').html(); var id = selected_row.attr('id'); var contact_number = selected_row.find('td#contact_no').html(); var tin_number = selected_row.find('td#wendor_tin_number').html(); var contact_address = selected_row.find('td#contact_address').html(); get_form(10, ///vendor create form function (html, tools){ $('div#form-body').html(html); $('div#content-body-action-tools').html(tools); var form = $('div#form-body').find('form.action_form'); form.attr('operation', 'update'); form.attr('vendor_id', id); form.find('input#vendor_name').val(vendor_name); form.find('input#contact_number').val(contact_number); form.find('input#contact_address').val(contact_address); form.find('input#tin_number').val(tin_number); form.find('input[type=submit]').val('UPDATE'); $('div#head_div').html('ID : VENDOR-'+id); $('div#head_div').css('display', 'block'); }, function (message){ $('font#section_heading').empty(); $('div#form-body').empty(); alert(message); } ); } function on_delete_clicked(){ var selected_row = $('tr[status="selected"]'); var id = selected_row.attr('id'); if(confirm('Are you sure you want to delete VENDOR-'+id+' ?' )){ var data = { form_id : 18, vendor_id : id } delete_form_data(data, function(message) { get_form(18, function(html, tools) { $('div#form-body').html(html); $('div#content-body-action-tools').html(tools); }, function(message) { $('font#section_heading').empty(); $('div#form-body').empty(); alert(message); }); alert(message); }, function(message) { alert(message); }); } } function on_add_clicked(){ get_form(10, ///vendor create form function (html, tools){ $('div#form-body').html(html); $('div#content-body-action-tools').html(tools); }, function (message){ $('font#section_heading').empty(); $('div#form-body').empty(); alert(message); } ); } </script> <?php $form = ob_get_clean(); return $form; }
function get_form_html($form_id, $id) { ob_start(); ?> <style> .field_name{ width: 20%; } .field{ width: 50%; } .field input{ width: 100%; margin-left: 0px; } .field .parent{ padding: 0px 0px; } .field select{ width: 100%; } </style> <div style="height: 150px; width: 320px; background-color: #ECECEC; border-radius: 5px;margin-left: auto;display: none; "> </div> <div style="margin-top: 10px; background-color:transparent;padding-bottom: 100px;"> <form action="#" method="post" onsubmit="return false" class="action_form" operation="add" > <table style="width:100%;"> <tr> <td class="field_name"> <font>VENDOR</font> </td> <td class="field"> <div class="parent"> <input id="wendor_id" onfocus="$(this).css('border', '0px')" required list="wendors" autocomplete="off" style="border: 0;" /> <datalist id="wendors"> <?php $wendor = new wendors(); $wendors = array(); $wendors = $wendor->getWendors(); foreach ($wendors as $wendor) { echo '<option id="' . $wendor->id . '" value="' . $wendor->wendor_name . ' ( ID : ' . $wendor->id . ')" >' . $wendor->wendor_name . ' ( ID : ' . $wendor->id . ')' . '</option>'; } ?> </datalist> </div> </td> </tr> <?php $purchace = new purchaces(); $bill_number = $purchace->getMaxBillNumber() + 1; ?> <tr> <td class="field_name"> <font>BILL NUMBER</font> </td> <td class="field"> <div class="parent"> <input type="text" id="bill_number" value="<?php echo $bill_number; ?> " /> </div> </td> </tr> <tr> <td colspan="2"> <style> div#purchace_items td{ border: 1px solid #21ACD7; } div#purchace_items tbody td{ padding: 5px 0 5px 5px; } div#purchace_items tbody td input,div#purchace_items tbody td select{ padding: 0; border: 0; margin: 0; height: 100%; width: 100%; background-color: transparent; } </style> <div id="purchace_items" style="width: 100%; padding: 10px 0; color: #21ACD7;"> <table id="items_table" style="border-collapse: collapse; width: 100%; background-color: #fff; border-radius: 10px; color: #21ACD7;"> <thead style="text-align: center;"> <tr> <td> # </td> <td> ITEM </td> <td style="width: 17%;"> QUANTITY </td> <td style="width: 17%;"> RATE </td> <td style="width: 17%;"> TOTAL </td> <td style="width: 10%;"> DELETE </td> </tr> </thead> <tbody style="padding-left: 3px;"> <datalist id="items"> <?php $item = new item(); $items = array(); $items = $item->getItems(); foreach ($items as $item) { echo '<option id="' . $item->id . '"' . 'purchace_rate="' . $item->purchace_rate . '"' . ' value="' . $item->item_name . ' - ' . $item->item_code . '" >' . $item->item_name . ' - ' . $item->item_code . '</option>'; } ?> </datalist> <?php for ($i = 0; $i < 2; $i++) { ?> <tr status="active" slno="<?php echo $i + 1; ?> "> <td style="text-align: center;"> <?php echo $i + 1; ?> </td> <td> <input type="text" oninput="update_item_details(this)" onchange="update_item_details(this)" onfocus="$(this).css('border', '0px')" autocomplete="off" list="items" id="item" required /> </td> <td> <input type="number" min="0" required onchange="calculate_total(this)" onkeyup="calculate_total(this)" step="0.001" id="quantity"/> </td> <td> <input type="number" min="0" required onchange="calculate_total(this)" onkeyup="calculate_total(this)" step="0.01" id="rate"/> </td> <td> <input type="text" min="0" required id="total" disabled/> </td> <td style="width: 20px; text-align: center; padding-right: 5px;"> <img id="delete_button" onclick="delete_this_row(this)" style="color: #f00; cursor: pointer; height: 20px; width: 20px; margin-right: auto; margin-left: auto;" src="../ui/images/cross_button.png"/> <img id="activate_button" onclick="enable_this_row(this)" style="color: #f00; cursor: pointer; height: 20px; width: 20px; margin-right: auto; margin-left: auto; display: none;" src="../ui/images/tick_button.png" /> </td> </tr> <?php } ?> </tbody> </table> </div> </td> </tr> <tr style="height: 5px;"></tr> <tr> <td></td> <td> <div style="background-color: #21ACD7; color: #fff; text-align: center; padding-right: 20px;"> <span style="margin-right: 20px;">TOTAL </span> <span id="total">0</span> </div> </td> </tr> <tr style="height: 5px;"></tr> <tr> <td></td> <td> <div style="padding: 0px 12px;"> <div style="width: 100%; margin-left: -12px; padding: 12px; background-color: #0d92bb; border-radius: 5px; float: left;"> <div style="width: 33.33%; float: right; "> <input style="width: 100%;" type="submit" value="ADD" /> </div> <div style="width: 33.33%; float: right; "> <input style="width: 100%;" type="reset" value="CANCEL" /> </div> <div style="width: 33.33%;"> <input style="width: 100%;" onclick="add_purchace_item()" type="button" value="ADD ITEM" /> </div> </div> </div> </td> </tr> </table> </form> </div> <script type="text/javascript"> function update_item_details(item) { var item_input = $(item); var item_name = item_input.val(); var item_option_obj = $('datalist#items').find("option[value='" + item_name + "']"); if (item_option_obj.length == "0") { return; } else { var purchace_rate = item_option_obj.attr('purchace_rate'); var row = item_input.parent('td').parent('tr'); row.find('input#rate').val(purchace_rate); calculate_total(row.find('input#rate').get(0)); } } function calculate_total(field) { var $parent = $(field).closest('tr'); var $quantity = parseFloat($parent.find('input#quantity').val()); var $rate = parseFloat($parent.find('input#rate').val()); var $total = $quantity * $rate; $total = parseFloat($total).toFixed(2); if ($.isNumeric($total)) { $parent.find('input#total').val($total); } else { $parent.find('input#total').val(0); } calculate_purchace_total(); } function calculate_purchace_total() { var items_table = $('#items_table').find('tbody').children(); var total = 0; items_table.each(function() { var item_total_input = $(this).find('input#total'); var row_status = $(this).attr('status'); var item_total = item_total_input.val(); if ($.isNumeric(item_total) && row_status == 'active') { total = parseFloat(total) + parseFloat(item_total); } }); total = parseFloat(total).toFixed(2); $('span#total').html(total); } function delete_this_row(delete_btn) { var row = $(delete_btn).closest('tr'); row.attr('status', 'deativated'); row.css('background-color', '#c0effd'); row.find('input').prop('required', null); row.find('input').css('border', "0px"); $(delete_btn).css('display', 'none'); $(delete_btn).siblings().first().css('display', 'block'); $(delete_btn).parent('td').css('text-align', 'centre'); calculate_purchace_total(); } function enable_this_row(enable_btn) { var row = $(enable_btn).closest('tr'); row.attr('status', 'active'); row.css('background-color', '#fff'); row.find('input').prop('required', 'required'); $(enable_btn).siblings().first().css('display', 'block'); $(enable_btn).css('display', 'none'); $(enable_btn).parent('td').css('text-align', 'centre'); calculate_purchace_total(); } function add_purchace_item() { var row = '<tr status="active" slno=""><td style="text-align: center;"></td><td>' + '<input type="text" onchange="update_item_details(this)" oninput="update_item_details(this)" onfocus="$(this).css(\'border\', \'0px\')" autocomplete="off" list="items" id="item" required />' + '</td><td><input type="number" min="0" required onchange="calculate_total(this)" onkeyup="calculate_total(this)" step="0.001" id="quantity"/>' + '</td><td><input type="number" min="0" required onchange="calculate_total(this)" onkeyup="calculate_total(this)" step="0.01" id="rate"/>' + '</td><td><input type="text" min="0" required id="total" disabled/></td><td style="width: 20px; text-align: center; padding-right: 5px;">' + '<img id="delete_button" onclick="delete_this_row(this)" style="color: #f00; cursor: pointer; height: 20px; width: 20px; margin-right: auto; margin-left: auto;" src="../ui/images/cross_button.png"/>' + '<img id="activate_button" onclick="enable_this_row(this)" style="color: #f00; cursor: pointer; height: 20px; width: 20px; margin-right: auto; margin-left: auto; display: none;" src="../ui/images/tick_button.png" />' + '</td></tr>'; var lastcount = $('table#items_table tbody tr:last-child').attr('slno'); $('table#items_table tbody').append(row); lastcount = parseInt(lastcount) + 1; $('table#items_table tbody tr:last-child').attr('slno', lastcount); $('table#items_table tbody tr:last-child td:first-child').html(lastcount); } $(document).ready(function(e) { $('form.action_form').on('submit', function(e) { e.preventDefault(); var wendor_input = $('form input#wendor_id'); var wendor = wendor_input.val(); var wendor_id = 0; var wendor_option_obj = $('datalist#wendors').find("option[value='" + wendor + "']"); if (wendor_option_obj.length == "0") { wendor_input.css('border', '1px solid #f00'); alert("Invalid Wendor"); return; } else { wendor_id = wendor_option_obj.attr('id'); } var items = new Array(); var i = 0; var items_table = $('#items_table').find('tbody').children(); var invalid_item_precent = false; items_table.each(function() { if ($(this).attr('status') == 'active') { var item_input = $(this).find('input#item'); var item_name = item_input.val(); var item_option_obj = $('datalist#items').find("option[value='" + item_name + "']"); if (item_option_obj.length == "0") { item_input.css('border', '1px solid #f00'); invalid_item_precent = true; return; } else { var id = item_option_obj.attr('id'); var quantity = $(this).find('input#quantity').val(); var rate = $(this).find('input#rate').val(); var item = { id: id, quantity: quantity, rate: rate } items[i++] = item; } } }); if (invalid_item_precent) { //alert("Invalid Item Precent"); return; } var id = 7; var operation = $(this).attr('operation'); var total = $('span#total').html(); var bill_number = $('form input#bill_number').val(); if (operation == 'add') { var data = { form_id: id, wendor_id: wendor_id, total: total, bill_number: bill_number, items: items } add_form_data(data, function(message) { //$('form.action_form').get(0).reset(); get_form(7, function(html) { $('div#form-body').html(html); }, function(message) { $('font#section_heading').empty(); $('div#form-body').empty(); alert(message); }); alert(message); }, function(message) { alert(message); }); } else { alert("Invalid Operation " + id + ' - ' + operation); } }); }); </script> <?php $form = ob_get_clean(); return $form; }