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.
Related
This question already has answers here:
JavaScript and getElementById for multiple elements with the same ID
(13 answers)
Closed 1 year ago.
I have a JavaScript function, that uses the id on
3 textboxes to get their numerical values, add all of them together and give me the result on the last textbox. I am also getting a list of people on my DB and I am using Foreach row to get all names and then create the 4 textboxes that the user can input the values and get the result. The problem is that I can only get the first row to show the result, the rest doesn't show.
<tbody>
<?php
if ($accao_formandos->num_rows()>0){
foreach ($accao_formandos->result() as $row){
?>
<tr>
<td>
<input type="text" class="form-control" name="formandos" id="formandos" onkeyup="sum();" data-fieldgroup="fg-formandos" data-error-msg="" value="<?php echo $row->nome; ?>" readonly>
</td>
<td>
<input type="text" class="form-control" name="n_faltas" id="n_faltas" onkeyup="sum();" data-fieldgroup="fg-n_faltas" data-error-msg="" value="<?php //echo $n_faltas; ?>">
</td>
<td>
<input type="text" class="form-control" name="assiduidade" id="assiduidade" onkeyup="sum();" data-fieldgroup="fg-assiduidade" data-error-msg="" value="<?php //echo $pauta_assiduidade; ?>">
</td>
<td>
<input type="text" class="form-control" name="participacao_tarefas" id="participacao_tarefas" onkeyup="sum();" data-fieldgroup="fg-participacao_tarefas" data-error-msg="" value="<?php //echo $pauta_participacao_tarefas; ?>">
</td>
<td>
<input type="text" class="form-control" name="elaboracao_trabalho" id="elaboracao_trabalho" onkeyup="sum();" data-fieldgroup="fg-elaboracao_trabalho" data-error-msg="" value="<?php //echo $pauta_elaboracao_trabalho; ?>">
</td>
<td>
<input type="text" class="form-control" name="classificacao_quant" id="classificacao_quant" data-fieldgroup="fg-classificacao_quant" data-error-msg="" value="" readonly>
</td>
</tr>
<?php
}
}
?>
</tbody>
function sum(result) {
var assiduidade = document.getElementById('assiduidade').value;
var participacao_tarefas = document.getElementById('participacao_tarefas').value;
var elaboracao_trabalho = document.getElementById('elaboracao_trabalho').value;
var result = (parseInt(assiduidade)*10 + parseInt(participacao_tarefas)*30 + parseInt(elaboracao_trabalho)*60) / 100;
if (!isNaN(result)) {
document.getElementById('classificacao_quant').value = result;
}
}
JavaScript function is getting called at the end of body maybe that helps.
I read here on another post, that document.querySelector doesn't work because it gets the first element, but I am using getElementByid but its probably that. If someone can help out, I would appreciate it
Thanks for all the help in advance.
You can almost always dispense with ID attributes, especially when you involve loops and generating content. querySelector and querySelectorAll when used in conjunction with other selector functions (parentNode,nextSibling etc) allow for easy identification of elements so you can also dispense with the old fashioned inline event handlers and assign an external event listener to all elements as per the below code snippet.
The snippet uses dummy data for the name and various fields believed to be numeric in nature
document.querySelectorAll('tr input:not([data-result])').forEach(input => {
input.addEventListener('keyup', function(e) {
let tr = this.parentNode.parentNode;
let ass = tr.querySelector('input[name="assiduidade"]');
let par = tr.querySelector('input[name="participacao_tarefas"]');
let ela = tr.querySelector('input[name="elaboracao_trabalho"]');
let res = tr.querySelector('input[data-result]');
let result = ( (Number(ass.value) * 10) + (Number(par.value) * 30) + (ela.value * 60) ) / 100;
if (!isNaN(result) ) res.value = result;
})
})
[type='text']{width:80px;}
<table>
<tr>
<td>
<input type="text" class="form-control" name="formandos" data-fieldgroup="fg-formandos" data-error-msg="" value="Fred" readonly />
</td>
<td>
<input type="text" class="form-control" name="n_faltas" data-fieldgroup="fg-n_faltas" data-error-msg="" value="" />
</td>
<td>
<input type="text" class="form-control" name="assiduidade" data-fieldgroup="fg-assiduidade" data-error-msg="" value="23" />
</td>
<td>
<input type="text" class="form-control" name="participacao_tarefas" data-fieldgroup="fg-participacao_tarefas" data-error-msg="" value="64" />
</td>
<td>
<input type="text" class="form-control" name="elaboracao_trabalho" data-fieldgroup="fg-elaboracao_trabalho" data-error-msg="" value="41" />
</td>
<td>
<input type="text" class="form-control" name="classificacao_quant" data-result=true data-fieldgroup="fg-classificacao_quant" data-error-msg="" value="" readonly />
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" name="formandos" data-fieldgroup="fg-formandos" data-error-msg="" value="Barny" readonly />
</td>
<td>
<input type="text" class="form-control" name="n_faltas" data-fieldgroup="fg-n_faltas" data-error-msg="" value="" />
</td>
<td>
<input type="text" class="form-control" name="assiduidade" data-fieldgroup="fg-assiduidade" data-error-msg="" value="68" />
</td>
<td>
<input type="text" class="form-control" name="participacao_tarefas" data-fieldgroup="fg-participacao_tarefas" data-error-msg="" value="21" />
</td>
<td>
<input type="text" class="form-control" name="elaboracao_trabalho" data-fieldgroup="fg-elaboracao_trabalho" data-error-msg="" value="88" />
</td>
<td>
<input type="text" class="form-control" name="classificacao_quant" data-result=true data-fieldgroup="fg-classificacao_quant" data-error-msg="" value="" readonly />
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" name="formandos" data-fieldgroup="fg-formandos" data-error-msg="" value="Betty" readonly />
</td>
<td>
<input type="text" class="form-control" name="n_faltas" data-fieldgroup="fg-n_faltas" data-error-msg="" value="" />
</td>
<td>
<input type="text" class="form-control" name="assiduidade" data-fieldgroup="fg-assiduidade" data-error-msg="" value="88" />
</td>
<td>
<input type="text" class="form-control" name="participacao_tarefas" data-fieldgroup="fg-participacao_tarefas" data-error-msg="" value="14" />
</td>
<td>
<input type="text" class="form-control" name="elaboracao_trabalho" data-fieldgroup="fg-elaboracao_trabalho" data-error-msg="" value="57" />
</td>
<td>
<input type="text" class="form-control" name="classificacao_quant" data-result=true data-fieldgroup="fg-classificacao_quant" data-error-msg="" value="" readonly />
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" name="formandos" data-fieldgroup="fg-formandos" data-error-msg="" value="Wilma" readonly />
</td>
<td>
<input type="text" class="form-control" name="n_faltas" data-fieldgroup="fg-n_faltas" data-error-msg="" value="" />
</td>
<td>
<input type="text" class="form-control" name="assiduidade" data-fieldgroup="fg-assiduidade" data-error-msg="" value="8" />
</td>
<td>
<input type="text" class="form-control" name="participacao_tarefas" data-fieldgroup="fg-participacao_tarefas" data-error-msg="" value="12" />
</td>
<td>
<input type="text" class="form-control" name="elaboracao_trabalho" data-fieldgroup="fg-elaboracao_trabalho" data-error-msg="" value="88" />
</td>
<td>
<input type="text" class="form-control" name="classificacao_quant" data-result=true data-fieldgroup="fg-classificacao_quant" data-error-msg="" value="" readonly />
</td>
</tr>
</table>
Your HTML is technically invalid. An ID is only allowed to be used once. Try something like this:
Change your loop to foreach ($accao_formandos->result() as $key => $row) to get a unique key for each row.
Change your inputs to look like id="assiduidade<?= $key ?>" onkeyup="sum(<?= $key ?>);" so that they all have a unique ID, and pass the key to your function.
Prototype for your function should become function sum(key) (you never previously passed in a parameter to it, so the "result" in there isn't doing anything).
And finally change every element reference to include the key, like getElementById('assiduidade' + key).
This is my form which is inside a foreach loop
I want to display the product of two input which is the "qty" and "uprice"
but the only result I get is the first row I inputed.
Form
<tbody>
<?php foreach($_POST['porder'] as $porder): ?>
<tr>
<td>
<input type="text" id="itemnum" name="itemnum" max=999 class="form-control form-control-line">
</td>
<td>
<?php echo $porder ; ?>
</td>
<td>
<input style="text-transform:uppercase" type="text" id="rev" name="rev" class="form-control form-control-line" required>
</td>
<td>
<input style="text-transform:uppercase" type="text" id="desc" name="desc" class="form-control form-control-line" required>
</td>
<td>
<input type="number" id="qty<?=$porder?>" name="qty[]" min="1" class="form-control form-control-line" onkeyup="compute('<?=$porder?>')" required>
</td>
<td>
<input type="number" id="uprice<?=$porder?>" name="uprice[]" min="1" class="form-control form-control-line" onkeyup="compute('<?=$porder?>')" required>
</td>
<td>
<input type="number" id="amount<?=$porder?>" name="amount[]" onkeyup="stotal('<?=$porder?>')" class="form-control form-control-line" >
</td>
</tr>
<?php endforeach ?>
<tr>
<td colspan="5" ></td>
<td><strong>Total
</td>
<td>
<input type="number" id="total" name="total" class="form-control">
</td>
</tr>
Java Script
<script>
function compute() {
var txtFirstNumberValue = document.getElementById('qty').value;
var txtSecondNumberValue = document.getElementById('uprice').value;
var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
document.getElementById('amount').value = result;
}
}
</script>
Total
this is the code I use to compute the total amount but it didn't show the result.
var amount = document.getElementsByName('amount[]').value;
var sum = 0;
for (var i = 0; i <amount.length; i++) {
var input_value=amount[i];
sum +=parseInt(input_value.value);
document.getElementById('total').value = sum;
}
</script>
Change your code to below this code. You will get the correct result. '$product_id' means your product id from your database table. that is auto incremented.
Form
<tbody>
<?php foreach($_POST['porder'] as $porder): ?>
<tr>
<td>
<input type="text" id="itemnum" name="itemnum" max=999 class="form-control form-control-line">
</td>
<td>
<?php echo $porder ; ?>
</td>
<td>
<input style="text-transform:uppercase" type="text" id="rev" name="rev" class="form-control form-control-line" required>
</td>
<td>
<input style="text-transform:uppercase" type="text" id="desc" name="desc" class="form-control form-control-line" required>
</td>
<td>
<input type="number" id="qty<?=$product_id?>" name="qty" min="1" class="form-control form-control-line" onkeyup="compute(<?=$product_id?>)" required>
</td>
<td>
<input type="number" id="uprice<?=$product_id?>" name="uprice" min="1" class="form-control form-control-line" onkeyup="compute(<?=$product_id?>)" required>
</td>
<td>
<output type="number" id="amount<?=$product_id?>" name="amount" class="form-control form-control-line" >
</td>
</tr>
<?php endforeach ?>
Javascript Code
<script>
function compute(id) {
var txtFirstNumberValue = document.getElementById('qty'+id).value;
var txtSecondNumberValue = document.getElementById('uprice'+id).value;
var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
document.getElementById('amount'+id).value = result;
}
}
</script>
var qty = document.getElementsByName('qty[]');
for (var i = 0; i <qty.length; i++) {
var input_value=qty[i];
alert("First Index of Array : qty["+i+"].value= "+input_value.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="qty[]" id="qty1" type="number" value="1">
<input name="qty[]" id="qty2" type="number" value="3" >
<input name="qty[]" id="qty3" type="number" value="4" >
var qty = document.getElementsByName('qty[]');
var sum = 0;
for (var i = 0; i <qty.length; i++) {
var input_value=qty[i];
alert("First Index of Array : qty["+i+"].value= "+input_value.value);
sum +=parseInt(input_value.value);
}
alert("Sum is "+sum);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="qty[]" id="qty1" type="number" value="1">
<input name="qty[]" id="qty2" type="number" value="3" >
<input name="qty[]" id="qty3" type="number" value="4" >
It will fix your problem. Change the value of input, you will get the result.
function calc(){
var qty = document.getElementsByName('qty[]');
var sum = 0;
for (var i = 0; i <qty.length; i++) {
var input_value=qty[i];
// alert("First Index of Array : qty["+i+"].value= "+input_value.value);
var signle_value_input = input_value.value;
if(signle_value_input.length!=0)
sum +=parseInt(input_value.value);
}
$("#sum").html("Sum is "+sum);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sum"></div>
<input name="qty[]" id="qty1" type="number" value="" onkeyup="calc()">
<input name="qty[]" id="qty2" type="number" value="" onkeyup="calc()">
<input name="qty[]" id="qty3" type="number" value="" onkeyup="calc()" >
Well i have generate buttons. Their function are the same which is when i clicked it , it will do the calculations. the problem is when i clicked the second generate button, it will do the calculations for the first one and same goes to third button and so on. what i want is, each generate button will only do calculation for their own job. Can anyone help me ?
my generate button
And below is the code :
<tr>
<td></td>
<td></td>
<td style="font-family:centruy-gothic"<strong><font color = "black">
<?echo $listb['task_name'];?>
<input type="hidden" name="pc_id[]" value="<? echo $pc_id;?>" >
<input type="hidden" name="ps_id[]" value="<? echo $ps_id;?>" >
</font></strong></td>
<td align="center" style="font-family:century gothic"><input type="text" id ="task_mark" class="input-medium" name="task_mark[]" value="<? echo $listb['task_mark'];?>" onchange="getDate()"/></td>
<td align="center" style="font-family:century gothic"><input type="text" id="marking" class="input-medium" name="marking[]" value="<? echo $listb['marking'];?>"onchange="getDate()"/></td>
<td align="center" style="font-family:century gothic"><input type="text" id="destination_marking" class="input-medium" name="destination_marking[]" value="<? echo $listb['destination_marking'];?>"onchange="getDate()"/></td>
<td align="center" style="font-family:century gothic"><input type="text" id="days" class="input-medium" name="days[]" value="<? echo $listb['days'];?>"onchange="getDate()"/></td>
<td align="center" style="font-family:century gothic"><input type="text" id="duration" class="input-medium" name="duration[]" value="<? echo $listb['duration'];?>" onchange="calc()"/></td>
<td align="center" style="font-family:century gothic"><input type="text" id="start_date" class="input-long" name="start_date[]" value="<? echo $listb['start_date'];?>" class="date demo" onchange="getDate()" ></td>
<td align="center" style="font-family:century gothic"><input type="text" id="end_date" class="input-long" name="end_date[]" value="<? echo $listb['end_date'];?>" class="date demo" onchange="getDate()"></td>
<td align="center" ><input class="submit-green" id="end_date" type="button" name="end_date[]" value="GENERATE" onclick="getDate()"></td>
</tr>
And here's the script
<script>
function getDate()
{
var sd = document.getElementById('start_date').value;
var dura = document.getElementById('duration').value;
var m = document.getElementById('marking').value;
var date = new Date(sd);
var newdate = new Date (date);
var durations = parseInt(dura);
var markings = parseInt(m);
if (markings === 1)
{
newdate.setDate(newdate.getDate());
}
else if (markings === 2)
{
newdate.setDate(newdate.getDate() + durations);
}
else if (markings === 3)
{
newdate.setDate((newdate.getDate() + durations) + 1 );
}
var dd = newdate.getDate();
var mm = newdate.getMonth()+1;
var y = newdate.getFullYear();
var someFormattedDate = y + '-' + mm +'-' + dd;
document.getElementById('end_date').value = someFormattedDate;
}
</script>
You can give a parameter in the html code modifying the onchange="getDate()" like this:
<td align="center" style="font-family:century gothic"><input type="text" id ="task_mark" class="input-medium" name="task_mark[]" value="<? echo $listb['task_mark'];?>" onchange="getDate(1)"/></td>
<td align="center" style="font-family:century gothic"><input type="text" id="marking" class="input-medium" name="marking[]" value="<? echo $listb['marking'];?>"onchange="getDate(2)"/></td>
<td align="center" style="font-family:century gothic"><input type="text" id="destination_marking" class="input-medium" name="destination_marking[]" value="<? echo $listb['destination_marking'];?>"onchange="getDate(3)"/></td>
<td align="center" style="font-family:century gothic"><input type="text" id="days" class="input-medium" name="days[]" value="<? echo $listb['days'];?>"onchange="getDate(4)"/></td>
<td align="center" style="font-family:century gothic"><input type="text" id="duration" class="input-medium" name="duration[]" value="<? echo $listb['duration'];?>" onchange="calc()"/></td>
<td align="center" style="font-family:century gothic"><input type="text" id="start_date" class="input-long" name="start_date[]" value="<? echo $listb['start_date'];?>" class="date demo" onchange="getDate(5)" ></td>
<td align="center" style="font-family:century gothic"><input type="text" id="end_date" class="input-long" name="end_date[]" value="<? echo $listb['end_date'];?>" class="date demo" onchange="getDate(6)"></td>
<td align="center" ><input class="submit-green" id="end_date" type="button" name="end_date[]" value="GENERATE" onclick="getDate(7)"></td>
Then, in the script you get the parameter to do different things:
<script>
function getDate(param)
{
And now you now wich of the button he checked
I assume you have a foreach before your table rows.
In this case u have several times the same id for each input field.
Try to make the id's unique. Something like this:
<input type="text" id ="task_mark_row1">
//next table row:
<input type="text" id ="task_mark_row2">
...
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..
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!