Issue
I wrote a script years ago for a simple php calculator that did multiplication price per square feet, total square feet and visits per week, and the total would be the sum of the three. I cant get it to multiply properly, i can't even get it to display the price per square feet.
I haven't written any scripts in so long, i cant remember anymore what I am doing, and I couldn't find a solution anywhere to help me figure it out again. Or one I could understand anyway. So if anyone could help me figure this out, i would greatly appreciate it. Maybe js would be better? I don't know it's literally been years since i have done any of this
php code
$priceper = 0.11;
$sqfeet = $_POST['sqfeet'];
$perweek = $_POST['perweek'];
// Calculate the total:
$total = $priceper * $sqfeet * $perweek;
html
<div><p>Fill out this form to calculate the total cost:</p>
<form action="" method="post">
<p> Price per square foot <? echo $priceper ?></p>
<p>Square Feet: <input type="text" name="sqfeet"></p>
<p>Visits per week: <input type="text" name="perweek" size="5"></p>
<input type="submit" name="submit" value="Calculate!">
</form>
<p>TOTAL: <? echo $total; ?>
</div>
I tried redoing the whole thing using JS, here's what I have:
HTML
<form>
Price per Sq Foot: <input type="text" id="priceper" value="0.11" disabled placeholder="$0.11"><br>
Sq Feet: <input type="text" id="sqfeet">
Visits: <input type="text" id="perweek">
<input type="button" value="Multiply Total" onclick="multiply()">
<div class="out" id="multiplyresult"></div>
</form>
Javascript:
var result=getId('Total'),
multiplyresult=getId('multiplyresult'),
n1,n2,n3;
function getValues(){
n1=getId('priceper').value,
n2=getId('sqfeet').value,
n3=getId('perweek').value;
}
console.log((n1)*(n2)*(n3));
window.multiply= function(){ getValues();
multiplyresult.innerText=(n1)*(n2)*(n3); };
function getId(x){ return document.getElementById(x);}
I got thisto work, but I would prefer to have the price per sq foot hard coded, instead of a disabled input, not sure how to do that so it gets the value, and I would like the results to be displayed in normal text, not in a text area box. If i could get some help with those 2 things, id be all set
Solution
Here is the same but self contained client side
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cost Calculator</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const pricePerSquareFoot = 0.11;
const sqFeetField = document.getElementById('sqfeet');
const perWeekField = document.getElementById('perweek');
const totalCostSpan = document.getElementById('totalCost');
const form = document.getElementById('costForm');
document.getElementById('pricePerSquareFoot').textContent = pricePerSquareFoot;
form.addEventListener('submit', event => {
event.preventDefault(); // stop submission
const sqFeet = +sqFeetField.value;
const perWeek = +perWeekField.value;
const total = pricePerSquareFoot * sqFeet * perWeek;
totalCostSpan.textContent = total.toFixed(2);
});
});
</script>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
#costForm {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#costForm p {
margin: 10px 0;
}
input[type="number"] {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
/* Added for consistent sizing */
}
#calculateButton {
background-color: #007bff;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}
#calculateButton:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div>
<p>Fill out this form to calculate the total cost:</p>
<form id="costForm">
<p> Price per square foot: <span id="pricePerSquareFoot"></span></p>
<p>Square Feet: <input type="number" id="sqfeet"></p>
<p>Visits per week: <input type="number" id="perweek" size="5"></p>
<button type="submit" id="calculateButton">Calculate!</button>
</form>
<p>TOTAL: <span id="totalCost"></span></p>
</div>
</body>
</html>Answered By - mplungjan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.