Не отправляются данные из формы

Question

Не отправляются данные из формы

Рейтинг: 0Ответов: 0Опубликовано: 28.06.2023

Всем привет, столкнулся с проблемой, взял чужой код и накинул на свою форму, вроде бы все связал как нужно (не уверен), но отправка данных не происходит, когда отправляю с локалки выдает ошибку, а на сайте даже окно не вылазит. Сайт на водпресс, форму добавил через элемент с html кодом, код php добавил в файл function.php и вывел его шорткодом (может что-то неточно описал, но оригинальный код таким образом работает и отправляет). Да и вообще хотелось бы услышать критику, если вам не сложно, в программировании я полный ноль. Заранее благодарю!

Оригинальный код: https://www.youtube.com/watch?v=Yn1NafVnfpA&t=438s

Мой код:

   /* Изменение label */
  $(document).ready(function () {
  $('#fileFF').change(function () {
    var i = $(this).prev('label').clone();
    var file = $('#fileFF')[0].files[0].name;
    $(this).prev('label').text(file);
  }); 
 });
  /* Связь с PHP */
 $(function() {
  document.getElementById('ajax-contact-form').addEventListener('submit', function(evt){
    var http = new XMLHttpRequest(), f = this;
    var th = $(this);
    evt.preventDefault();
    http.open("POST", "functions.php", true);
    http.onreadystatechange = function() {
      if (http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
        if (http.responseText.indexOf(f.nameFF.value) == 0) { // очистить поля формы, если в ответе первым словом будет имя отправителя (nameFF)
          th.trigger("reset");
        }
      }
    }
    http.onerror = function() {
      alert('Ошибка, попробуйте еще раз');
    }
    http.send(new FormData(f));
  }, false);
 
});

.form-group{
        width: 100%;
        display:flex;
    }
    #nameFF{
        font-size: 20px;
        font-weight: 300;
        font-family: Roboto;
        line-height: 27px;
        color: #A7A7A7;
        border-radius: 100px;
        border: none;
        background: #F3F3F3;
        padding: 33px;
        height: 77px;
        outline: none;
    }
    #contactFF{
        margin-left: 45px;
        font-size: 20px;
        font-family: Roboto;
        font-weight: 300;
        line-height: 27px;
        color: #A7A7A7;
        border-radius: 100px;
        border: none;
        background: #F3F3F3;
        padding: 33px;
        height: 77px;
        outline: none;
    }
    #projectFF{
        margin-top: 33px;
        font-size: 20px;
        font-family: Roboto;
        font-weight: 300;
        line-height: 27px;
        color: #A7A7A7; 
        border-radius: 45px;
        border: none;
        background: #F3F3F3;
        padding: 33px;
        height: 300px;
        resize: none;
        outline: none;
    }
    .bottom_form{
        width: 100%;
        display:flex;
        margin-top: 28px;
    }
    .btn{
        height: 50px;
        border: none;
        border-radius: 25px;
        background: #6511C5;
        color: #FFF;
        font-size: 15px;
        font-family: Roboto;
        font-weight: 500;
        line-height: 20px;
        text-transform: uppercase;
    }
    .btn:hover{
        background: #8D28FF;
    }
    .btn:focus{
        background: #8D28FF;
        border: none;
        outline: none;
    }
    .policyconf{
        margin-top: 10px;
        width: 420px;
        margin-left: 30px;
        color: #706F6F;
        font-family: Roboto, sans-serif;
        font-size: 15px;
        line-height: 15px;
        font-weight: 400;
        letter-spacing: -0.8px;
    }
    .control-file{
        margin-top: 14px;
        position: absolute;
        right: 0;
    }
    .input-file-icon img{
        position:relative;
        top:4px;
  }
    .custom-file-upload{
        cursor: pointer;
        color: #706f6f;
        font-size: 18px;
        font-family: Roboto;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: -0.3px;
    }
    .field.field__file{
        opacity: 0;
       position: absolute;
       z-index: -1;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box">
  <form id="ajax-contact-form" enctype="multipart/form-data" method="post">
    <div class="form-group">
      <input id="nameFF" name="nameFF" type="text" required placeholder="Имя">
      <input id="contactFF" name="contactFF" type="email" required placeholder="Телефон или E-mail">
    </div>
    <div class="form-your-project">
      <textarea id="projectFF" name="projectFF" cols="40" rows="4" placeholder="Описание задачи"></textarea>
    </div>
    <div class="bottom_form">
      <button class="btn" type="submit" id="submitFF">Оставить заявку</button>
      <p class="policyconf">
          Нажимая на кнопку, я соглашаюсь на обработку персональных данных и <a style="color: #706F6F;" href="">Политикой конфиденциальности</a>
      </p>
      <div class="control-file">
        
        <label for="fileFF" class="custom-file-upload">Прикрепить файл</label>
        <input id="fileFF" name="fileFF" type="file" class="field field__file" accept=".jpg,.jpeg,.pdf,doc,docx,application/msword,.png">
    </div>
    </div>
</form>
</div>

javascript html wordpress php

Источник: Stack Overflow на русском

Не отправляются данные из формы

Ответы