How to load different content depending on the click?

Question

PHP

Good day. Faced with the task of loading different content depending on the click on the element. There are a number of elements, each with its own id.

When clicking on each element, a modal window is called up with its image and order form.

Forms differ only in id and name, and in order not to produce them in html, I decided to make one, but loaded dynamically, depending on the id of the modal window. Here is the code for the form window itself:

<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>

I only need to change the number in the link to the image and the title and id of the form. How it is better to implement it? I am a little familiar with php, but after all, it will display all a hundred forms upon loading, and I need only one to be loaded, depending on the window id. I understand that ajax is needed here?

Answer 1

jsfiddle.net/vno8r4nk

Answer 2

JqueryUI Tooltip will help you . Its handler can be hung not on all elements for which pop-up windows, but only on the container containing them. Further (see the example with custom-content) in the handler, you get the very element that caused the pop -up var element = $( this );, see its properties, form an html fragment that represents the contents of the window (essentially a template + insert id in the right places (or whatever you have)) and return it from the handler as a string. All. And no ajax.

Answer 3

Too lazy to write a lot, but if in fact.
Option 1:
Order
And write a function that will change the name in the form and show it.
Option 2:
Through the data attribute - habrahabr.ru/post/139210