Javascript Function Call

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>&nbsp &nbsp  &nbsp &nbsp &nbsp &nbsp  &nbsp &nbsp &nbsp  &nbsp &nbsp &nbsp &nbsp  &nbsp &nbsp <input type= 'submit' name='create_part' value = 'Add New Part'>&nbsp &nbsp  &nbsp &nbsp &nbsp &nbsp  &nbsp &nbsp &nbsp  &nbsp &nbsp &nbsp &nbsp  &nbsp &nbsp <a href="Main.php"><input type="button" value="Cancel"></a>
</form>







</body>
</html>

You have a couple of issues. First, as soon as you click the button the form gets submitted before the JavaScript even has time to run. You need to read about the event.preventDefault method. Also, you have another issue inside your function. You reference a variable named PartCost but you have not defined it anywhere in the code you provided, so you will create a reference error. Lastly, once you resolve the first two issues, no where in your code do you tell JavaScript to update the value of the element with id=“Billing”. You just return a value to the calling function. That would calculate a value but not update the DOM element in anyway.

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?

To reference a DOM that has an id attribute, you would do the following:

var element = document.getElementById('idNameGoesHere')

To assign a value to an input element, you reference its value attribute.

element.value = 'a string value';  // assigns a string to the element's value attribute.

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?

No return needed. You still need to use the preventDefault method or the form will keep submitting.

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)

What element would you use the onchange call on? What are you trying to accomplish with it?

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

If you do the onchange, you would not need the other button.

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'>&nbsp &nbsp  &nbsp &nbsp &nbsp &nbsp  &nbsp &nbsp &nbsp  &nbsp &nbsp &nbsp &nbsp  &nbsp &nbsp <a href="Main.php"><input type="button" value="Cancel"></a>
</form>







</body>
</html>

The line above assigns an element to PartCost and not a value. Also, I notice you have a parameter named val, but you do not use it in your calculations, so you can get rid of this parameter.

Wouldn’t the getElementByID(‘Purchase’) retrieve the value of the field automatically? Or do I have to use a this.value statement somewhere?

getElementById returns the element and not the element’s value. You will need to reference the element’s value property. Just keep in mind, the value will be a string.

<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.

Not sure what you mean by not returning, but the code will update the Bill Cost value upon changing the value in Part Cost if you set onchange="calculateBillPrice()" to the element with id=‘Purchase’`.

What errors do you see in the browser console? Can you post the full page code again? Maybe you changed something else?

<?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'>&nbsp &nbsp  &nbsp &nbsp &nbsp &nbsp  &nbsp &nbsp &nbsp  &nbsp &nbsp &nbsp &nbsp  &nbsp &nbsp <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.

TY so much!! It works now…

Have a great New Year!