Всплывающее окно при отправке формы ниндзя с Javascript, если в форме есть ошибки - PullRequest
Новая
       20

Всплывающее окно при отправке формы ниндзя с Javascript, если в форме есть ошибки

1 голос
/ 18 февраля 2020

У меня есть пользовательское всплывающее сообщение в моей форме ниндзя, которое позволяет пользователю знать, что форма обрабатывается. Целью этого является предотвращение дублирования представлений пользователем, отправляющих несколько раз. На странице моей формы запущен скрипт на Wordpress.

Скрипт запускает 'onClick', но это вызывает проблемы, если пользователь пропускает обязательное поле. Сгенерировано сообщение об ошибке, но всплывающее окно не позволяет пользователю вернуться назад и внести изменения. Есть ли лучшее действие для запуска сценария, который предотвращает это? 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<!-- include BlockUI -->
<script src="/js/jquery.blockUI.js' "></script>
<script type="text/javascript"> 
    // unblock when ajax activity stops 
    $('.nf-form').on( 'submitResponse', function() { $.unblockUI(); }); 

    $(document).on('click', '#nf-field-354', function() {
   $.blockUI( { 
       message: '<h3>Please Wait While Your Registration Submits</h3><p>(We know, we don\'t like to wait either)</p>',
       css: {
            padding:    '15px',
            'text-align': 'center',
            color:      '#212121',
            border:     'none',
            backgroundColor:'rgba(255, 255, 255, 0.9)',
            cursor:     'wait',
            '-webkit-border-radius':'3px',
            '-moz-border-radius':   '3px',
            'border-radius':        '3px'
        } } );
});
</script>

1 Ответ

0 голосов
/ 07 марта 2020

Я нашел другое решение проблемы, изменив стиль кнопки Отправить, как только значение изменится на «Обработка». Это не требует JS и, хотя на нем нет всплывающего сообщения или серого экрана, оно не позволяет пользователю отправлять несколько экземпляров одной и той же формы. Я добавил эту строку в свою таблицу стилей: 

/* Ninja Forms Processing Hack */

 input[value="Processing"], input[value="Processing"]:hover {
   user-select : none !important; 
   -moz-user-select : none !important;
   -webkit-user-select : none !important;
 pointer-events: none !important;
 opacity: .5 !important; }

Пометка каждой строки !important может не потребоваться. Я просто хотел убедиться, что он имеет приоритет в стиле страницы. Функциональность зависит от pointer-events, что предотвращает щелчок элемента. Обратите внимание, что использование этого предотвращает любое пользовательское оформление курсора.

...