Несколько форм с файлами ajax

141
13 декабря 2018, 21:40

Что не так? почему не отправляется? пробовал before send подсвечивать незаполненные поля красным, в итоге просто сообщение об успешной отправке (на сайте, а здесь с тем же кодом ошибка), даже если ничего не заполнено

$(document).ready(function () { 
  $("form.vacancies-form").submit(function (e) { 
    e.preventDefault(); 
    var formData = new FormData(this); 
    var formContent = $(this).find('.form-content'); 
    var formTitle = $(this).children('.title'); 
    var successMsg = $(this).children('.success-msg'); 
    var successName = $(this).find('.success-msg .name'); 
 
    $(this).addClass('vacancies-form--success'); 
    formContent.hide(); 
    formTitle.hide(); 
    successMsg.show(); 
    successName.text(formData.get('name')); 
 
    $.ajax({ 
      url: 'sender.php', 
      type: 'POST', 
      data: formData, 
      success: function success(data) { 
        console.log(data); 
        alert('send success'); 
      }, 
      error: function error(data) { 
        console.log('error sending'); 
        formContent.show(); 
        formTitle.show(); 
        successName.text(); 
        successMsg.hide(); 
        $(this).removeClass('vacancies-form--success'); 
      }, 
      cache: false, 
      contentType: false, 
      processData: false 
    }); 
  }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form class="job-form vacancies-form" id="data" enctype="multipart/form-data" action=""> 
   <input type="hidden" name="checked_form" value="Начинающий стоматолог-терапевт"> 
   <div class="title"> 
      <p>Запишитесь на собеседование</p> 
   </div> 
   <div class="success-msg"> 
      <p class="name"></p> 
      <p class="text">Ваша заявка успешно отправлена!</p> 
      <p class="text">Вскоре мы свяжемся с Вами</p> 
   </div> 
   <div class="form-content"> 
      <div class="input-wrap"><span class="input-title">Имя</span> 
         <input class="form-input" type="text" placeholder="" name="name"> 
      </div> 
      <div class="input-wrap"><span class="input-title">Номер телефона</span> 
         <input class="form-input phone" type="text" placeholder="" name="phone"> 
      </div> 
      <label class="file-label"> 
      <input class="file-upload" type="file" placeholder="Прикрепить резюме" name="file[]" value="1" size="40" multiple=""><span>Прикрепить резюме</span> 
      </label> 
      <div class="note"> 
         <p class="text">Отправляя это сообщение, вы соглашаетесь с </p> 
         <a class="link" href="https://klinikajemchujnaya.ru/politika-obrabotki-personalnykh-dannykh" target="_blank">политикой конфиденциальности</a> 
      </div> 
      <button class="btn-md btn btn--accent" type="submit"><span class="btn__text">Отправить</span></button> 
   </div> 
</form> 
 
<form class="job-form vacancies-form" id="data" enctype="multipart/form-data" action=""> 
   <input type="hidden" name="checked_form" value="Опытный  стоматолог-ортопед"> 
   <div class="title"> 
      <p>Запишитесь на собеседование</p> 
   </div> 
   <div class="success-msg"> 
      <p class="name"></p> 
      <p class="text">Ваша заявка успешно отправлена!</p> 
      <p class="text">Вскоре мы свяжемся с Вами</p> 
   </div> 
   <div class="form-content"> 
      <div class="input-wrap"><span class="input-title">Имя</span> 
         <input class="form-input" type="text" placeholder="" name="name"> 
      </div> 
      <div class="input-wrap"><span class="input-title">Номер телефона</span> 
         <input class="form-input phone" type="text" placeholder="" name="phone"> 
      </div> 
      <label class="file-label"> 
      <input class="file-upload" type="file" placeholder="Прикрепить резюме" name="file[]" value="1" size="40" multiple=""><span>Прикрепить резюме</span> 
      </label> 
      <div class="note"> 
         <p class="text">Отправляя это сообщение, вы соглашаетесь с </p> 
         <a class="link" href="https://klinikajemchujnaya.ru/politika-obrabotki-personalnykh-dannykh" target="_blank">политикой конфиденциальности</a> 
      </div> 
      <button class="btn-md btn btn--accent" type="submit"><span class="btn__text">Отправить</span></button> 
   </div> 
</form> 
 
<form class="job-form vacancies-form" id="data" enctype="multipart/form-data" action=""> 
   <input type="hidden" name="checked_form" value="Детский стоматолог"> 
   <div class="title"> 
      <p>Запишитесь на собеседование</p> 
   </div> 
   <div class="success-msg"> 
      <p class="name"></p> 
      <p class="text">Ваша заявка успешно отправлена!</p> 
      <p class="text">Вскоре мы свяжемся с Вами</p> 
   </div> 
   <div class="form-content"> 
      <div class="input-wrap"><span class="input-title">Имя</span> 
         <input class="form-input" type="text" placeholder="" name="name"> 
      </div> 
      <div class="input-wrap"><span class="input-title">Номер телефона</span> 
         <input class="form-input phone" type="text" placeholder="" name="phone"> 
      </div> 
      <label class="file-label"> 
      <input class="file-upload" type="file" placeholder="Прикрепить резюме" name="file[]" value="1" size="40" multiple=""><span>Прикрепить резюме</span> 
      </label> 
      <div class="note"> 
         <p class="text">Отправляя это сообщение, вы соглашаетесь с </p> 
         <a class="link" href="https://klinikajemchujnaya.ru/politika-obrabotki-personalnykh-dannykh" target="_blank">политикой конфиденциальности</a> 
      </div> 
      <button class="btn-md btn btn--accent" type="submit"><span class="btn__text">Отправить</span></button> 
   </div> 
</form>

READ ALSO
Как скрыть форму ajax? [закрыт]

Как скрыть форму ajax? [закрыт]

Использую этот плагин https://jqueryvalidationorg/

152
Не работает slick слайдер

Не работает slick слайдер

Все сделал как в документации, но он почему то не работаетПричем вроде как подключился, но криво

147
Выставить дату конца периода в виджете Date Range Picker

Выставить дату конца периода в виджете Date Range Picker

Выставить дату конца периода по-умолчанию 1 месяц в виджете Date Range Picker

262
Переключатель (кнопка) [закрыт]

Переключатель (кнопка) [закрыт]

Можно ли как то реализовать подобный переключатель с помощью каких то готовых решений jquery? Существуют ли такие? При переключении кнопки (переключателя),...

166