2

имеется файл forma.php где находится HTML форма, скрипт на PHP который должен принимать данные с AJAX методом POST и также валидации для форми на JavaScript данные c формы должен отправлять AJAX на обработку в PHP но переменные пустые, данные с AJAX не доходят или с форми в AJAX , подскажите пожалуйста, где здесь ошибка, заранее благодарю!

P.S. самая валидация работает, данные до нажатия 'Отправить' были внесение коректно.

forma.php

<?php
    if(isset($_POST['submit-form'])){
    $errors = array();
       if(empty($_POST['title'])){$errors[] = "Пожалуйста, введите названия";}
       else{$title = clean($_POST['title']);}
       if(empty($_POST['des'])){$errors[]= "Пожалуйста, введите описания";}
       else{$ingredients = clean($_POST['des']);}   
       if(empty($_POST['des2'])){$errors[] = "Пожалуйста, введите описания 2";}
       else{$directians = clean($_POST['des']);}
       if(empty($_POST['img'])){$errors[] = "Пожалуйста, вставте ссылку на изображения";}
       else{$img = clean($_POST['img']);}
    ....

HTML форма внутри файла "forma.php"

...

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/validation.js"></script>
...

<main class="content">
    <form id="feedback-form" action="#" method="Post">
        *Назва:<br>
    <input id="title" type="text" name="title" class="input_title">
    <div class="error-box">&nbsp;</div><br><br>
        *URL Image: <br>
    <input id="input_img", type="text" name="img" class="input_img">
    <div class="error-box">&nbsp;</div><br><br>
        *Описания: <br>
    <textarea id="des" rows="10" cols="45" name="des"</textarea>
    <div class="error-box">&nbsp;</div><br><br>
        *Описания 2: <br>
    <textarea id="des2" rows="10" cols="45" name="des2"></textarea>
    <div class="error-box">&nbsp;</div><br>
<input type="submit" name="submit-form" value="Отправить"  class="button15" id="button15">
<br>
</form>
</main>

validation.js // AJAX

 $(document).ready(function(){

     // Устанавливаем обработчик потери фокуса для всех полей ввода текста
     $('input#title, input#input_img, textarea#des, textarea#des2').unbind().blur( function(){

        // Для удобства записываем обращения к атрибуту и значению каждого поля в переменные 
         var id = $(this).attr('id');
         var val = $(this).val();

       // После того, как поле потеряло фокус, перебираем значения id, совпадающее с id данного поля
       switch(id)
       {

             // Проверка поля "Имя"
             case 'title':
                var rv_title = /^[a-zA-Zа-яА-Я]+$/; // используем регулярное выражение

                // Eсли длина имени больше 2ух символов, оно не пустое и удовлетворяет рег. выражению,
                // то добавляем этому полю класс .not_error,
                // и ниже в контейнер для ошибок выводим слово "Принято", т.е. валидация для этого поля пройдена успешно

                if(val.length > 2 && val != '' && rv_title.test(val))
                {
                   $(this).addClass('ttt').css('background', 'rgb(250, 255, 189)');
                   $(this).addClass('not_error');
                   $(this).next('.error-box').text('Принято')
                                             .css('color','green')
                }

              // Иначе, мы удаляем класс not-error, и заменяем его на класс error, говоря о том что поле содержит ошибку валидации,
              // и ниже в наш контейнер выводим сообщение об ошибке и параметры для верной валидации

                else
                {
                   $(this).addClass('ttt').css('background', '#FFCFCF');
                   $(this).removeClass('not_error').addClass('error');
                   $(this).next('.error-box').html('&bull; поле "Назва" обовязкове для заповнення<br> &bull; довжина назви повина становити не менше двох символів')
                                              .css('color','red')

                }
            break;

                          // Проверка поля "Сообщение"
          case 'input_img':
              var rv_url_img = /https?\:\/\//;

              if(val.length > 2 && val != '' && rv_url_img.test(val))
              {
                 $(this).addClass('ttt').css('background', 'rgb(250, 255, 189)');
                 $(this).addClass('not_error');
                 $(this).next('.error-box').text('Принято')
                                           .css('color','green')
              }
              else
              {
                 $(this).addClass('ttt').css('background', '#FFCFCF');
                 $(this).removeClass('not_error').addClass('error');
                 $(this).next('.error-box').html('&bull; поле повино начитатися з "http://" <br> &bull; поле "URL Image" обовязкове для заповнення')
                                           .css('color','red')
              }
          break;

                        // Проверка поля "Сообщение"
          case 'des':
              if(val != '' && val.length < 5000)
              {   
                 $(this).addClass('ttt').css('background', 'rgb(250, 255, 189)');
                 $(this).addClass('not_error');
                 $(this).next('.error-box').text('Принято')
                                           .css('color','green')

              }
              else
              {  
                 $(this).addClass('ttt').css('background', '#FFCFCF');
                 $(this).removeClass('not_error').addClass('error');
                 $(this).next('.error-box').html('&bull; поле "Інгредієнти" обовязкове для заповнення')
                                           .css('color','red')
              }
          break;

                                      // Проверка поля "Сообщение"
          case 'des2':
              if(val != '' && val.length < 5000)
              {   
                 $(this).addClass('ttt').css('background', 'rgb(250, 255, 189)');
                 $(this).addClass('not_error');
                 $(this).next('.error-box').text('Принято')
                                           .css('color','green')

              }
              else
              {  
                 $(this).addClass('ttt').css('background', '#FFCFCF');
                 $(this).removeClass('not_error').addClass('error');
                 $(this).next('.error-box').html('&bull; поле "Опис" обовязкове для заповнення')
                                           .css('color','red')
              }
          break;


       } // end switch(...)

     }); // end blur()


     // Теперь отправим наше письмо с помощью AJAX
     $('form#feedback-form').submit(function(e){

         // Запрещаем стандартное поведение для кнопки submit
         e.preventDefault();

         // После того, как мы нажали кнопку "Отправить", делаем проверку,
         // если кол-во полей с классов .not_error равно 4(так как у нас всего 3 поля), то есть все поля заполнены верно,
         // выполняем наш Ajax сценарий и отправляем письмо адресату

         if($('.not_error').length == 4)
         {  

            // Eще одним моментов является то, что в качестве указания данных для передачи обработчику send.php, мы обращаемся $(this) к нашей форме,
            // и вызываем метод .serialize().
            // Это очень удобно, т.к. он сразу возвращает сгенерированную строку с именами и значениями выбранных элементов формы.

             $.ajax({
                    url: '#',
                    type: 'POST',
                    data: $(this).serialize(),

                    beforeSend: function(xhr, textStatus){ 
                         $('form#feedback-form :input').attr('disabled','disabled');
                    },

                   success: function(response){
                        $('form#feedback-form :input').removeAttr('disabled');
                        $('form#feedback-form :text, textarea').val('').removeClass().next('.error-box').text('');
                        alert(response);
                   }
            }); // end ajax({...})
        }
        else
        {
          return false;
        }
        // Иначе, если количество полей с данным классом не равно значению 3 мы возвращаем false,
        // останавливая отправку сообщения в невалидной форме


   }); // end submit()


  }); // end script
4
  • Но вы ведь сами можете посмотреть консоль в браузере при отправке - реально ли отправляется что-то или нет, а также сделать на стороне сервера print_r($_POST);...ведь это так просто...... .....или и там и там у вас отображает данные? 29 мая 2016 в 15:19
  • @АлексейШиманский , print_r($_POST); ничего не вывел
    – Kill Noise
    29 мая 2016 в 15:35
  • Соответственно у вас ничего и не отсылается. Соответственно можно включить дебаг в браузере и посмотреть почему 29 мая 2016 в 15:44
  • не могу понять в чем дело :(
    – Kill Noise
    29 мая 2016 в 16:15

2 ответа 2

5

вы же указали url: '#' а нужно было url: 'forma.php', и теперь он передает

$(document).ready(function(){

     // Устанавливаем обработчик потери фокуса для всех полей ввода текста
     $('input#title, input#input_img, textarea#des, textarea#des2').unbind().blur( function(){

        // Для удобства записываем обращения к атрибуту и значению каждого поля в переменные 
         var id = $(this).attr('id');
         var val = $(this).val();

       // После того, как поле потеряло фокус, перебираем значения id, совпадающее с id данного поля
       switch(id)
       {

             // Проверка поля "Имя"
             case 'title':
                var rv_title = /^[a-zA-Zа-яА-Я]+$/; // используем регулярное выражение

                // Eсли длина имени больше 2ух символов, оно не пустое и удовлетворяет рег. выражению,
                // то добавляем этому полю класс .not_error,
                // и ниже в контейнер для ошибок выводим слово "Принято", т.е. валидация для этого поля пройдена успешно

                if(val.length > 2 && val != '' && rv_title.test(val))
                {
                   $(this).addClass('ttt').css('background', 'rgb(250, 255, 189)');
                   $(this).addClass('not_error');
                   $(this).next('.error-box').text('Принято')
                                             .css('color','green')
                }

              // Иначе, мы удаляем класс not-error, и заменяем его на класс error, говоря о том что поле содержит ошибку валидации,
              // и ниже в наш контейнер выводим сообщение об ошибке и параметры для верной валидации

                else
                {
                   $(this).addClass('ttt').css('background', '#FFCFCF');
                   $(this).removeClass('not_error').addClass('error');
                   $(this).next('.error-box').html('&bull; поле "Назва" обовязкове для заповнення<br> &bull; довжина назви повина становити не менше двох символів')
                                              .css('color','red')

                }
            break;

                          // Проверка поля "Сообщение"
          case 'input_img':
              var rv_url_img = /https?\:\/\//;

              if(val.length > 2 && val != '' && rv_url_img.test(val))
              {
                 $(this).addClass('ttt').css('background', 'rgb(250, 255, 189)');
                 $(this).addClass('not_error');
                 $(this).next('.error-box').text('Принято')
                                           .css('color','green')
              }
              else
              {
                 $(this).addClass('ttt').css('background', '#FFCFCF');
                 $(this).removeClass('not_error').addClass('error');
                 $(this).next('.error-box').html('&bull; поле повино начитатися з "http://" <br> &bull; поле "URL Image" обовязкове для заповнення')
                                           .css('color','red')
              }
          break;

                        // Проверка поля "Сообщение"
          case 'des':
              if(val != '' && val.length < 5000)
              {   
                 $(this).addClass('ttt').css('background', 'rgb(250, 255, 189)');
                 $(this).addClass('not_error');
                 $(this).next('.error-box').text('Принято')
                                           .css('color','green')

              }
              else
              {  
                 $(this).addClass('ttt').css('background', '#FFCFCF');
                 $(this).removeClass('not_error').addClass('error');
                 $(this).next('.error-box').html('&bull; поле "Інгредієнти" обовязкове для заповнення')
                                           .css('color','red')
              }
          break;

                                      // Проверка поля "Сообщение"
          case 'des2':
              if(val != '' && val.length < 5000)
              {   
                 $(this).addClass('ttt').css('background', 'rgb(250, 255, 189)');
                 $(this).addClass('not_error');
                 $(this).next('.error-box').text('Принято')
                                           .css('color','green')

              }
              else
              {  
                 $(this).addClass('ttt').css('background', '#FFCFCF');
                 $(this).removeClass('not_error').addClass('error');
                 $(this).next('.error-box').html('&bull; поле "Опис" обовязкове для заповнення')
                                           .css('color','red')
              }
          break;


       } // end switch(...)

     }); // end blur()


     // Теперь отправим наше письмо с помощью AJAX
     $('form#feedback-form').submit(function(e){

         // Запрещаем стандартное поведение для кнопки submit
         e.preventDefault();

         // После того, как мы нажали кнопку "Отправить", делаем проверку,
         // если кол-во полей с классов .not_error равно 4(так как у нас всего 3 поля), то есть все поля заполнены верно,
         // выполняем наш Ajax сценарий и отправляем письмо адресату

         if($('.not_error').length == 4)
         {  

            // Eще одним моментов является то, что в качестве указания данных для передачи обработчику send.php, мы обращаемся $(this) к нашей форме,
            // и вызываем метод .serialize().
            // Это очень удобно, т.к. он сразу возвращает сгенерированную строку с именами и значениями выбранных элементов формы.

             $.ajax({
                    url: 'forma.php',
                    type: 'POST',
                    data: $(this).serialize(),

                    beforeSend: function(xhr, textStatus){ 
                         $('form#feedback-form :input').attr('disabled','disabled');
                    },

                   success: function(response){
                        $('form#feedback-form :input').removeAttr('disabled');
                        $('form#feedback-form :text, textarea').val('').removeClass().next('.error-box').text('');
                        alert(response);
                   }
            }); // end ajax({...})
        }
        else
        {
          return false;
        }
        // Иначе, если количество полей с данным классом не равно значению 3 мы возвращаем false,
        // останавливая отправку сообщения в невалидной форме


   }); // end submit()


  }); // end script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="content">
    <form id="feedback-form" action="#" method="Post">
        *Назва:<br>
    <input id="title" type="text" name="title" class="input_title">
    <div class="error-box">&nbsp;</div><br><br>
        *URL Image: <br>
    <input id="input_img", type="text" name="img" class="input_img">
    <div class="error-box">&nbsp;</div><br><br>
        *Описания: <br>
    <textarea id="des" rows="10" cols="45" name="des"></textarea>
    <div class="error-box">&nbsp;</div><br><br>
        *Описания 2: <br>
    <textarea id="des2" rows="10" cols="45" name="des2"></textarea>
    <div class="error-box">&nbsp;</div><br>
<input type="submit" name="submit-form" value="Отправить"  class="button15" id="button15">
<br>
</form>
</main>

2
  • а почему нельзя '#' использовать ? php и ajax они же находятся в одном файле
    – Kill Noise
    30 мая 2016 в 11:41
  • хотите сказать что ваша форма и php код для обработки данных находятся в файле forma.php? В таком случае у вас response будет возвращать ту же HTML страницу с формой. Ведь так не делается.
    – HELO WORD
    31 мая 2016 в 3:30
1

Смотрите в хром f12 вкладка console что происходит при нажатия.

2
  • Не является ответом на вопрос. Чтобы оставить свои замечания или попросить у автора внести уточнения, оставьте комментарий к соответствующему сообщению. - Из очереди проверок 30 мая 2016 в 6:48
  • Извините не туда писал.
    – mega94
    30 мая 2016 в 13:00

Ваш ответ

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

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