We Keep Coding

Javascript calculated field disappearing when being submitted to mysql

I have a Client Data Entry Form, it is quite large but works great. Except for one problem I added a script to calculate the total of up to 5 fields Max. The script works, it does the calculation and the total appears. When I submit the form the data isn't being submitted to mysql.
Here is the script:
<script>
var calculateForm = function () {
document.getElementById("total_paid").value = (Number(document.getElementById("amount1").value) + Number(document.getElementById("amount2").value) + Number(document.getElementById("amount3").value) + Number(document.getElementById("amount4").value) + Number(document.getElementById("amount5").value));
};
</script>
Here is part of the form:
<div class="rent_own_info">
<fieldset name="rent_own">
<legend>Rent / Own</legend>
<table><tbody>
<tr>
<td>Address</td>
<td>Postal Code</td>
<td>Months</td>
<td>Amount</td>
<td>Landlord / Township</td>
</tr>
<tr>
<td><input type="text" name="address1" id="address1"></td>
<td><input type="text" name="pcode1" id="pcode1" size="10"></td>
<td><input type="text" name="months1" id="months1" size="10"></td>
<td><input type="text" name="amount1" id="amount1" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid1" id="paid1"></td>
</tr>
<tr>
<td><input type="text" name="address2" id="address2"></td>
<td><input type="text" name="pcode2" id="pcode2" size="10"></td>
<td><input type="text" name="months2" id="months2" size="10"></td>
<td><input type="text" name="amount2" id="amount2" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid2" id="paid2"></td>
</tr>
<tr>
<td><input type="text" name="address3" id="address3"></td>
<td><input type="text" name="pcode3" id="pcode3" size="10"></td>
<td><input type="text" name="months3" size="10"></td>
<td><input type="text" name="amount3" id="amount3" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid3" id="paid3"></td>
</tr>
<tr>
<td><input type="text" name="address4" id="address4"></td>
<td><input type="text" name="pcode4" id="pcode4" size="10"></td>
<td><input type="text" name="months4" size="10"></td>
<td><input type="text" name="amount4" id="amount4" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid4" id="paid4"></td>
</tr>
<tr>
<td><input type="text" name="address5" id="address5"></td>
<td><input type="text" name="pcode5" id="pcode5" size="10"></td>
<td><input type="text" name="months5" size="10"></td>
<td><input type="text" name="amount5" id="amount5" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid5" id="paid5"></td>
</tr>
<tr>
<td><input type="hidden" name="" id=""></td>
<td><input type="hidden" name="" id="" size="10"></td>
<td><input type="text" name="" size="10" value="Total Paid"></td>
<td><input type="text" name="total_paid" id="total_paid" value="" size="10"></td>
<td><input type="hidden" name="" id=""></td>
</tr>
</tbody></table>
</fieldset>
</div>
I have checked the apache2 and the mysql logs and no errors.
Any help would be greatly appreciated.
Thanx ZZ

oninput to calculate total for multiple rows in html

i am trying to calculate the total price for each new item added. I have created an onchange function that will calculate the total price based on the quantity inputted by the user, so every time the user changes the quantity, the price changes. I have tried running my code however it doesn't seem to be calculating and displaying the total in its corresponding text box.
function getTotal($i){
var price = document.getElementById('priceper_'+$i+'').value;
var per_pack = document.getElementById('per_pack_'+$i+'').value;
var quantity = document.getElementById('quantity_'+$i+'').value;
document.getElementById('subtotal_'+$i+'').value = ((price/per_pack)*quantity);
}
<table>
<tr>
<td>Paper</td>
<td align="center">Price</td>
<td align="center">Per Pack</td>
<td align="center">Quantity</td>
<td align="center">Sub Total</td>
</tr>
<tr class="multipp">
<td><input type="text" name="description_0" id="description_" size="85" maxlength="70" value="<?php echo htmlspecialchars($description[0]); ?>" /></td>
<td><input type="text" name="priceper_0" id="priceper_" size="10" maxlength="9" value="" /></td>
<td><input type="text" name="per_pack_0" id="per_pack_" size="10" maxlength="9" value="" /></td>
<td><input type="text" name="quantity_0" id="quantity_0" size="10" maxlength="9" onChange="getTotal(<?php echo $i;?>);"/></td>
<td><input type="text" name="subtotal_0" id="subtotal_" size="15" maxlength="9" value="" /></td>
</tr>
<?php
for($i=1; $i<10; $i++)
{
echo '<tr class="multipp">';
echo '<td><input type="text" name="description_'.$i.'" id="description_'.$i.'" size="85" maxlength="70" value="'.htmlspecialchars($description[$i]).'" /></td>';
echo '<td><input type="text" name="priceper_'.$i.'" id="priceper_'.$i.'" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
echo '<td><input type="text" name="per_pack_'.$i.'" id="per_pack_'.$i.'" class="txt" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
echo '<td><input type="text" name="quantity_'.$i.'" id="quantity_'.$i.'" size="10" maxlength="9" onChange="getTotal('.$i.');" value="'.htmlspecialchars($quantity[$i]).'" />`</td>';
echo '<td><input type="text" name="subtotal_'.$i.'" id="subtotal_'.$i.'" size="15" maxlength="9" value="'.htmlspecialchars($subtotal[$i]).'" /></td>';
echo '</tr>';
}
?>
</table>

Something like this
function getTotal() {
var total = 0;
for (var i=0,n=document.querySelectorAll(".multipp").length; i<n;i++) {
var price = document.getElementById('priceper_'+i).value;
var per_pack = document.getElementById('per_pack_'+i).value;
var quantity = document.getElementById('quantity_'+i).value;
var subtotal = (price/per_pack)*quantity;
document.getElementById('subtotal_'+i).value=subtotal.toFixed(2);
total+=subtotal;
}
document.getElementById("total").value=total.toFixed(2);
}
window.onload=function() {
for (var i=0,n=document.querySelectorAll(".multipp").length; i<n;i++) {
document.getElementById('quantity_'+i).onkeyup=getTotal;
}
getTotal();
}
<table>
<tr>
<td>Paper</td>
<td align="center">Price</td>
<td align="center">Per Pack</td>
<td align="center">Quantity</td>
<td align="center">Sub Total</td>
</tr>
<!-- here you loop in your PHP from 0 to 9 if you want 10 fields -->
<tr class="multipp">
<td><input type="text" name="description_0" id="description_'" size="85" maxlength="70" value="desc 0" /></td>
<td><input type="text" name="priceper_0" id="priceper_0" size="10" maxlength="9" value="11" /></td>
<td><input type="text" name="per_pack_0" id="per_pack_0" size="10" maxlength="9" value="1" /></td>
<td><input type="text" name="quantity_0" id="quantity_0" size="10" maxlength="9" value="0"/></td>
<td><input type="text" name="subtotal_0" id="subtotal_0" size="15" maxlength="9" value="0.00" /></td>
</tr>
<tr class="multipp">
<td><input type="text" name="description_1" id="description_1" size="85" maxlength="70" value="desc 1" /></td>
<td><input type="text" name="priceper_1" id="priceper_1" size="10" maxlength="9" value="22" /></td>
<td><input type="text" name="per_pack_1" id="per_pack_1" size="10" maxlength="9" value="2" /></td>
<td><input type="text" name="quantity_1" id="quantity_1" size="10" maxlength="9" value="0"/></td>
<td><input type="text" name="subtotal_1" id="subtotal_1" size="15" maxlength="9" value="0.00" /></td>
</tr>
<tr><td colspan=4> </td><td><input type="text" id="total" value="0.00" />
</table>
The PHP:
<?php
for($i=0; $i<10; $i++)
{
echo '<tr class="multipp">';
echo '<td><input type="text" name="description_'.$i.'" id="description_'.$i.'" size="85" maxlength="70" value="'.htmlspecialchars($description[$i]).'" /></td>';
echo '<td><input type="text" name="priceper_'.$i.'" id="priceper_'.$i.'" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
echo '<td><input type="text" name="per_pack_'.$i.'" id="per_pack_'.$i.'" class="txt" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
echo '<td><input type="text" name="quantity_'.$i.'" id="quantity_'.$i.'" size="10" maxlength="9" value="'.htmlspecialchars($quantity[$i]).'" />`</td>';
echo '<td><input type="text" name="subtotal_'.$i.'" id="subtotal_'.$i.'" size="15" maxlength="9" value="'.htmlspecialchars($subtotal[$i]).'" /></td>';
echo '</tr>';
}
?>

Can we have a form_dropdown function embedded in javascript?

Hi I am using codeigniter. I need to have a form_dropdown embedded inside javascript.I have a table with a button add row.
When I click add I replicate the same row above. In my view page I have a javascript to add the dynamic table row.
Now I could not have a drop-down in it.I have a controller file where I pass a data that should be displayed as drop-down box.
My controller function:
class Admin_billing extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('billing_model');
if(!$this->session->userdata('is_logged_in')){
redirect('admin/login');
}
}
public function ticket($id)
{
$this->load->library('session');
$this->session->unset_userdata('client_detail');
$id=$this->uri->segment(4);
$data['id']=$this->uri->segment(4);
$data['employee']=$this->billing_model->emp_name();
$data['main_content'] = 'admin/billing/ticket_page';
$this->load->view('includes/template', $data);
}
}
My model function:
<?php
class billing_model extends CI_Model {
public function __construct()
{
$this->load->database();
}
public function emp_name()
{
$this->db->select('employee.first_name');
$this->db->from('employee');
$this->db->group_by('employee.id');
$query = $this->db->get();
return $query->result_array();
}
}
?>
Here I have a emp_name function to get the employee name from my database.
My view page:
<script>
function displayResult() {
var row = document.getElementById("test").insertRow(-1);
row.innerHTML = '<td>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[]" 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>';
}
</script>
<?php
$attributes = array('class' => 'form-horizontal', 'id' => '');
$options_employee = array('' => "Select");
foreach ($employee as $row)
{
$options_employee[$row['name']] = $row['name'];
}
?>
<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>
<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 is my view page in the above table My first field is a dropdown php code. This works for static row in my table.When I use javascript to add new row I could not get a dropdown.How to handle this?Can someone help me code?

First at all PHP is server side language. If you append to html your row only in javascript no php is executed.
You need use ajax for this. Solution with jQuery:
On server side (php) you need to prepare url (function) for serve a new row snipped data.
On buton onClick event trigger jQuery ajax http://api.jquery.com/jquery.ajax. Url param point to prepared url.
After ajax request is done you set response data as new row to your table.
$.ajax({
url: "DOMAIN/newRow",
})
.done(function(data) {
$('table#test tbody').append(data);
}
});
PHP (in your admin billing controller)
I am not verry familiar with cakePHP, so simple. You need write function which returns generated row html.
public function newRow()
{
$options_employee = 'prepare this variable here';
$dropdown = form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');
// Send data to browser (return is only for demonstration)
return '<tr><td>' . $dropdown . '</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></tr>';
}

sum all values for table column based on class and show in textbox

Here is a tutorial i followed for reference: http://viralpatel.net/blogs/2009/07/sum-html-textbox-values-using-jquery-javascript.html
Here is my javascript....
<script type="text/javascript">
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$("#btn").click(function(){
calculateSum();
$("#sum").show();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
</script>
This is my html code to show the sum value..
<table width="1177" border="1" cellspacing="5" id="add" class="add">
<tr>
<td width="71" height="42"><button class="add">Add Rows</button></td>
<td width="144"><div align="center"><strong>Product Name</strong></div></td>
<td width="146"><div align="center"><strong>Brand Name</strong></div></td>
<td width="146"><div align="center"><strong>Model No</strong></div></td>
<td width="146"><div align="center"><strong>Dealer Price</strong> (DP)</div></td>
<td width="146"><div align="center"><strong>Quantity (Q)</strong></div></td>
<td width="146"><div align="center"> <strong>Total Price</strong> (TP) </div>
<div align="center">
(TP = DP x Q)
</div>
</td>
<td width="153"><div align="center"><strong>Quality</strong></div></td>
<td><div align="center"><strong>Insert Image</strong></div></td>
</tr>
<tbody>
<tr class="prototype">
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="image"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="image"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="image"/></td>
</tr>
</tbody>
</table>
</div>
<table width="1206" border="0">
<tr>
<td width="905"> </td>
<td width="86"><input name="btn" type="submit" id="btn" value="Grand Total" /></td>
<td width="201"><input name="sum" type="text" id="sum"/></td>
</tr>
How to show this sum value in textbox after button click.
Please help...

try this with val() method I have edited the answer..
<script>
$(document).ready(function () {
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function () {
$("#btn").click(function () {
calculateSum();
$("#sum").show();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function () {
//add only if the value is number
if (!isNaN(this.value) && this.value.length> 0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").val(sum.toFixed(2));
}
</script>
here is the Fiddle

Okay, so I know this is the kind of answer that annoys people but...
Have you tried debuging javascript? It is possible to debug javascript code. For example using firebug: https://getfirebug.com/javascript . It might help.
Also, where are you assigning value of Sum to anything? Are you sure you did not want sum to be global variable (outside of any function)?

$('#idOfTextBox').val(sum.toFixed(2));

Jquery Sum by Group from Table/Input Data

I'm looking to Group my Table data and Sum by the group (like sum price by product). In a second Table.
I want group or filter by Item column, and sum the result of the Price column.
So Oranges (having two lines) should be one line with Sum price.
See this example below:
<table width="400" border="1">
<tr>
<td>Item</td>
<td>Location</td>
<td>Quantity</td>
<td>Price</td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Orange" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="3" /></td>
<td><input name="price" type="text" id="price" value="3.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item2" value="Apple" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="1" /></td>
<td><input name="price" type="text" id="price" value="1.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Orange" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="4" /></td>
<td><input name="price" type="text" id="price" value="4.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Grapes" /></td>
<td><input name="location" type="text" id="location" value="Vine" /></td>
<td><input name="quantity" type="text" id="quantity" value="10" /></td>
<td><input name="price" type="text" id="price" value="10.00" /></td>
</tr>
</table>
<p> </p>
<table width="400" border="1">
<tr>
<td>Orange</td>
<td>7</td>
<td>7.00</td>
</tr>
<tr>
<td>Apple</td>
<td>1</td>
<td>1.00</td>
</tr>
<tr>
<td>Grapes</td>
<td>10</td>
<td>10.00</td>
</tr>
</table>

First change id "price" to class, then
$(document).ready(function(){
var sum = 0;
$('.price').each(function(){
sum += $(this).val();
});
alert("The sum is " + sum);
});
You can modify above code to get sum in button click event too.