RBleil
December 27, 2019, 8:16pm
1
I am working on a project for my business, and I am trying to create a way to calculate a part cost + tax + markup as Bill Cost. I have the function and I know it works, but I can’t seem to get the function call correct to have the function run automatically and return the value to the input field that I need it to be in. The OnClick button, in its current location, is acting as a submit button, but does not run the function. Please help!
Here is the HTML form (with Javascript function) that I am using:
<?php
session_start();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Parts</title>
</head>
<body style="background-color:black; color:#EE9A00;">
<img src="/images/400dpiLogo.png" height="150" width="250" style="position: absolute; top: 2%; left: 5%;"></div>
<?php
require('connect.php');
if(!isset($_SESSION['ID'])) {
echo "<script type='text/javascript'> alert('Must be Logged In'); </script>";
echo "<script type='text/javascript'> document.location = 'Login.html'; </script>";
} else {
$user = $_SESSION['ID'];
}
?>
<form id='part' action='NewPart.php' method='post' accept-charset='UTF-8'>
<p style = 'position: absolute; left: 5%; top: 15%;'><font size="5">New Part</font></style>
<br>
<br>
<table frame="box">
<caption>Part Information</caption>
<tr><td>Part Name</td><td><input type= "text" name="PartName"></td><td width="50"></td><td>Part Color</td><td><input type= "text" name="PartColor"></td></tr>
<tr><td>Part Description</td><td colspan="4"><input type= "text" name="PartDescription" size="63"></td><td></td><td></td></tr>
<tr><td>Part Cost</td><td><input type= "number" name="PartCost" step=".01" id='Purchase'></td><td></td><td>Bill Cost</td><td><input type= "number" name="BillPrice" style='background-color:black; border:0; color:white' step=".01" id='Billing' /></td></tr>
<tr><td>Office Qty</td><td><input type= "text" name="Qty"></td><td></td><td>Supplier</td><td><input type= "text" name="Supplier"></td></tr>
</table>
<script>
function calculateBillPrice() {
var PartCost = document.getElementById('Purchase');
var SalesTax = .06;
var TaxPrice = (PartCost) * (1 + SalesTax);
var BillPrice = (TaxPrice) * (1 + .10);
var BillPriceT = BillPrice.toFixed(2);
var Billing = document.getElementById('Billing');
Billing.value = BillPriceT;
}
</script>
<br>
<br>
<br>
<button onClick="calculateBillPrice()">Bill Price</button>                              <input type= 'submit' name='create_part' value = 'Add New Part'>                              <a href="Main.php"><input type="button" value="Cancel"></a>
</form>
</body>
</html>
RBleil
December 27, 2019, 9:35pm
3
As far as the reference to PartCost, I originally had it in the parameter section of the function. If it is placed there, would that provide the necessary reference to the Input value named PartCost? Or do I need to do a object ID to name the input field? I know that when I had it in the parameter section, the code worked.
i have looked online and cannot find a way to have the value returned to the proper input field, that’s one of the questions that i was hoping to get answered, How do I do that?
With the event.preventDefault method, where does that go? Does it go with the button, or do I put that around the function?
RBleil
December 27, 2019, 10:04pm
5
OK, I adjusted the above code, Is it now in the correct placement and usage? I called to define the PartCost with the document.getElement to define its ID as a var, and i called the ID for Billing to input the var output to it. With both of those, I can delete the return? Or should I have left it in?
RBleil
December 27, 2019, 10:36pm
7
Where does the preventDefault go? I am unclear as to where it goes, even after reading on it. Does it go inside the function, or in the button click?
Also, can I use an onChange call to automatically run this function, instead of using the button? (After I get the preventDefault fixed, that is)
RBleil
December 27, 2019, 11:19pm
9
Once the Input is made in the PurchaseCost Input text area, and the user tabs away, the function runs and inputs the value into the input text area of BillingCost
RBleil
December 31, 2019, 3:59pm
11
OK, I have adjusted the coding, but the onChange isn’t working…
<?php
session_start();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Parts</title>
</head>
<body style="background-color:black; color:#EE9A00;">
<img src="/images/400dpiLogo.png" height="150" width="250" style="position: absolute; top: 2%; left: 5%;"></div>
<?php
require('connect.php');
if(!isset($_SESSION['ID'])) {
echo "<script type='text/javascript'> alert('Must be Logged In'); </script>";
echo "<script type='text/javascript'> document.location = 'Login.html'; </script>";
} else {
$user = $_SESSION['ID'];
}
?>
<form id='part' action='NewPart.php' method='post' accept-charset='UTF-8'>
<p style = 'position: absolute; left: 5%; top: 15%;'><font size="5">New Part</font></style>
<br>
<br>
<table frame="box">
<caption>Part Information</caption>
<tr><td>Part Name</td><td><input type= "text" name="PartName"></td><td width="50"></td><td>Part Color</td><td><input type= "text" name="PartColor"></td></tr>
<tr><td>Part Description</td><td colspan="4"><input type= "text" name="PartDescription" size="63"></td><td></td><td></td></tr>
<tr><td>Part Cost</td><td><input type= "number" name="PartCost" step=".01" id='Purchase' onChange = "calculateBillPrice(this.value)"></td><td></td><td>Bill Cost</td><td><input type= "number" name="BillPrice" style='background-color:black; border:0; color:white' step=".01" id='Billing' /></td></tr>
<tr><td>Office Qty</td><td><input type= "text" name="Qty"></td><td></td><td>Supplier</td><td><input type= "text" name="Supplier"></td></tr>
</table>
<script>
function calculateBillPrice(val) {
var PartCost = document.getElementById('Purchase');
var SalesTax = .06;
var TaxPrice = (PartCost) * (1 + SalesTax);
var BillPrice = (TaxPrice) * (1 + .10);
var BillPriceT = BillPrice.toFixed(2);
var Billing = document.getElementById('Billing');
Billing.value = BillPriceT;
}
</script>
<br>
<br>
<br>
<input type= 'submit' name='create_part' value = 'Add New Part'>                              <a href="Main.php"><input type="button" value="Cancel"></a>
</form>
</body>
</html>
RBleil
December 31, 2019, 6:34pm
13
Wouldn’t the getElementByID(‘Purchase’) retrieve the value of the field automatically? Or do I have to use a this.value statement somewhere?
RBleil
December 31, 2019, 7:40pm
15
<script>
function calculateBillPrice() {
var PartCost = document.getElementById('Purchase').value;
var SalesTax = .06;
var TaxPrice = (PartCost) * (1 + SalesTax);
var BillPrice = (TaxPrice) * (1 + .10);
var BillPriceT = BillPrice.toFixed(2);
var Billing = document.getElementById('Billing').value = BillPriceT;
}
</script>This still will not return any values at all. I set up an alert, at the end of var BillPriceT = BillPrice.toFixed(2); and it will give me the correct calculation, but it will not insert that number into the field that I need it in.
RBleil
January 2, 2020, 11:03pm
17
<?php
session_start();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Parts</title>
</head>
<body style="background-color:black; color:#EE9A00;">
<img src="/images/400dpiLogo.png" height="150" width="250" style="position: absolute; top: 2%; left: 5%;"></div>
<?php
require('connect.php');
if(!isset($_SESSION['ID'])) {
echo "<script type='text/javascript'> alert('Must be Logged In'); </script>";
echo "<script type='text/javascript'> document.location = 'Login.html'; </script>";
} else {
$user = $_SESSION['ID'];
}
?>
<form id='part' action='NewPart.php' method='post' accept-charset='UTF-8'>
<p style = 'position: absolute; left: 5%; top: 15%;'><font size="5">New Part</font></style>
<br>
<br>
<table frame="box">
<caption>Part Information</caption>
<tr><td>Part Name</td><td><input type= "text" name="PartName"></td><td width="50"></td><td>Part Color</td><td><input type= "text" name="PartColor"></td></tr>
<tr><td>Part Description</td><td colspan="4"><input type= "text" name="PartDescription" size="63"></td><td></td><td></td></tr>
<tr><td>Part Cost</td><td><input type= "number" name="PartCost" step=".01" id='Purchase' onChange = "calculateBillPrice()"></td><td></td><td>Bill Cost</td><td><input type= "text" name="BillPrice" style='background-color:black; border:0; color:white; step=".01" id='Billing'></td></tr>
<tr><td>Office Qty</td><td><input type= "text" name="Qty"></td><td></td><td>Supplier</td><td><input type= "text" name="Supplier"></td></tr>
</table>
<script>
function calculateBillPrice() {
var PartCost = document.getElementById('Purchase').value;
var SalesTax = .06;
var TaxPrice = (PartCost) * (1 + SalesTax);
var BillPrice = (TaxPrice) * (1 + .10);
var BillPriceT = BillPrice.toFixed(2);
alert (BillPriceT);
var Billing = document.getElementById('Billing').value = BillPriceT;
}
</script>
<br>
<br>
<br>
<input type= 'submit' name='create_part' value = 'Add New Part'>                              <a href="Main.php"><input type="button" value="Cancel"></a>
</form>
</body>
</html>
@RBleil As I suspected, you changed the following code:
<td><input type="number" name="BillPrice" style='background-color:black; border:0; color:white' step=".01" id='Billing' /></td>
to:
<td><input type="text" name="BillPrice" style='background-color:black; border:0; color:white; step=".01" id='Billing'></td>
You are missing a closing single quote on your style attribute value.
RBleil
January 2, 2020, 11:35pm
19
TY so much!! It works now…
Have a great New Year!