Untitled

 avatar
unknown
plain_text
2 years ago
2.4 kB
5
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>