Untitled
unknown
plain_text
6 months ago
2.4 kB
3
Indexable
Never
<!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>