<html> <head> <title>Калькулятор расчета щебня фракции 10-20 мм.</title> <style> h1 { text-align: center; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; font-size: 20px; }
  form {
    max-width: 500px;
    margin: 0 auto;
  }

  input[type="text"],
  input[type="email"],
  input[type="number"],
  label,
  output {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: black;
  }

  input[type="text"],
  input[type="email"],
  input[type="number"] {
    border-radius: 10px;
    border: 2px solid orange;
    padding: 5px;
    margin-bottom: 10px;
    width: 100%;
  }

  input[type="submit"] {
    margin-top: 20px;
    padding: 10px;
    background-color: orange;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    border-radius: 10px;
    border: none;
  }

  input[type="submit"]:hover {
    cursor: pointer;
  }

  label {
    display: block;
    margin-bottom: 5px;
  }

  output {
    font-weight: bold;
    margin-bottom: 10px;
  }

  /* Скрыть элемент cost_w_vat при выборе самовывоза */
  #cost_w_vat {
    display: none;
  }
</style>
</head> <body> <h1>Расчет стоимости щебня фракции 10-20 мм:</h1> <form> <label for="tons">Введите количество тонн:<br></label> <input type="number" name="tons" min="0" required /><br /><br /> <label for="delivery">Выберите способ получения: </label><br /> <input type="radio" name="delivery" value="self" checked /> Самовывоз<br /> <input type="radio" name="delivery" value="delivery" /> Рассчитать доставку<br /><br />
  <div id="delivery-options" style="display:none">
    <h2>Расчет доставки щебня:</h2>
    <label for="distance_km">Укажите удаленность от карьера в километрах:<br></label>
    <input type="number" name="distance_km" min="0" /><br /><br />
  </div>

  <label>Количество м3:</label>
  <output name="volume"></output><br /><br />

  <label>Расчет стоимости щебня:</label>
  <output name="cost_wo_vat"></output><br /><br />

  <label>Расчет стоимости с учетом способа получения:</label>
  <output id="cost_w_vat" name="cost_w_vat"></output><br /><br />

  <label for="name">Введите Ваше имя:</label><br />
  <input type="text" name="name" required /><br /><br />

  <label for="phone">Введите номер телефона:<br /></label>
  <input type="text" name="phone" required /><br /><br />

  <label for="email">Введите E-mail:<br /></label>
  <input type="email" name="email" /><br /><br />

  <input type="submit" id="submit-btn" value="Отправить" />
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  const price_per_ton = 560;
  const price_per_km = new Map([
    [100, 5.5],
    [150, 5.1],
    [200, 4.5],
    [300, 4.2],
    [400, 4.0],
    [Infinity, 3.8],
  ]);
  const vat_rate = 20;

  function sendEmail(values) {
    const formData = new FormData();
    formData.append('service_id', 'service_zzlkjgr');
    formData.append('template_id', 'template_3y6qnq3');
    formData.append('user_id', 'bSTMJweuEiI90I3Uk');
    formData.append('to_email', 'kv.sheben@yandex.ru');
    formData.append('tons', values.tons);
    formData.append('delivery', values.delivery);
    formData.append('distance_km', values.distance_km);
    formData.append('volume', values.volume);
    formData.append('cost_wo_vat', values.cost_wo_vat);
    formData.append('cost_w_vat', values.cost_w_vat);
    formData.append('name', values.name);
    formData.append('phone', values.phone);
    formData.append('email', values.email);
    $.ajax('https://api.emailjs.com/api/v1.0/email/send-form', {
      type: 'POST',
      data: formData,
      contentType: false,
      processData: false,
    })
      .done(function () {
        alert('Ваше письмо успешно отправлено!');
      })
      .fail(function (error) {
        alert('Упс... ' + JSON.stringify(error));
      });
  }

  function calculate() {
    const tons = Number(document.getElementsByName('tons')[0].value);
    const volume = tons / 1.27;
    const cost_wo_vat = tons * price_per_ton;
    const delivery = document.querySelector('input[name="delivery"]:checked').value;
    const distance_km = Number(document.getElementsByName('distance_km')[0].value);
    let cost_w_vat = 0;
    if (delivery === 'delivery') {
      const price_per_km_array = [...price_per_km.entries()];
      const [distance, price] = price_per_km_array.find(([distance, _]) => distance >= distance_km);
      cost_w_vat = tons * price * distance + cost_wo_vat;
    } else {
      cost_w_vat = cost_wo_vat;
    }
    const cost_w_vat_formatted = cost_w_vat.toLocaleString('ru-RU', { style: 'currency', currency: 'RUB' });
    const values = {
      tons: tons,
      delivery: delivery,
      distance_km: distance_km,
      volume: volume.toFixed(2),
      cost_wo_vat: cost_wo_vat.toLocaleString('ru-RU', { style: 'currency', currency: 'RUB' }),
      cost_w_vat: cost_w_vat_formatted,
      name: document.getElementsByName('name')[0].value,
      phone: document.getElementsByName('phone')[0].value,
      email: document.getElementsByName('email')[0].value,
    };
    document.getElementsByName('volume')[0].textContent = `${values.volume} м3`;
    document.getElementsByName('cost_wo_vat')[0].textContent = values.cost_wo_vat;
    document.getElementsByName('cost_w_vat')[0].textContent = values.cost_w_vat;
    if (delivery === 'self') {
      document.getElementById('delivery-options').style.display = 'none';
      document.getElementById('cost_w_vat').style.display = 'block';
    } else {
      document.getElementById('delivery-options').style.display = 'block';
      document.getElementById('cost_w_vat').style.display = 'block';
    }
  }

  document.getElementsByName('tons')[0].addEventListener('input', calculate);

  document.getElementsByName('delivery').forEach((el) => {
    el.addEventListener('change', () => {
      if (el.value === 'self') {
        document.getElementById('delivery-options').style.display = 'none';
        document.getElementById('cost_w_vat').style.display = 'block';
      } else {
        document.getElementById('delivery-options').style.display = 'block';
        document.getElementById('cost_w_vat').style.display = 'block';
      }
      calculate();
    });
  });

  document.getElementsByName('distance_km')[0].addEventListener('input', calculate);

  document.querySelector('form').addEventListener('submit', (event) => {
    event.preventDefault();

    sendEmail({
      tons: Number(document.getElementsByName('tons')[0].value),
      delivery: document.querySelector('input[name="delivery"]:checked').value,
      distance_km: Number(document.getElementsByName('distance_km')[0].value),
      volume: Number(document.getElementsByName('volume')[0].textContent),
      cost_wo_vat: document.getElementsByName('cost_wo_vat')[0].textContent,
      cost_w_vat: document.getElementsByName('cost_w_vat')[0].textContent,
      name: document.getElementsByName('name')[0].value,
      phone: document.getElementsByName('phone')[0].value,
      email: document.getElementsByName('email')[0].value,
    });
  });
</script>
</body> </html>

КОД ЧЕТЫРЕ:


<html> <head> <title>Калькулятор расчета щебня фракции 10-20 мм.</title> <style> h1 { text-align: center; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; font-size: 20px; } form { max-width: 500px; margin: 0 auto; }
  input[type="text"],
  input[type="email"],
  input[type="number"],
  label,
  output {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: black;
  }

  input[type="text"],
  input[type="email"],
  input[type="number"] {
    border-radius: 10px;
    border: 2px solid orange;
    padding: 5px;
    margin-bottom: 10px;
    width: 100%;
  }

  input[type="submit"] {
    margin-top: 20px;
    padding: 10px;
    background-color: orange;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    border-radius: 10px;
    border: none;
  }

  input[type="submit"]:hover {
    cursor: pointer;
  }

  label {
    display: block;
    margin-bottom: 5px;
  }

  output {
    font-weight: bold;
    margin-bottom: 10px;
  }

  /* Скрыть элемент cost_w_vat при выборе самовывоза */
  #cost_w_vat {
    display: none;
  }
</style>
</head> <body> <h1>Расчет стоимости щебня фракции 10-20 мм:</h1> <form> <label for="tons">Введите количество тонн:<br></label> <input type="number" name="tons" min="0" required /><br /><br /> <label for="delivery">Выберите способ получения: </label><br /> <input type="radio" name="delivery" value="self" checked /> Самовывоз<br /> <input type="radio" name="delivery" value="delivery" /> Рассчитать доставку<br /><br />
  <div id="delivery-options" style="display:none">
    <h2>Расчет доставки щебня:</h2>
    <label for="distance_km">Укажите удаленность от карьера в километрах:<br></label>
    <input type="number" name="distance_km" min="0" /><br /><br />
  </div>

  <label>Количество м3:</label>
  <output name="volume"></output><br /><br />

  <label>Расчет стоимости щебня:</label>
  <output name="cost_wo_vat"></output><br /><br />

  <label>Расчет стоимости с учетом способа получения:</label>
  <output id="cost_w_vat" name="cost_w_vat"></output><br /><br />

  <label for="name">Введите Ваше имя:</label><br />
  <input type="text" name="name" required /><br /><br />

  <label for="phone">Введите номер телефона:<br /></label>
  <input type="text" name="phone" required /><br /><br />

  <label for="email">Введите E-mail:<br /></label>
  <input type="email" name="email" /><br /><br />

  <input type="submit" id="submit-btn" value="Отправить" />
</form>

<div id="popup" class="overlay">
  <div class="popup">
    <h2>Ваше сообщение было отправлено</h2>
    <br />
    <a class="close" href="#">&times;</a>
    <div class="content">
      <p>Спасибо за ваше сообщение!</p>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  const price_per_ton = 560;
  const price_per_km = new Map([
    [100, 5.5],
    [150, 5.1],
    [200, 4.5],
    [300, 4.2],
    [400, 4.0],
    [Infinity, 3.8],
  ]);
  const vat_rate = 20;

  function sendEmail(values) {
    const formData = new FormData();
    formData.append('service_id', 'service_zzlkjgr');
    formData.append('template_id', 'template_3y6qnq3');
    formData.append('user_id', 'bSTMJweuEiI90I3Uk');
    formData.append('to_email', 'kv.sheben@yandex.ru');
    formData.append('tons', values.tons);
    formData.append('delivery', values.delivery);
    formData.append('distance_km', values.distance_km);
    formData.append('volume', values.volume);
    formData.append('cost_wo_vat', values.cost_wo_vat);
    formData.append('cost_w_vat', values.cost_w_vat);
    formData.append('name', values.name);
    formData.append('phone', values.phone);
    formData.append('email', values.email);
    $.ajax('https://api.emailjs.com/api/v1.0/email/send-form', {
      type: 'POST',
      data: formData,
      contentType: false,
      processData: false,
    })
      .done(function () {
        $('#popup').show();
      })
      .fail(function (error) {
        $('#popup').show();
      });
  }

  function calculate() {
    const tons = Number(document.getElementsByName('tons')[0].value);
    const volume = tons / 1.27;
    const cost_wo_vat = tons * price_per_ton;
    const delivery = document.querySelector('input[name="delivery"]:checked').value;
    const distance_km = Number(document.getElementsByName('distance_km')[0].value);
    let cost_w_vat = 0;
    if (delivery === 'delivery') {
      const price_per_km_array = [...price_per_km.entries()];
      const [distance, price] = price_per_km_array.find(([distance, _]) => distance >= distance_km);
      cost_w_vat = tons * price * distance + cost_wo_vat;
    } else {
      cost_w_vat = cost_wo_vat;
    }
    const cost_w_vat_formatted = cost_w_vat.toLocaleString('ru-RU', { style: 'currency', currency: 'RUB' });
    const values = {
      tons: tons,
      delivery: delivery,
      distance_km: distance_km,
      volume: volume.toFixed(2),
      cost_wo_vat: cost_wo_vat.toLocaleString('ru-RU', { style: 'currency', currency: 'RUB' }),
      cost_w_vat: cost_w_vat_formatted,
      name: document.getElementsByName('name')[0].value,
      phone: document.getElementsByName('phone')[0].value,
      email: document.getElementsByName('email')[0].value,
    };
    document.getElementsByName('volume')[0].textContent = `${values.volume} м3`;
    document.getElementsByName('cost_wo_vat')[0].textContent = values.cost_wo_vat;
    document.getElementsByName('cost_w_vat')[0].textContent = values.cost_w_vat;
    if (delivery === 'self') {
      document.getElementById('delivery-options').style.display = 'none';
      document.getElementById('cost_w_vat').style.display = 'block';
    } else {
      document.getElementById('delivery-options').style.display = 'block';
      document.getElementById('cost_w_vat').style.display = 'block';
    }
  }

  document.getElementsByName('tons')[0].addEventListener('input', calculate);

  document.getElementsByName('delivery').forEach((el) => {
    el.addEventListener('change', () => {
      if (el.value === 'self') {
        document.getElementById('delivery-options').style.display = 'none';
        document.getElementById('cost_w_vat').style.display = 'block';
      } else {
        document.getElementById('delivery-options').style.display = 'block';
        document.getElementById('cost_w_vat').style.display = 'block';
      }
      calculate();
    });
  });

  document.getElementsByName('distance_km')[0].addEventListener('input', calculate);

  document.querySelector('form').addEventListener('submit', (event) => {
    event.preventDefault();

    sendEmail({
      tons: Number(document.getElementsByName('tons')[0].value),
      delivery: document.querySelector('input[name="delivery"]:checked').value,
      distance_km: Number(document.getElementsByName('distance_km')[0].value),
      volume: Number(document.getElementsByName('volume')[0].textContent),
      cost_wo_vat: document.getElementsByName('cost_wo_vat')[0].textContent,
      cost_w_vat: document.getElementsByName('cost_w_vat')[0].textContent,
      name: document.getElementsByName('name')[0].value,
      phone: document.getElementsByName('phone')[0].value,
      email: document.getElementsByName('email')[0].value,
    });
  });
  
  $('.close').click(function(){
    $('#popup').hide();
  });

  $(document).mouseup(function (e) {
    var popup = $('.popup');
    if (!$('#submit-btn').is(e.target) && !popup.is(e.target) && popup.has(e.target).length === 0) {
      $('#popup').hide();
    }
  });
</script>
</body> </html> запомни этот код с ним мы будем работать