0

Скрипт отправляет данные на сервер при любом раскладе checkbox. Не понимаю в чем может быть проблема.

$("#sendMail").on("click", function() {

  //создаем экземпляр класс FormData, тут будем хранить всю информацию для отправки
  var formData = new FormData();

  //не забывайти проверить поля на заполнение
  //код проверки полей опустим, он к статье не имеет отнашение

  //присоединяем наш файл
  jQuery.each($('#file_v')[0].files, function(i, file) {
    formData.append('file_v', file);
  });

  //присоединяем остальные поля
  let name = $("#name").val().trim();
  let email = $("#email").val().trim();
  let tel = $("#tel").val().trim();
  let number_order = $("#number_order").val().trim();
  let message = $("#message").val().trim();
  let checkbox_check = $("checkbox_check").val();


  /******************************************************/
  if (name === '' || email === '' || tel === '' || number_order === '' || message === '' || checkbox_check === '') {
    alert("Введите обязательные поля");
    return false;
  }

  formData.append('name', name);
  formData.append('email', email);
  formData.append('tel', tel);
  formData.append('number_order', number_order);
  formData.append('message', message);
  /******************************************************/

  //отправляем через ajax
  $.ajax({
    url: "assets/ajax/mail.php",
    type: "POST",
    dataType: "json",
    cache: false,
    contentType: false,
    processData: false,
    data: formData, //указываем что отправляем
    beforeSend: function() {
      $("#form_contact").prop("disable", true);
      $(".petrov").show();

    },
    success: function(data) {
      $("#form_contact").trigger("reset");
      $(".petrov").hide();
      console.log(data);
      alert('Сообщение отправлено!');
      $(".Modal").show();


    }
  });

  return false;
});
<form id="form_contact" action="" method="post" enctype="multipart/form-data" class="contact-one__form">
  <!---->
  <div class="row">
    <div class="col-lg-6">
      <div class="input-box has-feedback nameBlock">
        <label for="name" class="control-label">Имя*</label>
        <input required type="text" id="name" placeholder="Иван Иванов" name="name" value="" class="">
      </div>
    </div>
    <!-- /.col-lg-6 -->
    <div class="col-lg-6">
      <div class="input-box">
        <label for="email" class="control-label">Email-адрес*</label>
        <input required type="email" id="email" placeholder="Email" name="email" value="" class="_req">
      </div>
    </div>
    <!-- /.col-lg-6 -->
    <div class="col-lg-6">
      <div class="input-box">
        <label for="tel" class="control-label">Номер телефона*</label>
        <input required type="tel" id="tel" placeholder="+79997772255" name="tel" value="" class="_req">
      </div>
    </div>
    <!-- /.col-lg-6 -->
    <div class="col-lg-6">
      <div class="input-box">
        <label for="number_order" class="control-label">№ заказа*</label>
        <input required id="number_order" type="text" placeholder="0000000-я00" name="number_order" value="" class="_req">
      </div>
    </div>
    <!-- /.col-lg-6 -->
    <div class="col-lg-12">
      <div class="input-box">
        <label for="message" class="control-label">Сообщение*</label>
        <textarea required class="_req" id="message" name="message" placeholder="Сообщение" class="_req">
                                        </textarea>
      </div>
    </div>
    <!-- /.col-lg-12 -->
    <div class="col-lg-12">
      <div class="file">
        <div class="file__item">
          <input type=file id="file_v" name="file_v" accept="image/*,video/*" class="file__input">
          <div class="file__button">Прикрепить файл</div>
        </div>
        <div id="formPreview" class="file__preview"></div>
      </div>
    </div>
    <div class="col-lg-12">
      <div class="checkbox">
        <input required id="checkbox_check" checked type="checkbox" name="agreement" class="checkbox__input _req">
        <label for="checkbox_check" class="checkbox__label"><span>Я даю согласие на обработку персональных данных в соответствии с <a href="">Условиями</a>*</span></label>
      </div>
    </div>
    <div class="col-lg-12 text-left">
      <br>
      <button id="sendMail" class="main-btn"> Отправить </button>
    </div>
  </div>
</form>

Или не так нужно его проверять?)

1 ответ 1

1

У чекбокса нет знчения val, есть свойство checked. Наверное должно быть так:

let checkbox_check = $("#checkbox_check").prop('checked');

...
if (..... || !checkbox_check) {

На счёт проверки if для checkbox_check не уверен. зачем он нужнен - знаете только вы


Также у селектора вы забыли решётку проставить


$("#sendMail").on("click", function () {

    //создаем экземпляр класс FormData, тут будем хранить всю информацию для отправки
    var formData = new FormData();

    //не забывайти проверить поля на заполнение
    //код проверки полей опустим, он к статье не имеет отнашение

    //присоединяем наш файл
    jQuery.each($('#file_v')[0].files, function(i, file) {
        formData.append('file_v', file);
    });

    //присоединяем остальные поля
    let name = $("#name").val().trim();
    let email = $("#email").val().trim();
    let tel = $("#tel").val().trim();
    let number_order = $("#number_order").val().trim();
    let message = $("#message").val().trim();
   // let checkbox_check = $("checkbox_check").val();

    let checkbox_check = $("#checkbox_check").prop('checked');

    
    if (name === '' || email === '' || tel === '' || number_order === '' || message === '' || !checkbox_check) {
        alert("Введите обязательные поля");
        return false;
    }
    alert('супер!');
    formData.append('name', name);
    formData.append('email', email);
    formData.append('tel', tel);
    formData.append('number_order', number_order);
    formData.append('message', message);
    /******************************************************/

    //отправляем через ajax
    $.ajax({
        url: "assets/ajax/mail.php",
        type: "POST",
        dataType : "json",
        cache: false,
        contentType: false,
        processData: false,
        data: formData, //указываем что отправляем
        beforeSend: function () {
            $("#form_contact").prop("disable", true);
            $( ".petrov").show();

        },
        success: function(data){
            $("#form_contact").trigger("reset");
            $( ".petrov").hide();
            console.log(data);
            alert('Сообщение отправлено!');
            $(".Modal").show();


        }
    });

    return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<form id="form_contact" action="" method="post" enctype="multipart/form-data" class="contact-one__form">  <!---->
<div class="row">
    <div class="col-lg-6">
        <div class="input-box has-feedback nameBlock">
            <label for="name" class="control-label">Имя*</label>
            <input required type="text" id="name" placeholder="Иван Иванов" name="name" value="" class="" >
        </div>
    </div><!-- /.col-lg-6 -->
    <div class="col-lg-6">
        <div class="input-box">
            <label for="email" class="control-label">Email-адрес*</label>
            <input required type="email" id="email" placeholder="Email" name="email" value="" class="_req">
        </div>
    </div><!-- /.col-lg-6 -->
    <div class="col-lg-6">
        <div class="input-box">
            <label for="tel" class="control-label">Номер телефона*</label>
            <input required type="tel" id="tel" placeholder="+79997772255" name="tel" value="" class="_req">
        </div>
    </div><!-- /.col-lg-6 -->
    <div class="col-lg-6">
        <div class="input-box">
            <label for="number_order" class="control-label">№ заказа*</label>
            <input required id="number_order" type="text" placeholder="0000000-я00" name="number_order" value="" class="_req">
        </div>
    </div><!-- /.col-lg-6 -->
    <div class="col-lg-12">
        <div class="input-box">
            <label for="message" class="control-label">Сообщение*</label>
            <textarea required class="_req" id="message" name="message"
            placeholder="Сообщение" class="_req">
            </textarea>
        </div>
    </div><!-- /.col-lg-12 -->
    <div class="col-lg-12">
        <div class="file">
            <div class="file__item">
                <input type=file id="file_v" name="file_v" accept="image/*,video/*" class="file__input">
                <div class="file__button">Прикрепить файл</div>
            </div>
            <div id="formPreview" class="file__preview"></div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="checkbox">
            <input required id="checkbox_check" checked type="checkbox" name="agreement" class="checkbox__input _req">
            <label for="checkbox_check" class="checkbox__label"><span>Я даю согласие на обработку персональных данных в соответствии с <a href="">Условиями</a>*</span></label>
        </div>
    </div>
    <div class="col-lg-12 text-left">
        <br>
        <button id="sendMail" class="main-btn"> Отправить </button>
    </div>
</div>
</form>

8
  • Ну условие if проверяет, есть ли в checkbox что то и если нет то выводит сообщение об обязательном поле. Ваш ответ помог частично, но как все таки сделать проверку что в checkbox есть checked ?) 29 янв 2021 в 10:44
  • 1
    @Sirius_MkLain ответ выше checkbox_check = $("#checkbox_check").prop('checked'). он даст либо true либо false 29 янв 2021 в 10:45
  • if (..... || checkbox_check === false) { так не работает, сообщение не выводит, а вот так как в вашем примере if (..... || !checkbox_check) { При любом раскладе выводит сообщение. 29 янв 2021 в 10:52
  • 1
    @Sirius_MkLain неправда. всё работает. пруф в ответе 29 янв 2021 в 11:00
  • 1
    @Sirius_MkLain код прям один в один? 29 янв 2021 в 11:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.