За последние 24 часа нас посетили 30526 программистов и 1754 робота. Сейчас ищут 968 программистов ...

javaScript как обрабатывать формы и выводить подсказки

Тема в разделе "JavaScript и AJAX", создана пользователем _ne_scaju_, 1 июл 2017.

  1. _ne_scaju_

    _ne_scaju_ Старожил

    С нами с:
    25 ноя 2016
    Сообщения:
    2.149
    Симпатии:
    118
    Всем привет, вы наверное знаете как динамически без перезагрузки страницы оповестить об успешной или ошибочной обработки формы, например вывести что произошла ошибка, поле не заполнено и т.д.
    Вот я хочу узнать как это все делается, php знаю на уровне новичка с javaScript когда то 2 или 3 функции писал но уже тупо его забыл. Вы бы не могли мне помочь подкрепить знания и порекомендовать что либо и освоится в данном языке. Буду признателен если будете в эту тему кидать свой код с подробным описанием.
     
  2. romach

    romach Старожил

    С нами с:
    26 окт 2013
    Сообщения:
    2.904
    Симпатии:
    719
  3. _ne_scaju_

    _ne_scaju_ Старожил

    С нами с:
    25 ноя 2016
    Сообщения:
    2.149
    Симпатии:
    118
    @romach
    Спасибо, смотреть буду и применять)
    Обрабатывать ошибки могу только при помощи php)))
    --- Добавлено ---
    @romach
    Привет мир уже посмотрел alert я уже понял что выводит сообщения)
     
  4. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.817
    Симпатии:
    1.333
    Адрес:
    Лень
    https://github.com/MouseZver/uaekrpngshr
    только в ajax изменить click AS submit / a.AJAX AS form
    --- Добавлено ---
    немного устарел алгоритм и место filter_var можно использовать filter_input_array
    а в 14 строке надо было -> rowCount() > 0
     
  5. _ne_scaju_

    _ne_scaju_ Старожил

    С нами с:
    25 ноя 2016
    Сообщения:
    2.149
    Симпатии:
    118
    @MouseZver
    а как же обработка ошибок, чтобы ошибка открывалась в этом же окне, что и форма под каждым inputom:
    Например: Введите name юзер не ввел имя и ему под этим input вывелось, вы не ввели имя.
     
  6. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.817
    Симпатии:
    1.333
    Адрес:
    Лень
    Это самому дописывать надо. Тут же учат и помогают чем могут, примерами / по возможности готовыми скриптами. На гитхабе наброски вполне рабочие. Хоть и корявые, смотрю сейчас.
     
  7. _ne_scaju_

    _ne_scaju_ Старожил

    С нами с:
    25 ноя 2016
    Сообщения:
    2.149
    Симпатии:
    118
    @MouseZver
    ты меня не понял, я хожу вывести под каждым input соответствующую ошибку, чтобы стр не перезагружалась, такого можно добиться что ли только ajax или же javascript тоже в помощь? За пример огромное спасибо уже тестирую его.
     
  8. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.817
    Симпатии:
    1.333
    Адрес:
    Лень
    это и есть JS
    AJAX создан для упрощения кодинга
     
  9. _ne_scaju_

    _ne_scaju_ Старожил

    С нами с:
    25 ноя 2016
    Сообщения:
    2.149
    Симпатии:
    118
    @MouseZver
    что правда, ajax и js это один язык что ли, блин мне заморочили голову, в инете... Смотрел инфу кто то объяснял что если хочешь программировать на ajax нужно выучить js то что без него не как( И что ж делать? 10 стр прочитал про js в принципе не чем не отличается от php правда переменные там по другому вводятся ну и вывод данных по другому делается.
     
  10. _ne_scaju_

    _ne_scaju_ Старожил

    С нами с:
    25 ноя 2016
    Сообщения:
    2.149
    Симпатии:
    118
    @MouseZver
    Протестировал пример, и что то мне подсказывает что я не чего не понял в файле ajax.js просто 2 строки расписаны жаль конечно.
    Пойду читать дальше от г до я первую половину прочитал просто :D
     
  11. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.817
    Симпатии:
    1.333
    Адрес:
    Лень
    только что для своего сайта написал
    [​IMG]
    [​IMG]
    [​IMG]
    [​IMG]
    --- Добавлено ---
    Код (Javascript):
    1. $(function ( menu, num_menu, i )
    2. {
    3.     function EngineMenuClose()
    4.     {
    5.         $( '#ACCOUNT-MENU' ).animate({ left: -288 });
    6.    
    7.         setTimeout( function ()
    8.         {
    9.             $( '#ACCOUNT-MENU' ).empty();
    10.        
    11.             menu = false;
    12.         }, 500 );
    13.     }
    14.     $( 'body' ).on( 'mouseenter', '#ENGINE-USER-MENU', function ()
    15.     {
    16.         if ( menu && num_menu != 'USER' )
    17.         {
    18.             EngineMenuClose();
    19.         }
    20.    
    21.         setTimeout( function ()
    22.         {
    23.             if ( menu !== true )
    24.             {
    25.                 menu = true;
    26.                 num_menu = 'USER';
    27.            
    28.                 $( '#ACCOUNT-MENU' ).append(
    29.                     '<div class="U-MENU-PRIMARY">' +
    30.                     '<a class="AVATAR" href="#"><img src="/styles/test/img.jpg"></a>' +
    31.                     '<h3><a href="/u/MouseZver" title="Посмотреть Ваш профиль">MouseZver</a></h3>' +
    32.                     '<div>Активный пользователь</div>' +
    33.                     '<h4><a href="/u/MouseZver">Страница профиля</a></h4>' +
    34.                     '</div>'
    35.                 )
    36.            
    37.                 $( '#ACCOUNT-MENU' ).animate({ left: 10 });
    38.            
    39.             }
    40.         }, 500 );
    41.     })
    42.     .on( 'mouseenter', '#ENGINE-NOTICE-MENU', function ()
    43.     {
    44.         if ( menu && num_menu != 'NOTICE' )
    45.         {
    46.             EngineMenuClose();
    47.         }
    48.    
    49.         setTimeout( function ()
    50.         {
    51.             if ( menu !== true )
    52.             {
    53.                 menu = true;
    54.                 num_menu = 'NOTICE';
    55.            
    56.                 $( '#ACCOUNT-MENU' ).append(
    57.                     '<div class="U-MENU-PRIMARY">' +
    58.                     '<div class="LIST-NOTICES">Капуста</div>' +
    59.                     '</div>'
    60.                 )
    61.            
    62.                 $( '#ACCOUNT-MENU' ).animate({ left: 10 });
    63.            
    64.             }
    65.         }, 500 );
    66.     })
    67.  
    68.     if ( menu )
    69.     {
    70.         $( document ).mousedown( function ( e )
    71.         {
    72.             EngineMenuClose();
    73.         });
    74.    
    75.     }
    76.     $( 'body' ).on( 'submit', 'form', function ( e )
    77.     {
    78.         e.preventDefault();
    79.    
    80.         var obj = new FormData( $( this ).get(0) );
    81.    
    82.         $.ajax(
    83.         {
    84.             url: $( this ).attr( 'action' ),
    85.             type: $( this ).attr( 'method' ),
    86.             contentType: false,
    87.             processData: false,
    88.             data: obj,
    89.             dataType: 'JSON',
    90.             success: function ( json )
    91.             {
    92.            
    93.                 if ( json.REDIRECT != undefined )
    94.                 {
    95.                     window.location.href = json.REDIRECT;
    96.                 }
    97.                 if ( json.MSGERROR != undefined )
    98.                 {
    99.                     $( '.errorPanel' ).remove();
    100.                
    101.                     $( '.RAY_WRAPPER_REGISTER' ).prepend( '<div class="errorPanel"></div>' );
    102.                
    103.                     i = 1;
    104.                
    105.                     $.each( json.MSGERROR, function ( index, value )
    106.                     {
    107.                         $( '.errorPanel' ).append( '<p>' + i++ + ') ' + value + '</p>' );
    108.                     });
    109.                 }
    110.             }
    111.         });
    112.     });
    113. });
    --- Добавлено ---
    PHP:
    1. <?php
    2.  
    3. namespace Page\register;
    4.  
    5. use Application\System\Mouse\SQL;
    6.  
    7. class init extends \Engine
    8. {
    9.  
    10.     public static function StaticInit()
    11.     {
    12.         self::$DOCUMENT_STYLE = 'register';
    13.      
    14.         self::_( 'SET_PAGE_TITLE', self::$RAY['PAGE']['register']['TITLE'] );
    15.      
    16.         if ( $_SERVER['REQUEST_METHOD'] == 'POST' )
    17.         {
    18.             header ( 'Content-type: application/json' );
    19.          
    20.             self::RegisterAccount();
    21.         }
    22.         else
    23.         {
    24.             setcookie ( 'REGISTER', $_SERVER['REQUEST_TIME'] );
    25.         }
    26.     }
    27.     public static function RegisterAccount()
    28.     {
    29.         $ARGS = [
    30.             'username' => [
    31.                 'filter' => FILTER_VALIDATE_REGEXP,
    32.                 'options' => [
    33.                     'regexp' => '/^[A-Za-z0-9_-]{3,25}$/'
    34.                 ]
    35.             ],
    36.             'email' => FILTER_VALIDATE_EMAIL,
    37.             'password' => FILTER_UNSAFE_RAW,
    38.             'confirm_password' => FILTER_UNSAFE_RAW
    39.         ];
    40.      
    41.         $INPUTS = filter_input_array ( INPUT_POST, $ARGS );
    42.      
    43.         $E = [];
    44.      
    45.         if ( $INPUTS['username'] === FALSE || $INPUTS['username'] === NULL )
    46.         {
    47.             if ( $INPUTS['username'] === NULL )
    48.             {
    49.                 $E['username'] = 'Undefined username :(';
    50.             }
    51.             else
    52.             {
    53.                 $E['username'] = 'Пожалуйста, введите имя, содержащее от 3-х до 25 латинских символов.';
    54.             }
    55.         }
    56.         elseif ( SQL::P( 'SELECT ID FROM USRACCOUNT WHERE lower ( USERNAME ) = ?', [ strtolower ( $INPUTS['username'] ) ] ) -> rowCount() > 0 )
    57.         {
    58.             $E['username'] = 'Введенное имя уже используется.';
    59.         }
    60.         if ( $INPUTS['email'] === FALSE || $INPUTS['email'] === NULL )
    61.         {
    62.             if ( $INPUTS['email'] === NULL )
    63.             {
    64.                 $E['email'] = 'Undefined email :(';
    65.             }
    66.             else
    67.             {
    68.                 $E['email'] = 'Адрес электронной почты должен быть валидным.';
    69.             }
    70.         }
    71.         elseif ( SQL::P( 'SELECT ID FROM USRACCOUNT WHERE lower ( EMAIL ) = ?', [ strtolower ( $INPUTS['email'] ) ] ) -> rowCount() > 0 )
    72.         {
    73.             $E['email'] = 'Введенная почта уже используется.';
    74.         }
    75.         if ( $INPUTS['password'] === NULL || empty ( $INPUTS['password'] ) )
    76.         {
    77.             if ( $INPUTS['password'] === NULL )
    78.             {
    79.                 $E['password'] = 'Undefined password :(';
    80.             }
    81.             else
    82.             {
    83.                 $E['password'] = 'Пожалуйста, введите пароль.';
    84.             }
    85.         }
    86.         elseif ( $INPUTS['password'] != $INPUTS['confirm_password'] )
    87.         {
    88.             $E['password'] = 'Введенные пароли не совпадают.';
    89.         }
    90.      
    91.         # errors count
    92.        if ( count ( $E ) == 0 )
    93.         {
    94.             SQL::P( 'INSERT INTO USRACCOUNT ( USERNAME, EMAIL, PASSWORD, STATUS, DATAREG, LASTONLINE ) VALUES ( ?,?,?,?,?,? )',
    95.             [
    96.                 $INPUTS['username'],
    97.                 $INPUTS['email'],
    98.                 password_hash ( $INPUTS['password'], PASSWORD_DEFAULT ),
    99.                 1,
    100.                 $_SERVER['REQUEST_TIME'],
    101.                 $_SERVER['REQUEST_TIME']
    102.             ] );
    103.          
    104.             $UID = SQL::lastInsertId();
    105.             $SID = md5 ( $UID . $_SERVER['REQUEST_TIME'] . $_SERVER['REMOTE_ADDR'] );
    106.          
    107.             SQL::P( 'INSERT INTO SESSREM ( SID, UID, TIMEOUT ) VALUES ( ?,?,? )',
    108.             [
    109.                 $SID,
    110.                 $UID,
    111.                 strtotime ( '+30 day' )
    112.             ] );
    113.          
    114.             echo self::_( 'JSON', [ 'REDIRECT' => '/?' . $INPUTS['username'] ] );
    115.         }
    116.         else
    117.         {
    118.             echo self::_( 'JSON', [ 'MSGERROR' => $E ] );
    119.         }
    120.      
    121.         exit;
    122.      
    123.     }
    124. }
    --- Добавлено ---
    75 строке место empty
    === FALSE
    --- Добавлено ---
    а не... все правильно.. string(0) '' возращает
     
    #11 MouseZver, 2 июл 2017
    Последнее редактирование: 2 июл 2017
    _ne_scaju_ нравится это.
  12. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.817
    Симпатии:
    1.333
    Адрес:
    Лень
    Код (Text):
    1. Лимит времени (20 мин.) на редактирование этого сообщения истёк.
    нееееее:eek: там условия переделать нид :D
    --- Добавлено ---
    Код (Text):
    1. 1) Undefined username :(
    2.  
    3. 2) Undefined email :(
    4.  
    5. 3) Undefined password :(
     
    _ne_scaju_ нравится это.
  13. _ne_scaju_

    _ne_scaju_ Старожил

    С нами с:
    25 ноя 2016
    Сообщения:
    2.149
    Симпатии:
    118
    @MouseZver
    Классный код, мне твой стиль программирования нравится) в данный момент для меня, код где понятен где нет, и затрудняюсь его легко читать) особенно js, ajax. За попытку мне помочь, спасибо)
     
  14. _ne_scaju_

    _ne_scaju_ Старожил

    С нами с:
    25 ноя 2016
    Сообщения:
    2.149
    Симпатии:
    118
    я думал тут на форуме много кто знает JS. Объясните мне в чем разница ajax и JavaScript???
     
  15. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    если просто, то ajax это технология, есть разные реализации, одна из них это "библиотека" XMLHttpRequest доступная из javascript, ещё есть fetch например, вот JQuery сделали удобную обёртку над XMLHttpRequest
     
  16. _ne_scaju_

    _ne_scaju_ Старожил

    С нами с:
    25 ноя 2016
    Сообщения:
    2.149
    Симпатии:
    118
    @denis01
    чтобы вывести подсказку в форме чтобы новая стр не открывалась, можно с помощью JS?
     
  17. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    @_ne_scaju_ да, можно. Но обычно от сервера запрашивают только те подсказки, которые нельзя проверить на клиенте, например свободен ли логин или используется на сайте уже такая почта, всё дублировать на сервере обязательно.
     
  18. _ne_scaju_

    _ne_scaju_ Старожил

    С нами с:
    25 ноя 2016
    Сообщения:
    2.149
    Симпатии:
    118
    @denis01
    На php я знаю как вывести эти подсказки делаю запрос и потом делаю проверку, а с js + php как можно все это оперировать вместе?
     
  19. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    @_ne_scaju_ тебе нужно отследить изменение в input,
    есть onchange или onkeyup + лучше задержку делать,
    как данные в форме изменились, то ты делаешь запрос в PHP с передачей данных, проверяешь и возвращаешь результат проверки, например в json так как его в PHP легко составить и прочитать в js, на основе результата в js показываешь сообщение, можно сделать видимым div с сообщением например
     
  20. _ne_scaju_

    _ne_scaju_ Старожил

    С нами с:
    25 ноя 2016
    Сообщения:
    2.149
    Симпатии:
    118
    @denis01
    мне бы увидеть как взаимодействует JS с php и формой на самом элементарном примере, чтобы я понял)
     
  21. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
  22. _ne_scaju_

    _ne_scaju_ Старожил

    С нами с:
    25 ноя 2016
    Сообщения:
    2.149
    Симпатии:
    118
    @denis01
    Спасибо, сейчас взгляну.
    --- Добавлено ---
    @denis01
    протестировал) но не понял принцип работы, из-за того что вы выводите все в var_damp();
    я увидел только то что без перезагрузки страницы приходят данные) и это именно то что я хочу)))
     
  23. _ne_scaju_

    _ne_scaju_ Старожил

    С нами с:
    25 ноя 2016
    Сообщения:
    2.149
    Симпатии:
    118
    @denis01
    можно задам не скромный вопрос, написал регистрацию, с полями login, email, pass. Но теперь решил добавить еще поля пол человека, дату рождения. В чем суть заключается, я в базе дату рождения разделил на три поля day, month, year и а HTML названия месяцев я записываю так:
    HTML:
    1.  
    2. <select id="month" name="month" class="">
    3. <option>Месяц рождения</option><option value="1">Января</option><option value="2">Февраля</option><option value="3">Марта</option><option value="4">Апреля</option>
    4. <option value="5">Мая</option><option value="6">Июня</option><option value="7">Июля</option><option value="8">Августа</option><option value="9">Сентября</option>
    5. <option value="10">Октября</option><option value="11">Ноября</option><option value="12">Декабря</option>
    6.  
    Как можно уменьшить эту писанину? решения было вот такое:
    PHP:
    1. for(i=0; i<=12; i++){
    2. echo i;
    3. }
    но мне не подходит так как выводятся одни цифры а надо названия месяца выводить пробовал массив месяцев сделать но не получилось у меня... Как это организовать правильно?
     
  24. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    Можно в базе хранить в одном столбце, есть же datetime.

    Массив и цикл, так что направление правильное

    PHP:
    1. <?php
    2. $days = ['Пн', 'Вт', 'Ср',];
    3.  
    4. foreach($days as $key => $day) {
    5. ?>
    6. <option value="<?=$key?>"><?=$day?></option>
    7. <?php
    8. }
    так var_dump просто помогает выводить массив, https://secure.php.net/manual/ru/language.types.array.php
     
    _ne_scaju_ нравится это.
  25. _ne_scaju_

    _ne_scaju_ Старожил

    С нами с:
    25 ноя 2016
    Сообщения:
    2.149
    Симпатии:
    118
    @denis01
    я знаю что можно в datetime хранить, я просто решил так хранить день рождения)
    я такой массив создавал но хотел вывести через for но не получалось(, точно foreach массивчик вывести можно, отлично буду пробовать так сделать спасибо) а на счет года так же сделать? Я вывожу его от 1940 до 2017 и все это в ручную по принципу месяца делал, но запись получается еще больше, тоже как то через foreach или же как то через for() можно сделать и как лучше вывести?