I want to do what I did in the snippet but as an array. What do I mean by this. Lets say a user wants to add another row to the example in the snippet. The code should run both and calculate the total from both rows. There can be new rows added that is why im saying im trying to do this as an array. I'm trying to do something like excel does with cells that add the data depending on the change of a cell but in a much simpler manner just addition and only specified cells.
How would I do this?
this is the code that I have that I want to add this functionality to:
index.php
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<br />
<div class="table-responsive">
<div id="live_data"></div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
function fetch_data()
{
$.ajax({
url:"select.php",
method:"POST",
success:function(data){
$('#live_data').html(data);
}
});
}
fetch_data();
$(document).on('click', '#btn_add', function(){
/* this function would also add the prices to the table*/
var first_name = $('#first_name').text();
var last_name = $('#last_name').text();
if(first_name == '')
{
alert("Enter First Name");
return false;
}
if(last_name == '')
{
alert("Enter Last Name");
return false;
}
$.ajax({
url:"insert.php",
method:"POST",
data:{first_name:first_name, last_name:last_name},
dataType:"text",
success:function(data)
{
alert(data);
fetch_data();
}
})
});
});
</script>
select.php
<?php
$connect = mysqli_connect("localhost", "root", "", "test_db");
$output = '';
$sql = "SELECT * FROM tbl_sample ORDER BY id DESC";
$result = mysqli_query($connect, $sql);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th width="10%">Id</th>
<th width="40%">First Name</th>
<th width="40%">Last Name</th>
<th width="10%">Delete</th>
</tr>';
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'.$row["id"].'</td>
<td class="first_name" data-id1="'.$row["id"].'" contenteditable>'.$row["first_name"].'</td>
<td class="last_name" data-id2="'.$row["id"].'" contenteditable>'.$row["last_name"].'</td>
<td><button type="button" name="delete_btn" data-id3="'.$row["id"].'" class="btn btn-xs btn-danger btn_delete">x</button></td>
</tr>
';
}
$output .= '
<tr>
<td></td>
<td id="first_name" contenteditable></td>
<td id="last_name" contenteditable></td>
<td><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button></td>
</tr>
';
}
else
{
$output .= '<tr>
<td colspan="4">Data not Found</td>
</tr>';
}
$output .= '</table>
</div>';
echo $output;
?>
$(document).ready(function() {
// functions assigned to onchange properties
document.getElementById('price').onchange = function() {
// access form and value properties via this (keyword)
var form = this.form;
var total = parseFloat(this.value) + parseFloat(form.elements['aditional_price'].value);
form.elements['total'].value = formatDecimal(total);
};
document.getElementById('aditional_price').onchange = function() {
// access form and value properties via this (keyword)
var form = this.form;
var total = parseFloat(this.value) + parseFloat(form.elements['price'].value);
form.elements['total'].value = formatDecimal(total);
};
// format val to n number of decimal places
function formatDecimal(val, n) {
n = n || 2;
var str = "" + Math.round(parseFloat(val) * Math.pow(10, n));
while (str.length <= n) {
str = "0" + str;
}
var pt = str.length - n;
return str.slice(0, pt) + "." + str.slice(pt);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post" id="form1" class="form1" name="form1">
<fieldset>
<p>
Price
<input name="price" id="price" size="4" value="0" />+ Aditional Price
<input name="aditional_price" id="aditional_price" value="0" size="4" />
<br/>
<!-- new row added
<br/>
Price
<input name="price" id="price" size="4" value="0" />+ Aditional Price
<input name="aditional_price" id="aditional_price" value="0" size="4"/>
<br/>
-->
<br/>
<label>Total: $
<input type="text" class="num" name="total" value="0.00" readonly="readonly" />
</label>
</p>
</fieldset>
</form></div>
