Untitled
unknown
plain_text
2 years ago
2.4 kB
7
Indexable
<!DOCTYPE html>
<html>
<head>
<title>Acrylic Square Pricing Form</title>
</head>
<body>
<h2>Acrylic Square Pricing Form</h2>
<form id="acrylic-form">
<label for="client-name">Client Name:</label><br>
<input type="text" name="client-name" id="client-name" required><br><br>
<label for="phone-number">Phone Number:</label><br>
<input type="tel" name="phone-number" id="phone-number" required><br><br>
<label for="square-size">Square Size:</label><br>
<input type="radio" name="square-size" value="6x6" checked> 6" x 6" ($40)<br>
<input type="radio" name="square-size" value="7x7"> 7" x 7"<br>
<input type="radio" name="square-size" value="8x8"> 8" x 8"<br>
<input type="radio" name="square-size" value="9x9"> 9" x 9"<br>
<input type="radio" name="square-size" value="10x10"> 10" x 10"<br>
<input type="radio" name="square-size" value="11x11"> 11" x 11"<br>
<input type="radio" name="square-size" value="12x12"> 12" x 12"<br>
<input type="radio" name="square-size" value="13x13"> 13" x 13"<br>
<input type="radio" name="square-size" value="14x14"> 14" x 14" (Max $140)<br><br>
<label for="additional-requests">Additional Requests:</label><br>
<textarea name="additional-requests" id="additional-requests" rows="4" required></textarea><br><br>
<label for="price">Price per Square:</label><br>
<input type="text" name="price" id="price" readonly><br><br>
<input type="submit" value="Submit">
</form>
<script>
var form = document.getElementById('acrylic-form');
var squareSizeInputs = form.elements['square-size'];
var priceInput = form.elements['price'];
for (var i = 0; i < squareSizeInputs.length; i++) {
squareSizeInputs[i].addEventListener('change', calculatePrice);
}
form.addEventListener('submit', function(event) {
event.preventDefault();
// You can add your form submission logic here
alert('Form submitted successfully!');
form.reset();
});
function calculatePrice() {
var selectedSquareSize = form.querySelector('input[name="square-size"]:checked').value;
var basePrice = 40;
var maxPrice = 140;
var squareArea = parseInt(selectedSquareSize) ** 2;
var calculatedPrice = squareArea * (maxPrice - basePrice) / (196 - 36) + basePrice;
priceInput.value = calculatedPrice.toFixed(2);
}
</script>
</body>
</html>
Editor is loading...