@SimpleShadow

Как подгрузить разный контент в зависимости от клика?

Доброго времени суток. Столкнулся с задачей подгрузить разный контент в зависимости от клика по элементу. Есть ряд элементов, каждый со своим id.
0c5c5203b698441da0edf6bf876806fc.jpg
При клике по каждому элементу вызывается модальное окно с его изображением и формой заказа.
86ff279766e942c1b24c155b2813cec1.png
Формы отличаются только id и названием и чтобы их не плодить в html, решил сделать одну, но подгружаемую динамически, в зависимости от id модального окна. Вот код самого окна с формой:
<div class="modal id="four">
  <div class="info">
  <h1>Товар 4</h1>
  </div>
  <img src="images/products/4.png" alt="" />
 
 <form id="four" name="form_four" class='order' method="post" action='order.php'>
                     <div class="row">
                      <div class="col-xs-10 col-xs-offset-1 text-center">
                     <div class='mail_success'>Ваше сообщение было отправлено!</div>
                                    <div class='mail_fail'>Возникли проблемы при отправке!</div>
                     </div>
                        </div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class='name_error'>Введите имя</div>
                                        <div>
                                            <input type='text' name='name' class='name'placeholder="ФИО">
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class='email_error'>Введите телефон</div>
                                        <div>
                                            <input type='text' name='phone' class='phone'placeholder="Телефон">
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class='message_error'>Введите сообщение</div>
                                        <div>
                                            <textarea name='comment' class='comment' placeholder="Сообщение"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                            <input type='submit' class='send_four' value='Отправить'>
                                    </div>
                                    </div>
                            </form>
 
 </div>
</div>

Мне нужно менять только номер в ссылке на изображение и название и id формы. Как это лучше реализовать? С php я немного знаком, но ведь он выведет всю сотню форм при загрузке, а мне нужно, чтобы подгружалась только одна, в зависимости от id окна. Я так понимаю, тут нужен ajax?
  • Вопрос задан
  • 858 просмотров
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 2
@nirvimel
Вам поможет JqueryUI Tooltip. Его обработчик можно навешивать не на все элементы, для которых всплывающие окна, а только на контейнер их содержащий. Дальше (смотрите пример с custom-content) в обработчике вы получаете сам тот элемент который вызвал всплывающее var element = $( this ); смотрите его свойства, формируете html-фрагмент, который представляет содержимое окна (по сути шаблон + в нужных местах вставить id (или что там у вас)) и возвращаете это из обработчика в виде строки. Все. И никаких ajax-ов.
Ответ написан
@maxus99
фрилансер
Много писать лень, но если по сути.
Вариант 1:
Заказать
И напишите функцию, которая будет менять название в форме и показывать ее.
Вариант 2:
Через аттрибут data - habrahabr.ru/post/139210
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы