Как разместить несколько HTML форм на одной станице?

Question

[Михаил Миргородский]

Имеется страница категорий товаров joomla+virtuemart, На этой странице в карточку товара я добавил модуль формы, так вот товаров 10 штук на странице, и получается идентичных форм 10 штук.
Вопрос, как сделать, что бы не приходило по 10 писем на почту, а только по одному?

Comments

[WapSter]

Ты там диватозом страдаешь? Я там вообще не нашел тэг form.

[MorganDusty]

а где там собственно форма вызова и почему вам по 10писем приходит?

[Михаил Миргородский]

MorganDusty, Кнопка купить в один клик, открывает форму. Приходит по 10 писем, так как форма на странице 10 раз повторяется одна и та же .

[MorganDusty]

Михаил Миргородский, дак айдишники поменяйте

Answer 1

[exmmth]

Михаил Миргородский, покажите ссылку на сайт, есть отличное решение отечественное для форм joomla Radical form очень гибкое и удобное в использовании.

По поводу сайта вашего, зачем 10 форм на сайте, если проще делать одну форму и кнопку вызова примерно так:

<button class="mt-2 mb-2 btn" type="button" ....
data-toggle="modal" 
data-target="#modal"
data-modal-title="Заголовок в форме"
data-modal-textarea="Описание в форме">Купить в один клик</button>

На js обработать при клике данные data-modal-* и заменить в форме.

$('[data-toggle="modal"]').on('click', function(){
    let form = $($(this).data('target'));
    if(typeof $(this).data('modal-title') !== 'undefined'){
        form.find('.modal-title').html($(this).data('modal-title'));
    }else{
        form.find('.modal-title').html(form.find('.modal-title').data('default'));
    }
    ...
});

а в верстку формы добавляем значение по умолчанию data-default="по умолчанию", там где нужно

<h5 class="modal-title" id="call-category" data-default="Заголовок по умолчанию">...</h5>

Comments

[Михаил Миргородский]

ССылка

[Михаил Миргородский]

Готовые решения не подходят, так как я от них избавляюсь. Они подгружают ненужные мне JS и CSS, по этому я рукописные делаю :)

[exmmth]

Михаил Миргородский, Перейдите, прочитайте про radical form, там как раз задумка была чтобы лишнего не грузилось. За верстку форму отвечаешь сам, плагин отвечает за отправку + там интеграция с телегой есть.
P.S. Ответ дополнил посмотрев сайт.

[Михаил Миргородский]

На js обработать при клике данные data-modal-* и заменить в форме.

Можно пример, я не очень понял как реализовать ?

[exmmth]

Михаил Миргородский, Дополнил ответ js и как в форму верстку добавить.

[Михаил Миргородский]

exmmth, Спасибо ! Протестировал получилось ! Сейчас буду пробовать вставлять в код сайта

[exmmth]

Михаил Миргородский, Пожалуйста! И попробуйте radical form он очень хороший, со своих велосипедов на него перешел.

[Михаил Миргородский]

exmmth, Еще раз спасибо, обязательно попробую

[Михаил Миргородский]

Выполнил вот в таком виде :

<button class="mt-2 mb-2 btn btn-primary" type="button" data-toggle="modal" data-target="#modal" data-whatever="Купить в один клик">Купить в один клик</button>
  <button class="mt-2 mb-2 btn btn-primary" type="button" data-toggle="modal" data-target="#modal" data-whatever="Купить">Купить</button>
  <button class="mt-2 mb-2 btn btn-primary" type="button" data-toggle="modal" data-target="#modal">Test</button>
  <button class="mt-2 mb-2 btn" type="button" data-toggle="modal" data-target="#modal" data-whatever="Ващьпе не покупать">Ващьпе не покупать</button>

  <div class="modal fade" id="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="call-category">testovy</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

jQuery('#modal').on('show.bs.modal', function (event) {
    var button = jQuery(event.relatedTarget) 
    var recipient = button.data('whatever') 
    var modal = jQuery(this)
    modal.find('.modal-title').text(recipient)
  })

Проверяю на js bin всё работает , а вот вношу в joomla эффекта нет, кто может подсказать ?

[exmmth]

Михаил Миргородский, И там и там модальное окно открывается

[Михаил Миргородский]

exmmth, модальное окно то открывается, только скрипт не отрабатывается, не меняется хидер.

[exmmth]

Михаил Миргородский, всё от невнимательности text(...) у вас а должно быть html(...)

[Михаил Миргородский]

Ой, спасибо!

jQuery('#modal').on('show.bs.modal', function (event) {
    var button = jQuery(event.relatedTarget) 
    var recipient = button.data('whatever') 
    var modal = jQuery(this)
    modal.find('.modal-title').html(recipient)
  })

Тоже не работает.

[exmmth]

Михаил Миргородский, Проверяйте что у вас в переменных button, recipient, modal через console.

[Михаил Миргородский]

exmmth,

<script>
  jQuery('#modal').on('show.bs.modal', function (event) {
    var button = jQuery(event.relatedTarget) 
    var recipient = button.data('whatever') 
    var modal = jQuery(this)
    modal.find('.modal-title').html(recipient)
      console.log(button);
      console.log(recipient);
      console.log(modal);
  })
</script>

Вывел, вывод. Почему-то не берет кнопку, куда копать не подскажите ?