Калькуляторы и формы для сайтов
0 Пользователей и 1 Гость просматривают эту тему.
  • 26 Ответов
  • 636 Просмотров
*

dialit

  • Осваиваюсь на форуме
  • 70
  • 1
Задачка
« : 31.08.2016, 03:30:13 »
Ребят, есть ли тут решение

Имеется скрытый индикатор загрузки:
Спойлер
[свернуть]

который появляется при нажатии на кнопку "Отправить"  (type="submit")
Спойлер
[свернуть]

Необходимо:
Если прикреплен файл (input type="file")  - показать индикатор,
Если файл не прикреплялся - индикатор не показываем.

При удачном итоге готов заплатить за работу :D ::)
*

Shustry

  • Группа развития
  • 6430
  • 735
  • Рисую дизайны
Re: Задачка
« Ответ #1 : 31.08.2016, 04:26:32 »
Переделайте заголовок на информативный.

Как-то так (jQuery):

Код: javascript
if ($("#fileinput").val() == '') {
   $("#btn").click(function() {
      return false;
   });
}
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

dialit

  • Осваиваюсь на форуме
  • 70
  • 1
Re: Задачка
« Ответ #2 : 31.08.2016, 09:45:38 »
Объясните подробнее, что делать)
*

b2z

  • Support Team
  • 7469
  • 742
  • Разраблю понемногу
*

dialit

  • Осваиваюсь на форуме
  • 70
  • 1
Re: Задачка
« Ответ #4 : 31.08.2016, 12:42:10 »
Изучать JS :) И показать полный HTML загрузки файла.
С трудом дается этот JS :)

Вот полный HTML:
Спойлер
[свернуть]

В данном случае, допустим, если клиент заполняет все поля и НЕ прикрепляет файл, при нажатии "Отправить заявку" появляется индикатор который не должен появлятся
*

b2z

  • Support Team
  • 7469
  • 742
  • Разраблю понемногу
Re: Задачка
« Ответ #5 : 31.08.2016, 13:38:08 »
Попробуйте так

Код: javascript
function showProcessing(){
if (document.getElementById('Loadarea').value != '') {
document.getElementById('loading').style.display = 'block';
}
}
*

dialit

  • Осваиваюсь на форуме
  • 70
  • 1
Re: Задачка
« Ответ #6 : 31.08.2016, 14:00:11 »
Попробуйте так

Код: javascript
function showProcessing(){
if (document.getElementById('Loadarea').value != '') {
document.getElementById('loading').style.display = 'block';
}
}
Работает!

зайдите в личку
*

dialit

  • Осваиваюсь на форуме
  • 70
  • 1
Re: Задачка
« Ответ #8 : 31.08.2016, 16:49:51 »
Задачка+
установил форму заказа с данным кодом в всплывающее окно, перестал работать индикатор при нажатии кнопки "Отправить"
*

b2z

  • Support Team
  • 7469
  • 742
  • Разраблю понемногу
*

dialit

  • Осваиваюсь на форуме
  • 70
  • 1
Re: Задачка
« Ответ #10 : 31.08.2016, 17:14:51 »
в консоли ошибок нет, чисто
*

icom

  • Живу я здесь
  • 804
  • 182
Re: Задачка
« Ответ #11 : 31.08.2016, 17:20:07 »
в консоли ошибок нет, чисто
скорее всего всплывающее окно дублирует контент и document.getElementById('loading') уже не работает
*

b2z

  • Support Team
  • 7469
  • 742
  • Разраблю понемногу
Re: Задачка
« Ответ #12 : 31.08.2016, 17:25:46 »
скорее всего всплывающее окно дублирует контент и document.getElementById('loading') уже не работает

Почти так - ТС показал сайт, у него там несколько Loadarea ;) Нужно давать уникальный ID элементам, например LoadareaModal. Ну и в JS поменять.
*

dialit

  • Осваиваюсь на форуме
  • 70
  • 1
Re: Задачка
« Ответ #13 : 31.08.2016, 17:44:20 »
Цитировать
Почти так - ТС показал сайт, у него там несколько Loadarea ;) Нужно давать уникальный ID элементам, например LoadareaModal. Ну и в JS поменять.
Точно!
Сейчас исправим
*

icom

  • Живу я здесь
  • 804
  • 182
Re: Задачка
« Ответ #14 : 31.08.2016, 17:47:45 »
Почти так - ТС показал сайт, у него там несколько Loadarea ;) Нужно давать уникальный ID элементам, например LoadareaModal. Ну и в JS поменять.
лучше так
Код
<script type="text/javascript">
jQuery(function($){  
        $('.submit-button').on('click', function(){
                var main_b = $(this).parents('.loadarea_wr');

                if (main_b.find('.Loadarea').val()!= '') {
                        main_b.find('.loading').show('fast');
                }
        });
});
</script>

<!--  таких блоков может быть сколько угодно на странице   -->
<div class="loadarea_wr">
        <div class="block-loadarea">
                Прикрепить файл<br/><input type="file" name="form[Loadarea]" class="Loadarea" />      
                <div class="loading" style="display: none">Файл загружается, подождите...<img src="/images/a-loader.gif"/></div>
        </div>

 
        <!-- Кнопка отправки   -->
        <div class="block-send">      
                <button type="submit" name="form[send]" class="submit-button">Отправить заявку</button>      
        </div>
</div>
*

zomby6888

  • Живу я здесь
  • 1484
  • 167
Re: Задачка
« Ответ #15 : 31.08.2016, 19:24:18 »
Цитировать
лучше так

Не убедили
интернет-блог: http://websiteprog.ru
*

zomby6888

  • Живу я здесь
  • 1484
  • 167
Re: Задачка
« Ответ #17 : 31.08.2016, 19:27:51 »
А какой смысл в том чтобы перелопатить весь dom в поисках одного единственного элемента вместо того чтобы выбрать его по ИД ( который как бы должен быть уникален по своей сути и назначению). К тому же пример был без jquery.
интернет-блог: http://websiteprog.ru
*

icom

  • Живу я здесь
  • 804
  • 182
Re: Задачка
« Ответ #18 : 31.08.2016, 19:33:57 »
Цитировать
который как бы должен быть уникален по своей сути и назначению)

Цитировать
скорее всего всплывающее окно дублирует контент и document.getElementById('loading') уже не работает
*

zomby6888

  • Живу я здесь
  • 1484
  • 167
Re: Задачка
« Ответ #19 : 31.08.2016, 19:51:01 »
Ну тут конечно по ситуации нужно смотреть. Может вы и правы в данном конкретном примере. Если нужно выбрать элемент в модальном окне то у окна наверное тоже должен быть какой то идентификатор. Тогда может лучше будет выбрать через $('#modal .className') элемент. Надо же минимизировать затраты.

Вы наверное не в курсе но метод parents перебирает всех родителей в dom. Вместо него лучше использовать метод closest который возвращает коллекцию до ближайшего элемента указанного в селекторе:

https://api.jquery.com/closest/#closest-element

« Последнее редактирование: 31.08.2016, 20:12:01 от zomby6888 »
интернет-блог: http://websiteprog.ru
*

icom

  • Живу я здесь
  • 804
  • 182
Re: Задачка
« Ответ #20 : 31.08.2016, 20:08:00 »
Ну тут конечно по ситуации нужно смотреть. Может вы и правы в данном конкретном примере. Если нужно выбрать элемент в модальном окне то у окна наверное тоже должен быть какой то идентификатор. Тогда может лучше будет выбрать через $('#modal .className) элемент.
может, спорить не буду, сам сайт не видел
*

dialit

  • Осваиваюсь на форуме
  • 70
  • 1
Re: Задачка
« Ответ #21 : 31.08.2016, 21:59:13 »
тему перенесли сюда, в конструкторы RSForm
т.к изначально задачу решал для этого компонента


p/s
ProgressBar для RSForm
Прогрессбар для RSForm
Индикатор загрузки файлов для RSForm



как итог,  допилил форму заказа, заскринил, все получилось yes!
https://yadi.sk/i/BZNdwidPueppV

всем спасибо!
« Последнее редактирование: 01.09.2016, 04:00:29 от dialit »
*

dialit

  • Осваиваюсь на форуме
  • 70
  • 1
Re: Задачка
« Ответ #22 : 12.09.2016, 01:17:15 »
Использую плагин модальных окон- s5 box.
Под каждый раздел сайта использую индивидуальную форму заказа, соотвественно формы заказа "всплывают" в модальном окне.
Вопрос в том, что этот плагин генерирует содержимое всех форм в одну страницу, это если просмотреть код страницы

Подскажите есть ли такой плагин модальных окон, чтобы содержимое подгружалось только по вызову, допустим, жмем кнопку - Заказать сейчас, открывается модалка (при этом подгружается содержимое формы)

Зачем, спросите вы, а фиг знает зачем.... Может так и оставить?
просто большая портянка кода получается если все формы задействую, а их будет много
« Последнее редактирование: 12.09.2016, 01:25:48 от dialit »
*

beliyadm

  • Профи
  • 8368
  • 1527
  • Севастополь == Россия
Re: Задачка
« Ответ #23 : 12.09.2016, 01:29:13 »
Подскажите есть ли такой плагин модальных окон, чтобы содержимое подгружалось только по вызову, допустим, жмем кнопку - Заказать сейчас, открывается модалка (при этом подгружается содержимое формы)
формы всякие нужны...
В общем так как вы описываете и работает любой разраб - есть форма, нужно передать её в Lightbox - пишется 3 строки кода и все. По клику на кнопке "хочу" показывается Lightbox с формой.
Что у вас там за дикое дублирование - не пойму.
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

dialit

  • Осваиваюсь на форуме
  • 70
  • 1
Re: Задачка
« Ответ #24 : 12.09.2016, 01:56:10 »
а я все понял и разобрался, beliyadm жирный плюс вам

The S5 Box allows you to display any module in lightbox style popup activated by a class name

тут модульно все) и вызывается окна по классу)
осталось только модули разбросать по страницам

*

beliyadm

  • Профи
  • 8368
  • 1527
  • Севастополь == Россия
Re: Задачка
« Ответ #25 : 12.09.2016, 02:01:34 »
а я все понял и разобрался, beliyadm жирный плюс вам
Тут плюс вам, я ни словом не помог, лишь хотел направить читать доки по используемому скрипту. И бац - у вас получилось самостоятельно - это идельный пост на форуме! :)
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

dialit

  • Осваиваюсь на форуме
  • 70
  • 1
Re: Задачка
« Ответ #26 : 12.09.2016, 02:08:32 »
вот этим :)
... дикое дублирование....

теперь порядок я спокоен :)

Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться