Add tax to grandtotal based on checkbox with javascript php - javascript

I have a transaction form that could use tax or no tax if the transaction use tax than the user click the checkbox and it will give a value to taxes textbox (besides the checkbox)
And calculate/sum subtotal + taxes = grandtotal
the tax is fix 10% of subtotal
here is my code
<?php
$con = mysqli_connect('localhost', 'root', '', 'a.karat');
if(isset($_POST['product_id']))
{
$prno=$_POST['prno'];
$i=1;
$sql = mysqli_query($con,"select * from detail_pr where prNo='$prno'");
while ($r = mysqli_fetch_array($sql)) {
echo
'<tr>
<td><input type="checkbox" name="check[]" id="check'.$i.'" value="'.$i.'"></td>
<td><label for="productCode"></label>
<input type="text" name="productCode'.$i.'" id="productCode'.$i.'" readonly value="'.$r["productCode"].'" size="12" ></td>
<td><label for="productName"></label>
<input type="text" name="productName'.$i.'" id="productName'.$i.'" readonly value="'.$r["productName"].'"size="35" ></td>
<td><label for="qty"></label>
<input type="number" onkeyup="calc(this);" name="qty'.$i.'" id="qty'.$i.'" readonly value="'.$r["qty"].'" size="10" ></td>
<td><input type="number" onkeyup="calc(this);" name="price'.$i.'" id="price'.$i.'" size="10" min="1" max="99" onchange="calc(this);" ></td>
<td><input type="number" onkeyup="calc(this);" name="discount'.$i.'" id="discount'.$i.'" size="10" min="0" max="99" onchange="calc(this);"></td>
<td><input type="number" name="total'.$i.'" id="total'.$i.'" size="15" min="1" max="99" onchange="calc(this);" ></td>
</tr>';
$i++;
}
}
?>
<form name="form1" id="form1 >
<table width="400" border="0" align="right">
<tr>
<th scope="row">Sub Total</th>
<td>:</td>
<td><input name="subtotal" id="subtotal" type="text" onFocus="startCalc();" onBlur="stopCalc();"></td>
</tr>
<tr>
<th scope="row">tax 10% <input name="tax" id="tax" type="checkbox" value="10" ></th>
<td>:</td>
<td><input name="taxes" id="tax1" type="taxes"></td>
</tr>
<tr>
<th scope="row">Grand Total</th>
<td>:</td>
<td><input name="grandtotal" id="grandtotal" type="text"></td>
</tr>
</table>
</form>
<script>
function calc(id) {
var row = id.parentNode.parentNode;
var quant = row.cells[3].getElementsByTagName('input')[0].value;
var price = row.cells[4].getElementsByTagName('input')[0].value;
var disc = row.cells[5].getElementsByTagName('input')[0].value;
if (disc == null || disc == '') {
res = parseFloat(quant) * parseFloat(price);
} else {
var res = (parseFloat(quant) * parseFloat(price)) - (parseFloat(quant) * parseFloat(price) * (parseFloat(disc) / 100));
}
row.cells[6].getElementsByTagName('input')[0].value = res;
}
</script>
<script>
document.querySelector('#form1').addEventListener('change', function( event ) {
if (event.target.id && event.target.id !== 'subtotal') {
var allTotals = document.querySelectorAll('input[name^="total"]'),
allTotalSum = 0;
Array.prototype.forEach.call(allTotals, function( element ) {
if (element.value) { allTotalSum += parseFloat(element.value); }
});
document.querySelector('#subtotal').value = allTotalSum;
}
});
how to calculate subtotal + taxes = grandtotal?

thanks for the respond
i finally found my answer
<script>
var tax = document.getElementsByName('tax')[0];
var taxes = document.getElementsByName('taxes')[0];
var subtotal = document.getElementsByName('subtotal')[0];
var grandtotal = document.getElementsByName('grandtotal')[0];
function updateInput() {
taxes.value = subtotal.value * (tax.value / 100);
var sum = (parseInt(subtotal.value) + parseInt(taxes.value)) ;
grandtotal.value = sum.toFixed(0);
}
subtotal.addEventListener('change', updateInput);
tax.addEventListener('change', updateInput);
taxes.addEventListener('change', updateInput);
taxes.addEventListener('keyup', updateInput);
</script>

Related

How to adjust this number input field's format to either USD (period as separator) or COP (comma as separator) dynamically in JS?

The table has an input field, which, depending on the currency passed, it's supposed to have either a comma or a period as decimal separator.
I have tried setting it initally to either lang="es" or lang="en", but it doesn't change.
I'd appreciate a little help!
function add_to_total(el, currency) {
currency = 'es'
let rowTotal = 0;
let currencyFormat = currency == 'en' ? Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
}) : Intl.NumberFormat("es-CO", {
style: "currency",
currency: "COP",
})
if (el) {
let parent = $(el).closest('tr'),
price = parent.find('.price').val(),
qty = parent.find('.qty').val();
if (price == '' || qty == '') {
alert('Please make sure that the price and metros are informed correctly.');
return;
}
rowTotal = (qty * price).toFixed(2);
parent.find('.total_price').html(currencyFormat.format(rowTotal));
} else {
$("#tableRows tr").each(function() {
price = parseFloat($(this).find('.qty').val());
qty = parseFloat($(this).find('.price').val());
if (price && qty) {
rowTotal = (price * qty).toFixed(2);
$(this).find('.total_price').text(currencyFormat.format(rowTotal));
}
});
}
var gridTotal = 0;
$(".total_price").each(function(index, item) {
var val = parseFloat($(this).html().replace(/[$,]/g, ''));
if (isNaN(val)) val = 0;
gridTotal += val;
});
$('.total').html(currencyFormat.format(gridTotal.toFixed(2)));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover table-vcenter" id="dtable">
<thead>
<tr>
<th style="width:7%">Precio/m (USD)</th>
<th style="width:8%">Metros (m)</th>
<th style="width:10%">Precio Total sin IVA (COP)</th>
</tr>
</thead>
<tbody id="tableRows">
<tr>
<td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="" onchange="add_to_total(this);"></td>
<td><input type="number" min="0" class="qty" name="numberInputs" value="0" onchange="add_to_total(this);'=""></td>
<td class=" total_price"><strong>0.00</strong></td>
</tr>
<tr>
<td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="" onchange="add_to_total(this);"></td>
<td><input type="number" min="0" class="qty" name="numberInputs" value="0" onchange="add_to_total(this)"></td>
<td class="total_price"><strong>0.00</strong></td>
</tr>
</tbody>
<tbody>
<tr>
<td id="totalTitle" colspan="8" align="right"><strong>Total:</strong></td>
<td id="totalValue" class="total">0.00</td>
</tr>
</tbody>
</table>

Trigger a table by entering the value of another table

I am trying to trigger the calculation of a table by entering the value of another table. there are two table, first one has input tab called profit_rate and the other one supposed to do a calculation as cost * currency_rate * profit_rate(in the other table), however, it doesn't work when I entering profit_rate.
JavaScript
<script>
window.onload = function() {
$(".update_row_data").change(function() {
var auto_array = {};
action = $(this).closest('tr').data('action');
form_data = $(this).closest('tr').find('input, select');
var profitRate = Number($("#profit_rate").val());
var myArray = $.map(form_data, function(element) {
auto_array[element.name] = element.value, profitRate;
});
console.log(myArray);
var pprice = $(this).closest('tr').find('.pprice');
pprice_val = Math.round(auto_array['cost'] * profitRate * auto_array['currency_rate'];
if(!isNaN(pprice_val) && pprice_val != 'Infinity') {
pprice.val(pprice_val);
}
form_data = $(this).closest('tr').find('input,select').serialize();
$.ajax({
data: {
action: action,
form_data: form_data,
},
url: 'update.php',
type: 'post',
beforeSend: function() {
},
success: function(data) {
if(data == 1){
}
}
});
});
};
</script>
html code
<table>
<tr><td>
<input name="profit_rate" size="3" style="border-style:none" type="text" class="update_row_data profit_rate" id="profit_rate" value="<?php echo $res['profit_rate'];?>">
</td></tr></table>
<table>
<tr data-action="update_price" data-row-id="<?php echo $res['id'];?>">
<td><input name="cost" type="text" class="update_row_data cost" id="cost" value="<?php echo $res["cost"];?>"></td>
<td><input name="currency_rate" type="text" class="update_row_data currency_rate" id="currency_rate" value="<?php echo $res["cost"];?>"></td>
<td><input name="pprice" size="5" readonly="readonly" type="text" class="update_row_data pprice" value="<?php echo $res["pprice"] ;?>"></td></tr></table>
You need to get next table to get all inputs inside tr .In below code i have use each loop to iterate over trs then get required input value and calcuate them and add them to json-array.
Demo Code :
var auto_array;
$(".profit_rate").change(function() {
var myArray = []
//find closest table->next table
var elem = $(this).closest('table').next('table');
var action = elem.find('tr').data('action');
console.log(action)
var profitRate = Number($("#profit_rate").val());
//looping
elem.find('tr').each(function() {
//get cost
var cost = $(this).find('input[name=cost]').val();
//get curency rate
var currecy_rate = $(this).find('input[name=currency_rate]').val();
//calculate profit
var profit_total = Math.round(cost * profitRate * currecy_rate)
$(this).find('input[name=pprice]').val(profit_total)
//add to json object
auto_array = {};
auto_array["cost"] = cost;
auto_array["currecy_rate"] = currecy_rate;
auto_array["pprice"] = profit_total;
myArray.push(auto_array) //push to array
});
console.log(myArray)
//your ajax call
});
//on change of cost
$(".cost").change(function() {
var cost = $(this).val();// that value
var currecy_rate = $(this).closest('tr').find(".currency_rate").val();
var profitRate = Number($("#profit_rate").val());
var profit_total = Math.round(cost * currecy_rate * profitRate); $(this).closest('tr').find('input[name=pprice]').val(profit_total)
});
//onchange of currecncy value
$(".currency_rate").change(function() {
var currency_rate = $(this).val();
var cost = $(this).closest('tr').find(".cost").val();
var profitRate = Number($("#profit_rate").val());
var profit_total = Math.round(cost * currency_rate * profitRate); $(this).closest('tr').find('input[name=pprice]').val(profit_total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input name="profit_rate" size="3" style="" type="text" class="update_row_data profit_rate" id="profit_rate" value="">
</td>
</tr>
</table>
<table>
<tr data-action="update_price" data-row-id="<?php echo $res['id'];?>">
<td><input name="cost" type="text" class="update_row_data cost" id="cost" value="25"></td>
<td><input name="currency_rate" type="text" class="update_row_data currency_rate" id="currency_rate" value="25"></td>
<td><input name="pprice" size="5" readonly="readonly" type="text" class="update_row_data pprice" value="12"></td>
</tr>
<tr data-action="update_price" data-row-id="<?php echo $res['id'];?>">
<td><input name="cost" type="text" class="update_row_data cost" id="cost" value="20"></td>
<td><input name="currency_rate" type="text" class="update_row_data currency_rate" id="currency_rate" value="20"></td>
<td><input name="pprice" size="5" readonly="readonly" type="text" class="update_row_data pprice" value="12"></td>
</tr>
</table>

Javascript form not returning a result when submit button is pressed

I am building a mortgage calculator in Javascript. When the submit button is pressed nothing happens. I appear to have no errors in my HTML or Javascript.
function computeLoan() {
var amount = document.getElementById('amount').value;
var interest_rate =
document.getElementById('interest_rate').value;
var months = document.getElementById('months').value;
var interest = (amount * (interest_rate * .01)) / months;
var taxes = document.getElementById('taxes').value;
var insurance = document.getElementById('insurance').value;
var escrow = (taxes + insurance) / 12;
var loanPayment = amount * interest * (Math.pow(1 + interest,
months)) / (Math.pow(1 + interest, months) - 1);
var monthlyPayment = loanPayment + escrow;
monthlyPayment.toFixed(2);
monthlyPayment = document.getElementById('payment').value;
}
<form onsubmit="return computeLoan()" method="POST" action="javascript:;">
<table>
<tr>
<td class="labels">Loan Amount</td>
<td class="textbox"><input type="text" id="amount" min="1" max="10000000" onchange="computeLoan()"></td>
</tr>
<tr>
<td class="labels">Mortgage Period (months)</td>
<td class="textbox"><input type="text" id="months" min="1" max="360" onchange="computeLoan()"></td>
</tr>
<tr>
<td class="labels">Interest Rate</td>
<td class="textbox"><input type="text" id="interest_rate" min="0" max="100" onchange="computeLoan()"></td>
</tr>
<tr>
<td class="labels">Property Taxes</td>
<td class="textbox"><input type="text" id="taxes" min="0" max="10000" onchange="computeLoan()"></td>
</tr>
<tr>
<td class="labels">Homeowners Insurance</td>
<td class="textbox"><input type="text" id="insurance" min="0" max="10000" onchange="computeLoan()"></td>
</tr>
<tr>
<td class="labels">Monthly Payment</td>
<td class="textbox"><input type="number" id="payment" name="payment"></td>
</tr>
<tr>
<td class="button"><input type="submit" id="calculate" name="calculate" onclick="computeLoan()"></td>
<td class="button"><input type="reset" name="Reset"></td>
</tr>
</table>
</form>
I expect the textbox for Monthly Payment to populate but nothing happens.
In the computeLoan function, the last line you assign the value of your calculated field #payment (which is an empty string at this point) to the value that you just calculated before.
What you want to do is assign the calculated value monthlyPayment to the value property of the input#payment element.
So revert the assignment in the last line
monthlyPayment = document.getElementById('payment').value;
should become
document.getElementById('payment').value = monthlyPayment;
Additionally you are also executing the function multiple times.
The onsubmit of the form executes the function
The onclick of the submit button executes the function
Considering the action of the form you are not submitting the form, so you could reduce the code to
function computeLoan() {
var amount = document.getElementById('amount').value;
var interest_rate =
document.getElementById('interest_rate').value;
var months = document.getElementById('months').value;
var interest = (amount * (interest_rate * .01)) / months;
var taxes = document.getElementById('taxes').value;
var insurance = document.getElementById('insurance').value;
var escrow = (taxes + insurance) / 12;
var loanPayment = amount * interest * (Math.pow(1 + interest,
months)) / (Math.pow(1 + interest, months) - 1);
var monthlyPayment = loanPayment + escrow;
monthlyPayment.toFixed(2);
document.getElementById('payment').value = monthlyPayment;
}
<form onsubmit="return false;">
<table>
<tr>
<td class="labels">Loan Amount</td>
<td class="textbox">
<input type="text" id="amount" min="1" max="10000000" onchange="computeLoan()">
</td>
</tr>
<tr>
<td class="labels">Mortgage Period (months)</td>
<td class="textbox">
<input type="text" id="months" min="1" max="360" onchange="computeLoan()">
</td>
</tr>
<tr>
<td class="labels">Interest Rate</td>
<td class="textbox">
<input type="text" id="interest_rate" min="0" max="100" onchange="computeLoan()">
</td>
</tr>
<tr>
<td class="labels">Property Taxes</td>
<td class="textbox">
<input type="text" id="taxes" min="0" max="10000" onchange="computeLoan()">
</td>
</tr>
<tr>
<td class="labels">Homeowners Insurance</td>
<td class="textbox">
<input type="text" id="insurance" min="0" max="10000" onchange="computeLoan()">
</td>
</tr>
<tr>
<td class="labels">Monthly Payment</td>
<td class="textbox">
<input type="number" id="payment" name="payment">
</td>
</tr>
<tr>
<td class="button">
<button id="calculate" name="calculate" onclick="computeLoan()">
Calculate
</button>
</td>
<td class="button">
<input type="reset" name="Reset">
</td>
</tr>
</table>
</form>
Note that the button is not a submit anymore. And that the form is prevented its default action on submit only.
Additionally you can make the computateLoan only compute something when all values are defined
function computeLoan() {
const amount = document.getElementById('amount').value;
const interest_rate = document.getElementById('interest_rate').value;
const months = document.getElementById('months').value;
// This `let result = value1 || value2` is similar to the trenary operator
// `let result = value1 ?: value2` you might know from other labguages
// `result` will evaluate to `value1` if that is not null or undefined,
// otherwise it will evaluate to `value2`
const taxes = document.getElementById('taxes').value || 0;
const insurance = document.getElementById('insurance').value || 0;
if (amount && interest_rate && months) {
let interest = (amount * (interest_rate * .01)) / months;
let escrow = (taxes + insurance) / 12;
let loanPayment = amount * interest * (Math.pow(1 + interest, months)) / (Math.pow(1 + interest, months) - 1);
let monthlyPayment = (loanPayment + escrow).toFixed(2);
document.getElementById('payment').value = monthlyPayment;
} else {
document.getElementById('payment').value = '';
}
}
See: https://codepen.io/anon/pen/ROENKW
function computeLoan() {
// rest of the function
var monthlyPayment = loanPayment + escrow;
monthlyPayment = monthlyPayment.toFixed(2);
document.getElementById('payment').value = monthlyPayment;
}
Hey please update the last two lines of the function by assigning the value of monthlyPayment to the element.
This will work :)

Not getting the sum totals in Jquery/Javascript

Iam working on an application with certain calculations. I need to show and sum up the totals of Total INR and Margin Field. When a user put a percentage in Add (%) it calculates certain things and show the margin. And at the end script has to show the sum totals. Its showing Nan as of now.
My script is below:
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>//<![CDATA[
function isNum(value)
{
return 123;
}
function calcTotals1()
{
var grandTotal = 0;
var i = 0;
while (document.forms['cart'].elements['add_percentage[]'][i])
{
add_percentageObj = document.forms['cart'].elements['add_percentage[]'][i];
addon_valueObj = document.forms['cart'].elements['addon_value[]'][i];
total_inr_valueObj = document.forms['cart'].elements['total_inr[]'][i];
totalObj = document.forms['cart'].elements['add_value[]'][i];
marginObj = document.forms['cart'].elements['margin_for[]'][i];
if (isNaN(add_percentageObj.value)) {
add_percentageObj = '';
}
if (isNaN(addon_valueObj.value)) {
addon_valueObj = '';
}
if (add_percentageObj.value != 0) {
totalObj.value = (((total_inr_valueObj.value * 1) * add_percentageObj.value / 100) + total_inr_valueObj.value * 1).toFixed(3);
grandTotal = grandTotal + parseFloat(totalObj.value);
marginObj.value = ((totalObj.value * 1) - (total_inr_valueObj.value * 1)).toFixed(3);
margin_total = ((margin_total *1) + marginObj.value * 1);
} else if (addon_valueObj.value !=0) {
totalObj.value = ((addon_valueObj.value * 1) + total_inr_valueObj.value * 1).toFixed(3);
grandTotal = grandTotal + parseFloat(totalObj.value);
marginObj.value = ((totalObj.value * 1) - (total_inr_valueObj.value * 1)).toFixed(3);
margin_total = ((margin_total *1) + marginObj.value * 1);
} else {
totalObj.value = ((addon_valueObj.value * 1) + total_inr_valueObj.value * 1).toFixed(3);
grandTotal = grandTotal + parseFloat(totalObj.value);
marginObj.value = ((totalObj.value * 1) - (total_inr_valueObj.value * 1)).toFixed(3);
margin_total = ((margin_total *1) + marginObj.value * 1);
}
i++;
}
document.getElementById('grand_total').value = grandTotal.toFixed(3);
document.getElementById('margin_total').value = margin_total.toFixed(3);
//document.getElementById('total_inr1').value = total_inr1.toFixed(3);
//document.getElementById('margin_for').value = margin_for;
return;
}
</script>
</head>
<body>
<form name="cart" class="single">
<div align="center" class="base">
<table width="100%" border=1 style="border-collapse: collapse;">
<tr bgcolor="#E6E6FA">
<td colspan="6"><b>Terms and Cost</b></td>
</tr>
<tr>
<td>Terms</td>
<td>Total INR</td>
<td>Add (%)</td>
<td>Add Value</td>
<td>Total Value</td>
<td>Margin</td>
</tr>
<tr>
<td width="25%">Export Charges</td>
<td width="75%"><input type="text" id="total_inr[]" name="total_inr[]" value="13263.984"></td>
<td><input type="text" id="add_percentage[]" name="add_percentage[]" value="" onchange="calcTotals1()"></td>
<td><input type="text" id="addon_value[]" name="addon_value[]" value="" onchange="calcTotals1()"></td>
<td><input type="text" id="add_value[]" name="add_value[]" value=""></td>
<td><input type="text" id="margin_for[]" name="margin_for[]" value=""></td>
</tr>
<tr>
<td width="25%">IATA Charges</td>
<td width="75%"><input type="text" id="total_inr[]" name="total_inr[]" value="16579.98"></td>
<td><input type="text" id="add_percentage[]" name="add_percentage[]" value="" onchange="calcTotals1()"></td>
<td><input type="text" id="addon_value[]" name="addon_value[]" value="" onchange="calcTotals1()"></td>
<td><input type="text" id="add_value[]" name="add_value[]" value=""></td>
<td><input type="text" id="margin_for[]" name="margin_for[]" value=""></td>
</tr>
<tr>
<td></td>
<td><input name="gTotal" id="grand_total" style="font-weight: bold" size="20" /></td>
<td></td>
<td></td>
<td></td>
<td><input type='text' style='font-weight: bold' id='margin_total' name='margin_total' size='8' readonly /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
Try to use parseInt() to work really with integers instead of strings. If you read values from some html elements, you get these values as string. It also can cause wrong calculations. Just call parseInt() each time you read numeric value from html page element

Value passed from textbox to textarea is automatically deleted

I am trying to pass a value entered in a textbox to a text area. However when I run my code the value appears in the textarea and it disapears.
Html code:
Customer Name
<input type="text" id="name1TXT" />
<textarea rows="6" cols="50" id="productList">
</textarea>
Javascript:
function transferData() {
var customer = document.getElementById("name1TXT").value;
if (customer != "")
document.getElementById('productList').value += customer + ","
document.getElementById('name1TXT').value = "";
}
Does anyone know why this would happen?
Edit
Here is all of my code.
<!DOCTYPE html>
<title></title>
<style>
.calcFrm {
}
</style>
<table style="width:300px;" border="1">
<tr>
<td>Customer Name</td>
<td><input type="text" id="name1TXT" /></td>
</tr>
<tr>
<td>Coating</td>
<td>
<select class="coating1DDL">
<option value="1">Galvanized</option>
<option value="2">Powder Coat</option>
<option value="3">None</option>
</select>
</td>
</tr>
<tr>
<td>Weight</td>
<td><input type="text" id="weight1TXT" onkeyup="sum1();"/></td>
</tr>
<tr>
<td>Length</td>
<td><input type="text" id="length1TXT" onkeyup="sum1();"/></td>
</tr>
<tr>
<td>Pieces</td>
<td><input type="text" id="pcs1TXT" onkeyup="sum1();"/></td>
</tr>
<tr>
<td>Pounds</td>
<td><input type="text" id="pounds1TXT" onkeyup="sum1();"readonly="readonly" /></td>
</tr>
<tr>
<td>Tons</td>
<td><input type="text" id="tons1TXT" onkeyup="convertPounds1();" readonly="readonly" /></td>
</tr>
</table>
<table style="width:300px;" border="1" class="tonsFrm2">
<tr>
<td>Customer Name</td>
<td><input type="text" id="name2TXT" /></td>
</tr>
<tr>
<td>Coating</td>
<td>
<select class="coating2DDL">
<option>Galvanized</option>
<option>Powder Coat</option>
<option>None</option>
</select>
</td>
</tr>
<tr>
<td>Weight</td>
<td><input type="text" id="weight2TXT" onkeyup="sum2();"/></td>
</tr>
<tr>
<td>Length</td>
<td><input type="text" id="length2TXT" onkeyup="sum2()"/></td>
</tr>
<tr>
<td>Pieces</td>
<td><input type="text" id="pcs2TXT" onkeyup="sum2();"/></td>
</tr>
<tr>
<td>Pounds</td>
<td><input type="text" id="pounds2TXT" readonly="readonly" onkeyup="sum2();" /></td>
</tr>
<tr>
<td>Tons</td>
<td><input type="text" id="tons2TXT" readonly="readonly" onkeyup="convertPounds2();" /></td>
</tr>
</table>
<table style="width:300px;" border="1" class="tonsFrm3">
<tr>
<td>Customer Name</td>
<td><input type="text" id="text3TXT" /></td>
</tr>
<tr>
<td>Coating</td>
<td>
<select class="coating3DDL">
<option>Galvanized</option>
<option>Powder Coat</option>
<option>None</option>
</select>
</td>
</tr>
<tr>
<td>Weight</td>
<td><input type="text" id="weight3TXT" onkeyup="sum3();"/></td>
</tr>
<tr>
<td>Length</td>
<td><input type="text" id="length3TXT" onkeyup="sum3();"/></td>
</tr>
<tr>
<td>Pieces</td>
<td><input type="text" id="pcs3TXT" onkeyup="sum3();"/></td>
</tr>
<tr>
<td>Pounds</td>
<td><input type="text" id="pounds3TXT" readonly="readonly" onkeyup="sum3();"/></td>
</tr>
<tr>
<td>Tons</td>
<td><input type="text" id="tons3TXT" readonly="readonly" onkeyup="convertPounds3();" /></td>
</tr>
</table>
<button onclick="transferData()">Submit</button>
<button type="reset" value="Reset">Reset</button>
<button type="button">Add New Form</button>
<br />
Pounds Total
<input type="text" id="TotalPoundsTxt" readonly="readonly" onkeyup="totalPounds();" />
Tons Total
<input type="text" id="TotalTonsTXT" readonly="readonly" onkeyup="totalTons();" />
<br />
<textarea rows="6" cols="50" id="productList">
</textarea>
<br />
<button type="button">Save Input</button>
Javascript:
//number correlate with form in order
//functions for first form
function sum1() {
var txtFirstNumberValue = document.getElementById('weight1TXT').value;
var txtSecondNumberValue = document.getElementById('length1TXT').value;
var txtThirdNumberValue = document.getElementById('pcs1TXT').value;
var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue) * parseInt(txtThirdNumberValue);
if (!isNaN(result)) {
document.getElementById('pounds1TXT').value = result;
}
}
function convertPounds1() {
var txtFirstNumberValue = document.getElementById('pounds1TXT').value;
var result = parseInt(txtFirstNumberValue) / 2000;
if (!isNaN(result)) {
document.getElementById('tons1TXT').value = result;
}
}
function galvCalc1() {
var galvOption = document.getElementById('').value
}
//functions for second form
function sum2() {
var txtFirstNumberValue = document.getElementById('weight2TXT').value;
var txtSecondNumberValue = document.getElementById('length2TXT').value;
var txtThirdNumberValue = document.getElementById('pcs2TXT').value;
var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue) * parseInt(txtThirdNumberValue);
if (!isNaN(result)) {
document.getElementById('pounds2TXT').value = result;
}
}
function convertPounds2() {
var txtFirstNumberValue = document.getElementById('pounds2TXT').value;
var result = parseInt(txtFirstNumberValue) / 2000;
if (!isNaN(result)) {
document.getElementById('tons2TXT').value = result;
}
}
//Functions for third form
function sum3() {
var txtFirstNumberValue = document.getElementById('weight3TXT').value;
var txtSecondNumberValue = document.getElementById('length3TXT').value;
var txtThirdNumberValue = document.getElementById('pcs3TXT').value;
var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue) * parseInt(txtThirdNumberValue);
if (!isNaN(result)) {
document.getElementById('pounds3TXT').value = result;
}
}
function convertPounds3() {
var txtFirstNumberValue = document.getElementById('pounds3TXT').value;
var result = parseInt(txtFirstNumberValue) / 2000;
if (!isNaN(result)) {
document.getElementById('tons3TXT').value = result;
}
}
function totalPounds(){
var firstpoundvalue = document.getElementById('pounds1TXT').value;
var secondpoundvalue = document.getElementById('pounds2TXT').value;
var thirdpoundvalue = document.getElementById('pounds3TXT').value;
var result = parseInt(firstpoundvalue) + parseInt(secondpoundvalue) + parseInt(thirdpoundvalue);
if (!isNaN(result)) {
document.getElementById('TotalPoundsTxt').value = result;
}
}
function totalTons() {
var firsttonvalue = document.getElementById('tons1TXT').value;
var secondtonvalue = document.getElementById('tons2TXT').value;
var thirdtonvalue = document.getElementById('tons3TXT').value;
var result = parseInt(firsttonvalue) + parseInt(secondtonvalue) + parseInt(thirdtonvalue);
if (!isNaN(result)) {
document.getElementById('TotalTonsTXT').value = result;
}
}
function transferData() {
var customer = document.getElementById("name1TXT").value;
if (customer != "")
document.getElementById('productList').value += customer + ",";
}
</script>
I cannot comment but I created as JSBin and seems to be working. I wasn't for sure how you are calling the transferData function to see the textarea clear so I just added an onBlur event to the input textbox.
I also added a semicolon to the line clearing the name1TXT value.
I still think everything is working regarding your code. By that I mean there aren't any odd bugs. But what exactly are you trying to accomplish? There appears to be 3 Customer Name boxes but when you click submit only 1 is being output into the textarea. It only grabs Customer1 and puts his/her name into the textarea and this process is repeating with each Submit. Are you trying to add all 3 customers? If so, then you will need more logic in your transferData function
you should use value like this
document.getElementById("writeArea").value = txt;
or like this in jQuery:
$('#myTextarea').val('');

Categories