Отправка формы обратной связи с AJAX/JQUERY

174
07 августа 2021, 00:50

У меня есть рабочая форма обратной связи, когда я пишу в форме action="pop.php", и нажимаю на сабмит, она перенаправляется по адресу site.com/pop.php, и отправляет сообщение на мой email адрес, но я хочу использовать sweetalert2 js, и когда нажимаю на сабмит, появлялось сообщение об успешной отправке. Моя форма выглядит так:

<form action="pop.php" id="sendform" method="post" enctype="multipart/form-data">
      <div class="field-block">
        <label for="name">Name:</label>
        <input id="name" class="field" name="name" required type="text" placeholder="Name">
      </div>
  <div class="field-block">
        <label for="phone">Phone:</label>
        <input id="phone" class="field" name="tel" required type="text" placeholder="+7 (777) 777-77-77">
      </div>         
      <div class="field-block">
        <label for="email">E-mail:</label>
        <input id="email" class="field" name="email" required type="email" placeholder="e-mail">
      </div>
      <div class="field-block">
        <label for="message"></label>
        <textarea id="message" class="field" required name="message" rows="4" placeholder=""></textarea>
      </div>
      <label for="">Upload</label>
       <input name="file" value="1" size="40" type="file" />
        <div>
          <input type="hidden" name="Max">
        </div>
      <button name="sendMail" id="button" class="button" type="submit">Submit</button>
    </form>

Ajax обработчик:

 <script>
    $("#sendform").on('submit',function(event) {
      event.preventDefault(); // to prevent default page reloading
var formData  = new FormData(this);
     $.ajax({
     type: "POST",
     url: "pop.php",
     data: formData,
     success: function(data){
     $('#sendform')[0].reset(); 
     // to reset form data
    }
    }).done(function(data){
    setTimeout(function () {
    Swal.fire(
        'Thanks!',
         'Form submitted successfully!',
           )
    }, 500);
    //alert("Form submitted successfully! We'll get back to you soon. Thank you."); // This will be called after the ajax executed
    });
    });
       </script>

php обработчик формы pop.php:

if ( isset( $_POST['sendMail'] ) ) {
  $name  = substr( $_POST['name'], 0, 64 );
  $tel = substr( $_POST['tel'], 0, 64 );
  $email   = substr( $_POST['email'], 0, 64 );
  $message = substr( $_POST['message'], 0, 250 );

  if ( !empty( $_FILES['file']['tmp_name'] ) and $_FILES['file']['error'] == 0 ) {
    $filepath = $_FILES['file']['tmp_name'];
    $filename = $_FILES['file']['name'];
  } else {
    $filepath = '';
    $filename = '';
  }
  $body = "Имя:\r\n".$name."\r\n\r\n";
  $body .= "Контактный номер:\r\n".$tel."\r\n\r\n";
  $body .= "E-mail:\r\n".$email."\r\n\r\n";
  $body .= "Описание заказа:\r\n".$message;
  send_mail($to, $body, $email, $filepath, $filename);
}
// Вспомогательная функция для отправки почтового сообщения с вложением
function send_mail($to, $body, $email, $filepath, $filename)
{
  $subject = 'HR 2019';
  $boundary = "--".md5(uniqid(time())); // генерируем разделитель
  $headers = "From: ".$email."\r\n";   
  $headers .= "MIME-Version: 1.0\r\n";
  $headers .="Content-Type: multipart/mixed; boundary=\"".$boundary."\"\r\n";
  $multipart = "--".$boundary."\r\n";
  $multipart .= "Content-type: text/plain; charset=\"utf-8\"\r\n";
  $multipart .= "Content-Transfer-Encoding: quoted-printable\r\n\r\n";
  $body = $body."\r\n\r\n";
  $multipart .= $body;
  $file = '';
  if ( !empty( $filepath ) ) {
    $fp = fopen($filepath, "r");
    if ( $fp ) {
      $content = fread($fp, filesize($filepath));
      fclose($fp);
      $file .= "--".$boundary."\r\n";
      $file .= "Content-Type: application/octet-stream\r\n";
      $file .= "Content-Transfer-Encoding: base64\r\n";
      $file .= "Content-Disposition: attachment; filename=\"".$filename."\"\r\n\r\n";
      $file .= chunk_split(base64_encode($content))."\r\n";
    }
  }
  $multipart .= $file."--".$boundary."--\r\n";
    mail($to, $subject, $multipart, $headers);
}
?>

Без Jquery все работает нормально, но когда подключаю Jquery, форма не отправляется на мою почту. Также у меня есть еще одна форма, которая тоже работает на sweetalert2, я просто скопировал его скрипт и поставил поменяв ID и файл обработчик. Помогите решить проблему!

READ ALSO
Как получить json из post-запроса

Как получить json из post-запроса

Есть 2 файлаПервый обращается ко второму методом post и передает json

179
Выбор номера телефона из входящих вызовов

Выбор номера телефона из входящих вызовов

Есть метод с выбором контакта из списка контактов:

319
Динамическое создание фрагментов

Динамическое создание фрагментов

У меня появилась задача такого плана: Нужно создавать фрагменты в соответствие с количеством элементов, пришедших с сервераСкажем, я получил...

112
@Component-annotation Spring

@Component-annotation Spring

Для каких именно классов используется аннотация @Component?

228