I have created a dynamic form and I am trying to send the form data to mysql through PHP but its not working. Data is not getting sent even from the very first row without adding a dynamic row. I'm new to this topic, so I'm out of ideas to solve it. How can I make this form a correct one and send accurate data to mysql?
In my form I have 3 fields that are not dynamic.
Here is the form code:
<form name="newbillform" method="POST" action="save_purchase_details.php">
<table style=" border:1px solid black" cellpadding="5px" cellspacing="0px" align="center" border="0">
<tr>
<td colspan="4" style="background:#0066FF; color:#FFFFFF; fontsize:20px" align="center">
ADD NEW PURCHASE RECORD
</td>
</tr>
<tr>
<td>Date:</td>
<td>
<input type="date" name="p_date"/>
</td>
</tr>
<tr>
<td>Invoice Number:</td>
<td>
<input type="text" name="invoice_no" size="50">
</td>
</tr>
<tr>
<td>Balance:</td>
<td>
<input type="text" name="balance" size="50">
</td>
</tr>
</table>
<h2 style="padding-left:10px;">Enter Product Details Below:-</h2>
<table id="product_details" style="margin-top:8px;" align='center' border='1' width="900px">
<tr id="row1">
<td>
<input type="text" name="qty[]" value="" placeholder="Quantity" size="6">
</td>
<td>
<input type="text" name="pack[]" value="" placeholder="Pack" size="6">
</td>
<td>
<input type="text" name="item_name[]" value="" placeholder="Item Name" size="16">
</td>
<td>
<input type="text" name="batch[]" value="" placeholder="Batch" size="6">
</td>
<td>
<input type="text" name="expiry[]" value="" placeholder="Expiry" size="6">
</td>
<td>
<input type="text" name="mrp[]" value="" placeholder="M.R.P" size="6">
</td>
<td>
<input type="text" name="rate[]" value="" placeholder="Rate" size="6">
</td>
<td>
<input type="text" name="vat[]" value="" placeholder="VAT" size="6">
</td>
<td>
<input type="text" name="discount[]" value="" placeholder="Discount" size="6">
</td>
<td>
<input type="button" class="button-add-row" onclick="add_row();" value="ADD ROW" size="8">
</td>
</tr>
</table>
<center>
<input type="submit" name="submit_row" value="SUBMIT">
</center>
</form>
Here is the javascript code:
<script type="text/javascript">
function add_row()
{
$rowno = $("#product_details tr").length;
$rowno = $rowno + 1;
$("#product_details tr:last").after("<tr id='row"+$rowno+"'><td><input type='text' name='qty[]' placeholder='Quantity' size='6'></td><td><input type='text' name='pack[]' placeholder='Pack' size='6'></td><td><input type='text' placeholder='Item Name' name='item_name[]' size='16'></td><td><input type='text' name='batch[]' placeholder='Batch' size='6'></td><td><input type='text' name='expiry[]' placeholder='Expiry' size='6'></td><td><input type='text' name='mrp[]' placeholder='M.R.P' size='6'></td><td><input type='text' name='rate[]' placeholder='Rate' size='6'></td><td><input type='text' name='vat[]' placeholder='VAT' size='6'></td><td><input type='text' name='discount[]' placeholder='Discount' size='6'></td><td><input type='button' class='button-add-row' value='DELETE' onclick=delete_row('row"+$rowno+"')></td></tr>");
}
function delete_row(rowno)
{
$('#'+rowno).remove();
}
</script>
Here is the PHP code:
<?php
$connect = mysql_connect("localhost","root","") or die(mysql_error());
mysql_select_db("store_records",$connect) or die(mysql_error());
if(isset($_POST['submit_row']))
{
$amount;
$grand_total;
for($i = 0; $i < count($_POST['item_name']); $i++)
{
$qty = $_POST['qty'][$i];
$p_date = $_POST['p_date'];
$invoice_no = $_POST['invoice_no'];
$balance = $_POST['balance'];
$pack = $_POST['pack'][$i];
$item_name = $_POST['item_name'][$i];
$batch = $_POST['batch'][$i];
$expiry = $_POST['expiry'][$i];
$mrp = $_POST['mrp'][$i];
$rate = $_POST['rate'][$i];
$vat = $_POST['vat'][$i];
$discount = $_POST['discount'][$i];
$amount = $balance+($qty*$rate)-$discount;
$grand_total = $amount+(($amount*$vat)/100);
$query =mysql_query("insert into bill_records values('', '$p_date', '$invoice_no', '$balance', '$qty','$pack','$item_name', '$batch', '$expiry', '$mrp', '$rate', '$vat', '$discount', '$amount', '$grand_total')");
}
}
?>
It would be of great help. Thank You..
Related
I want to add the column values in text box field of each single row during insertion of value to that field and display that value in a read only field.
HTML CODE:
<form action="" method="post">
<table class="table-responsive">
<thead>
<tr>
<th style="width: 10%;">Task Name</th>
<th style="width: 10%;">Task Code</th>
<th style="width: 10%;">LDR</th>
<th style="width: 10%;">SDR</th>
<th style="width: 30%;">Total</th>
</tr>
</thead>
<?php
while($m_row = $m_result->fetch_assoc()) {
?>
<tbody>
<tr>
<?php
$sqltask="SELECT * FROM tasks WHERE tasks_code='".$m_row['tcode']."'";
$resulttask=$conn->query($sqltask);
$rowtask=$resulttask->fetch_assoc();
?>
<td><?php echo $rowtask['tasks_name'] ?></td>
<td><?php echo $m_row['tcode'] ?></td>
<td>
<input type="text" class="form-control master" name="ldr[]" id="ldr" value="<?php echo $m_row['ldr'];?>" placeholder="" autocomplete="off">
</td>
<td>
<input type="text" class="form-control master" name="sdr[]" id="sdr" value="<?php echo $m_row['sdr'];?>" placeholder="" autocomplete="off">
</td>
<td>
<input type="number" class="form-control master" id="master_diff" name="master_diff[]" readonly />
</td>
<td> <input type="hidden" name="master[]" id="master" value="<?php echo $master_row['id'];?>" /></td></tr>
</tbody>
<?php
}
?>
</table>
<div class="pull-right">
<input type="submit" class="btn btn-primary" name="mastertask" placeholder="Assign"/>
</div>
</div>
</div>
</div>
</form>
The above code is the html code for the textbox fields where the fields ldr,sdr should be sumup for getting the total sum in master_diff field. It should be using onchange event since each entry to the textbox fields should be get added to display the final sum.
You should to remove all ids from the cycle!
Try this:
var inputs = document.getElementsByClassName("inputs");
var summDiff = function() {
var tr = this.closest("tr");
var ldr = tr.getElementsByClassName("ldr")[0]
var sdr = tr.getElementsByClassName("sdr")[0]
var diff = tr.getElementsByClassName("master_diff")[0]
diff.value = parseInt(ldr.value) + parseInt(sdr.value)
};
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('change', summDiff, false);
}
<form action="" method="post">
<table class="table-responsive">
<thead>
<tr>
<th style="width: 10%;">Task Name</th>
<th style="width: 10%;">Task Code</th>
<th style="width: 10%;">LDR</th>
<th style="width: 10%;">SDR</th>
<th style="width: 30%;">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>task 1</td>
<td>0001</td>
<td>
<input type="text" class="form-control master ldr inputs" name="ldr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="text" class="form-control master sdr inputs" name="sdr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="number" class="form-control master master_diff" name="master_diff[]" readonly />
</td>
<td>
<input type="hidden" name="master[]" value="1" />
</td>
</tr>
<tr>
<td>task 2</td>
<td>0002</td>
<td>
<input type="text" class="form-control master ldr inputs" name="ldr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="text" class="form-control master sdr inputs" name="sdr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="number" class="form-control master master_diff" name="master_diff[]" readonly />
</td>
<td>
<input type="hidden" name="master[]" value="2" />
</td>
</tr>
<tr>
<td>task 3</td>
<td>0003</td>
<td>
<input type="text" class="form-control master ldr inputs" name="ldr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="text" class="form-control master sdr inputs" name="sdr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="number" class="form-control master master_diff" name="master_diff[]" readonly />
</td>
<td>
<input type="hidden" name="master[]" value="3" />
</td>
</tr>
</tbody>
</table>
<div class="pull-right">
<input type="submit" class="btn btn-primary" name="mastertask" placeholder="Assign"/>
</div>
</form>
The below code is used to add new row to the table, also multiply two fields and show the result in the final field, in this dynamically generated row and at last part of code, removes the added row if it is not needed.
<script type="text/javascript">
$(window).load(function(){
$('.add-box').click(function() {
var box_html = $('<tr class="multLote"><td align="center"><input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;" /></td> ' +
'<td><textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" > </textarea></td>' +
'<td><input type="text" name="lote20[]" value="0" class="val20" /></td>' +
'<td><input type="text" name="lote10[]" value="0" class="val10" /></td>' +
'<td><input type="text" disabled name="lote_result[]" class="lote_result" value="0"></td>' +
'<th>Remover</th></tr>');
$('#tabela-lotes tbody').append(box_html);
return false;
});
$('#tabela-lotes').on("keyup", ".multLote input", function() {
var mult = 0;
// for each row:
console.log($(this).closest('table').find("tr.multLote").length);
$(this).closest('tr.multLote').each(function() {
// get the values from this row:
var $val20 = $('.val20', this).val();
var $val10 = $('.val10', this).val();
console.log($val100);
var $total = ($val20 * $val10);
console.log($total);
// set total for the row
$('.lote_result', this).val($total);
mult += $total;
});
});
$('#tabela-lotes').on('click', '.remove-box', function(e) {
e.preventDefault();
$(this).closest('tr.multLote').remove();
});
});
</script>
This is the html code.
<form action="tabledb.php" method="POST">
<body>
<input type="button" class="add-box" value="Add">
<table id="tabela-lotes">
<thead>
<tr>
<th>
SL. NO
</th>
<th>
PRODUCT NAME
</th>
<th>
RATE PER CB
</th>
<th>
CBs
</th>
<th>
AMOUNT
</th>
</tr>
</thead>
<tbody><tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" value="0"> </textarea>
</td>
<td>
<input type="text" name="lote20[]" class="val20" value="0">
</td>
<td>
<input type="text" name="lote10[]" class="val10" value="0">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="0">
</td>
</tr>
</tbody></table>
<table>
<tr><th>
Total CBS :</th>
<td> <input type="text" name="total_cbs" id="total_cbs" placeholder="Total CBS" style="height:25px;font-weight:bold;" onfocus="cal1()" readonly ></td></tr>
<tr><th>Total AMOUNT : </th>
<td><input type="text" name="total" id="total" placeholder="Total Rs." style="height:25px;font-weight:bold;" onfocus="cal2('.$i.')" readonly></td></tr>
</table>
<input type="submit" value="submit">
</form>
I want to the get the total coloumn sum of lote10[ ] and lote_result[ ] fields to be displayed in the total_cbs and total fields respectively.Please help, Thank you in advance.
enter image description here
I have updated my question with the image of the output, which states exactly what i need, Thank You.
Assuming the end result looks like this:
var result = 0;
var elements = document.getElementsByTagName("table")[0].getElementsByTagName("tr");
for (var i = elements.length - 1; i > elements.length - 3; i--) {
var inputs = elements[i].getElementsByTagName('input');
result += parseInt(inputs[inputs.length - 1].value);
}
console.log('total', result);
alert('total ' + result);
<table>
<tbody>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
</tbody>
</table>
JSFIDDLE
Iam stuck while doing some calculations in Javascript. I have some rows of records being shown, each rows has calculations. The actual scenario is the system has to calculate quantity * unitprice and fill the total in Total Field. When i change the currency from a dropdown, it has to go through some if conditions which i have given in javascript, its not taking that. Dont know what is the actual issue. Can anyone help? Iam putting the html form below:
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.3.js'></script>
<script type="text/javascript">
function isNum(value)
{
return 123;
}
function calcTotals()
{
var total = 0;
var i = 0;
while (document.forms['cart'].elements['unitprice[]'][i])
{
unitpriceObj = document.forms['cart'].elements['unitprice[]'][i];
item_quantityObj = document.forms['cart'].elements['item_quantity[]'][i];
total_inr_valueObj = document.forms['cart'].elements['total_inr[]'][i];
totalObj = document.forms['cart'].elements['total[]'][i];
totalObj.value = parseFloat((item_quantityObj.value*1) * unitpriceObj.value*1);
//Currency_change formulae
var e = document.getElementById("currency_change[]");
var currency_selected = e.options[e.selectedIndex].value;
var price = $(this).find(':selected').data('price');
if (currency_selected.value() == 'INR'){
total_inr_valueObj.value=totalObj.value;
} else if (currency_selected.value() == 'USD'){
total_inr_valueObj.value = totalObj.value * price.value;
} else {
total_inr_valueObj.value = (inrvalue.value / price.value) * totalObj.value;
}
}
i++;
}
return;
}
</script>
</head>
<body>
<form name='cart' method='post' class='single' action='generate_quot_cust_edititems_save_complete.php?tender_id=1' >
<table width="100%" border="1" style="border-collapse: collapse;" cellpadding="1" cellspacing="1">
<tr bgcolor="#E6E6FA">
<td width=4%>SlNo</td>
<td width=10%>Item Name</td>
<td width=4%>Qty</td>
<td width=3%>Units</td>
<td width=4%>Unitprice</td>
<td width=6%>Currency</td>
<td width=6%>Total</td>
<td width=6%>Total INR</td>
</tr>
<tr>
<td width='4%'>
<input size='1' type='hidden' name='id[0]' value='' readonly/>
<input size='1' type='text' name='sl[0]' value='1' readonly/>
</td>
<td width='10%'><input type='text' size='28' id='item_name0' name='item_name[0]' placeholder='filter 3' value='filter 3' /</td>
<td width='4%'><input size='1' class='item_quantity' type='text' name='item_quantity[]' id='item_quantity[]' value='25' /></td>
<td width='3%'><input size='1' class='item_units' type='text' name='item_units[]' id='item_units[]' value='Nos' readonly/></td>
<td width='4%'><input size='5' class='unitprice' type='text' name='unitprice[]' id='unitprice[]' value='' onchange='calcTotals()'/></td>
<td width='6%'>
<select id='currency_change[]' name='currency_change[]'>
<option value=''>select</option>
<option value=USD data-price=1>USD</option>
<option value=INR data-price=65.831111>INR</option>
<option value=GBP data-price=0.643864>GBP</option>
<option value=EUR data-price=0.88469>EUR</option>
<option value=SGD data-price=1.398912>SGD</option>
</select></td>
<td width='8%'><input size='9' type='text' name='total[]' id='total[]' value='' readonly class='total'/></td>
<td width='8%'><input size='7' type='text' id='total_inr[]' name='total_inr[]' value=''/></td>
</tr>
<tr>
<td width='4%'><input size='1' type='hidden' name='id[1]' value='' readonly/><input size='1' type='text' name='sl[1]' value='2' readonly/></td>
<td width='10%'><input type='text' size='28' id='item_name1' name='item_name[1]' placeholder='Filter2' value='Filter2' /</td>
<td width='4%'><input size='1' class='item_quantity' type='text' name='item_quantity[]' id='item_quantity[]' value='15' /></td>
<td width='3%'><input size='1' class='item_units' type='text' name='item_units[]' id='item_units[]' value='Nos' readonly/></td>
<td width='4%'><input size='5' class='unitprice' type='text' name='unitprice[]' id='unitprice[]' value='' onchange='calcTotals()'/></td>
<td width='6%'>
<select id='currency_change[]' name='currency_change[]'>
<option value=''>select</option>
<option value=USD data-price=1>USD</option>
<option value=INR data-price=65.831111>INR</option>
<option value=GBP data-price=0.643864>GBP</option>
<option value=EUR data-price=0.88469>EUR</option>
<option value=SGD data-price=1.398912>SGD</option>
</select>
</td>
<td width='8%'><input size='9' type='text' name='total[]' id='total[]' value='' readonly class='total'/></td>
<td width='8%'><input size='7' type='text' id='total_inr[]' name='total_inr[]' value=''/></td>
</tr>
</table></div>
<br><br>INR Value -><input type="text" class="inrvalue" id="inrvalue" name="inrvalue" value="65.831111">
<br><br>
<table><td><input type='submit' value='--Save Data--' /></td></tr></table></form>
There are multiple problems in your script.
A more jQuery-ish solution will be something like
$('#table :input').change(function() {
var $tr = $(this).closest('tr'),
$totInr = $tr.find('[name="total_inr[]"]'),
unitprice = +$tr.find('[name="unitprice[]"]').val() || 0,
qty = +$tr.find('[name="item_quantity[]"]').val() || 0,
$currency = $tr.find('[name="currency_change[]"] option:selected'),
currency = $currency.val(),
inr = $('#inrvalue').val();
var total = unitprice * qty;
$tr.find('[name="total[]"]').val(total);
if (currency == 'INR') {
$totInr.val(total);
} else if (currency == 'USD') {
$totInr.val(total * unitprice);
} else {
$totInr.val((inr / ($currency.data('price') || 1)) * total);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name='cart' method='post' class='single' action='generate_quot_cust_edititems_save_complete.php?tender_id=1'>
<table width="100%" border="1" style="border-collapse: collapse;" cellpadding="1" cellspacing="1" id="table">
<tr bgcolor="#E6E6FA">
<td width=4%>SlNo</td>
<td width=10%>Item Name</td>
<td width=4%>Qty</td>
<td width=3%>Units</td>
<td width=4%>Unitprice</td>
<td width=6%>Currency</td>
<td width=6%>Total</td>
<td width=6%>Total INR</td>
</tr>
<tr>
<td width='4%'>
<input size='1' type='hidden' name='id[0]' value='' readonly/>
<input size='1' type='text' name='sl[0]' value='1' readonly/>
</td>
<td width='10%'>
<input type='text' size='28' id='item_name0' name='item_name[0]' placeholder='filter 3' value='filter 3' /</td>
<td width='4%'>
<input size='1' class='item_quantity' type='text' name='item_quantity[]' value='25' />
</td>
<td width='3%'>
<input size='1' class='item_units' type='text' name='item_units[]' id='item_units[]' value='Nos' readonly/>
</td>
<td width='4%'>
<input size='5' class='unitprice' type='text' name='unitprice[]' id='unitprice[]' value='' />
</td>
<td width='6%'>
<select id='currency_change[]' name='currency_change[]'>
<option value=''>select</option>
<option value=USD data-price=1>USD</option>
<option value=INR data-price=65.831111>INR</option>
<option value=GBP data-price=0.643864>GBP</option>
<option value=EUR data-price=0.88469>EUR</option>
<option value=SGD data-price=1.398912>SGD</option>
</select>
</td>
<td width='8%'>
<input size='9' type='text' name='total[]' id='total[]' value='' readonly class='total' />
</td>
<td width='8%'>
<input size='7' type='text' id='total_inr[]' name='total_inr[]' value='' />
</td>
</tr>
<tr>
<td width='4%'>
<input size='1' type='hidden' name='id[1]' value='' readonly/>
<input size='1' type='text' name='sl[1]' value='2' readonly/>
</td>
<td width='10%'>
<input type='text' size='28' id='item_name1' name='item_name[1]' placeholder='Filter2' value='Filter2' /</td>
<td width='4%'>
<input size='1' class='item_quantity' type='text' name='item_quantity[]' id='item_quantity[]' value='15' />
</td>
<td width='3%'>
<input size='1' class='item_units' type='text' name='item_units[]' id='item_units[]' value='Nos' readonly/>
</td>
<td width='4%'>
<input size='5' class='unitprice' type='text' name='unitprice[]' id='unitprice[]' value='' />
</td>
<td width='6%'>
<select id='currency_change[]' name='currency_change[]'>
<option value=''>select</option>
<option value=USD data-price=1>USD</option>
<option value=INR data-price=65.831111>INR</option>
<option value=GBP data-price=0.643864>GBP</option>
<option value=EUR data-price=0.88469>EUR</option>
<option value=SGD data-price=1.398912>SGD</option>
</select>
</td>
<td width='8%'>
<input size='9' type='text' name='total[]' id='total[]' value='' readonly class='total' />
</td>
<td width='8%'>
<input size='7' type='text' id='total_inr[]' name='total_inr[]' value='' />
</td>
</tr>
</table>
</div>
<br>
<br>INR Value ->
<input type="text" class="inrvalue" id="inrvalue" name="inrvalue" value="65.831111">
<br>
<br>
<table>
<td>
<input type='submit' value='--Save Data--' />
</td>
</tr>
</table>
</form>
I suggest you use AngularJS Numbers:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Hi I am using codeigniter framework. I am having a javascript to to create a table row dynamically when I click a button.
I need to have a dropdown inside a table cell that is added dynamically. Here is the code I tried so far.
function displayResult() {
<?php
$attributes = array('class' => 'form-horizontal', 'id' => '');
$options_employee = array('' => "Select");
foreach ($employee as $row)
{
$options_employee[$row['first_name']] = $row['first_name'];
}
?>
var something='<?php echo form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');?>';
alert(something);
var row = document.getElementById("test").insertRow(-1);
row.innerHTML = '<td><div>'+something+'</div></td><td><input type="text" name="start_time[]" value="" style="width:35px;"/></td><td><input type="text" name="pid[]" style="width:35px;"/></td><td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td><td><input type="text" class="type" value="" style="width:45px;"/></td><td><input type="text" class="qty_prch" value="" style="width:45px;"/></td><td><input type="text" class="qty_used" value="" style="width:45px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td>';
}
When button is clicked I call this displayResult(). I am getting 2 errors in my console.
1.Uncaught SyntaxError: Unexpected token ILLEGAL
2.Uncaught ReferenceError: displayResult is not defined
Can someone help me? Please help me fix this code.
function displayResult() { <? php
$attributes = array('class' => 'form-horizontal', 'id' => '');
$options_employee = array('' => "Select");
foreach($employee as $row) {
$options_employee[$row['first_name']] = $row['first_name'];
}
?>
var something = '<?php echo form_dropdown('
employee ', $options_employee, set_value('
employee[]
'), '
class = "span2"
');?>';
alert(something);
var row = document.getElementById("test").insertRow(-1);
row.innerHTML = '<td><div>' + something + '</div></td><td><input type="text" name="start_time[]" value="" style="width:35px;"/></td><td><input type="text" name="pid[]" style="width:35px;"/></td><td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td><td><input type="text" class="type" value="" style="width:45px;"/></td><td><input type="text" class="qty_prch" value="" style="width:45px;"/></td><td><input type="text" class="qty_used" value="" style="width:45px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td>';
}
<div id="form">
<!-- div form starts here.its for add table -->
<table id="test">
<thead>
<tr>
<td style="width:80px;">
employee
</td>
<td style="width:35px;">
start time
</td>
<td style="width:35px;">
id
</td>
<td style="width:145px;">
Description
</td>
<td style="width:45px;">
Type
</td>
<td style="width:45px;">
qty prch
</td>
<td style="width:45px;">
qty used
</td>
<td style="width:70px;">
Price
</td>
<td style="width:70px;">
discount
<td style="width:70px;">
Tax
</td>
<td style="width:70px;">
Total
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<?php echo form_dropdown( 'employee', $options_employee, set_value( 'employee[]'), 'class="span2"');?>
</td>
<td>
<input type="text" name="start_time[]" value="" style="width:35px;" />
</td>
<td>
<input type="text" name="pid[]" value="" style="width:35px;" />
</td>
<td>
<input type="text" name="description[]" class="description" value="" style="width:145px;" />
</td>
<td>
<input type="text" name="type[]" class="type" style="width:45px;" />
</td>
<td>
<input type="text" name="qty_prch[]" class="qty_prch" style="width:45px;" />
</td>
<td>
<input type="text" name="qty_used[]" class="qty_used" style="width:45px;" />
</td>
<td>
<input type="text" name="price[]" class="price" style="width:70px;" />
</td>
<td>
<input type="text" name="discount[]" class="discount" style="width:70px;" />
</td>
<td>
<input type="text" name="tax[]" class="tax" style="width:70px;" />
</td>
<td>
<input type="text" name="total[]" class="total" style="width:70px;" />
</td>
</tr>
</tbody>
</table>
<div id="add_row">
<button onClick="displayResult()" class="add_r"></button>
</div>
This works fine for me. Thank you all for your support !!
function displayResult() {
<?php
$attributes = array('class' => 'form-horizontal', 'id' => '');
$options_employee = array('' => "Select");
foreach ($employee as $row)
{
$options_employee[$row['first_name']] = $row['first_name'];
}
$dropdown = form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');
?>
var complex = <?php echo json_encode($dropdown); ?>;
var row = document.getElementById("test").insertRow(-1);
row.innerHTML =
'<td><div>'+complex+'</div></td>'+
'<td><input type="text" name="start_time[]" value="" style="width:35px;"/></td>'+
'<td><input type="text" name="pid[]" style="width:35px;"/></td>'+
'<td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td>'+
'<td><input type="text" class="type" value="" style="width:45px;"/></td>'+
'<td><input type="text" class="qty_prch" value="" style="width:45px;"/></td>'+
'<td><input type="text" class="qty_used" value="" style="width:45px;"/></td>'+
'<td><input type="text" value="" style="width:70px;"/></td>'+
'<td><input type="text" value="" style="width:70px;"/></td>'+
'<td><input type="text" value="" style="width:70px;"/></td>'+
'<td><input type="text" value="" style="width:70px;"/></td>';
}
Change your single ' to double "
your code is var something='<?php echo form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');?>';
because when javascript start reading this line
var something='<?php echo form_dropdown('employee' it seems statement end here ('e near ' after dropdown('
you should use something like that
var something='<?php echo form_dropdown("employee", $options_employee, set_value("employee[]"), \'class="span2"\');?>';
sorry for my bad english
In your code Snippet on the first line :
function displayResult() { <? php
there is a space between <? and php
Remove that and retry.
I'm working on a project that is based on an Excel spreadsheet, where I need to calculate budgets, etc. There are various categories in my table, and I need to calculate the subtotal of each category. Here's a screenshot to make it more clear:
http://i.imgur.com/loyLbW7.png
My problem is, I'm not sure how to calculate the subtoal for each category. Right now, I have $('.subcat100 .budget').each(function(). The class "subcat100" is attached to the tr and changes for each category section (subcat100, subcat200, subcat300, etc.). The numerical value is based off the sub category number stored in database. How would I pull all of these classes and iterate through them?
jQuery:
$(document).ready(function() {
$('input[name="txtQuantity[]"],input[name="txtUnitCost[]"]').change(function(e) {
var budget = 0;
var $row = $(this).parent().parent();
var quanity = $row.find('input[name="txtQuantity[]"]').val();
var unitcost = $row.find('input[name="txtUnitCost[]"]').val();
budget = parseFloat(quanity * unitcost);
var decimal = budget.toFixed(2);
$row.find('.budget').val(decimal);
var sum = 0;
$('.subcat100 .budget').each(function() {
var budgets = $(this).val();
console.log(budgets);
if (IsNumeric(budgets)) {
sum += parseFloat(budgets, 10);
}
});
$('.subcat100 .budgetsubtotal').val(sum);
});
function IsNumeric(input) {
return (input - 0) == input && input.length > 0;
}
});
HTML:
<table>
<tbody>
<tr class="subcat100">
<td>
<span name="txtItemCode[]"><strong>100</strong></span>
</td>
<td colspan="7">
<span name="txtSubCategoryName[]" class="100"><strong>Land Purchase Costs</strong></span>
</td>
</tr>
<tr class="subcat100">
<td>
<input type="text" name="txtSubItemCode[]" size="10" readonly="readonly" value="101">
</td>
<td>
<input type="text" name="txtItem[]" size="50" readonly="readonly" value="Purchase price">
</td>
<td>
<input type="text" name="txtUnit[]" size="10" value="">
</td>
<td>
<input type="text" name="txtQuantity[]" class="integer" size="10" value="1">
</td>
<td>
<input type="text" name="txtUnitCost[]" class="monetary" size="10" value="299.99">
</td>
<td>
<input type="text" name="txtBudget[]" class="monetary budget" size="10" readonly="readonly" value="299.99">
</td>
<td>
<input type="text" name="txtActual[]" class="monetary" size="10" value="249.99">
</td>
<td>
<input type="text" name="txtDifference[]" class="monetary difference" size="10" readonly="readonly" value="50.00">
</td>
</tr>
<tr class="subcat100">
<td>
<input type="text" name="txtSubItemCode[]" size="10" readonly="readonly" value="110">
</td>
<td>
<input type="text" name="txtItem[]" size="50" readonly="readonly" value="Realtor's fees">
</td>
<td>
<input type="text" name="txtUnit[]" size="10" value="">
</td>
<td>
<input type="text" name="txtQuantity[]" class="integer" size="10" value="">
</td>
<td>
<input type="text" name="txtUnitCost[]" class="monetary" size="10" value="">
</td>
<td>
<input type="text" name="txtBudget[]" class="monetary budget" size="10" readonly="readonly" value="">
</td>
<td>
<input type="text" name="txtActual[]" class="monetary" size="10" value="">
</td>
<td>
<input type="text" name="txtDifference[]" class="monetary difference" size="10" readonly="readonly" value="">
</td>
</tr>
<tr class="subcat100">
<td>
<input type="text" name="txtSubItemCode[]" size="10" readonly="readonly" value="120">
</td>
<td>
<input type="text" name="txtItem[]" size="50" readonly="readonly" value="Due diligence">
</td>
<td>
<input type="text" name="txtUnit[]" size="10" value="">
</td>
<td>
<input type="text" name="txtQuantity[]" class="integer" size="10" value="15">
</td>
<td>
<input type="text" name="txtUnitCost[]" class="monetary" size="10" value="45.00">
</td>
<td>
<input type="text" name="txtBudget[]" class="monetary budget" size="10" readonly="readonly" value="675.00">
</td>
<td>
<input type="text" name="txtActual[]" class="monetary" size="10" value="700.00">
</td>
<td>
<input type="text" name="txtDifference[]" class="monetary difference" size="10" readonly="readonly" value="-25.00">
</td>
</tr>
<tr class="subcat100">
<td colspan="5">
<span><strong>Subtotal</strong></span>
</td>
<td>
<input type="text" name="txtSubTotalBudget[]" class="budgetsubtotal" size="10" readonly="readonly" value="">
</td>
<td>
<input type="text" name="txtSubTotalActual[]" class="actualsubtotal" size="10" readonly="readonly" value="">
</td>
<td>
<input type="text" name="txtSubTotalDifference[]" class="differencesubtotal" size="10" readonly="readonly" value="">
</td>
</tr>
</tbody>
</table>
Well, I ended up doing this:
var itemcodes = <?php echo json_encode($arrItemCodes);?>;
$('input[name="txtQuantity[]"],input[name="txtUnitCost[]"]').change(function(e) {
var budget = 0;
var $row = $(this).parent().parent();
var quanity = $row.find('input[name="txtQuantity[]"]').val();
var unitcost = $row.find('input[name="txtUnitCost[]"]').val();
budget = parseFloat(quanity * unitcost);
$row.find('.budget').val(budget.toFixed(2));
$.each(itemcodes, function(intIndex, objValue) {
var sum = 0;
$('.subcat' + objValue + ' .budget').each(function() {
var budgets = $(this).val();
console.log(budgets);
if (IsNumeric(budgets)) {
sum += parseFloat(budgets, 10);
}
});
$('.subcat' + objValue + ' .budgetsubtotal').val(sum.toFixed(2));
});
});
Open to other suggestions!