Tell the finished script or solution how to make a feedback form with several buttons:

enter image description here

In order not to create a form for each button, but you could open one form (in my modal window) and send the selected option to the post office.

    3 answers 3

    Dynamic filling of the form from the values ​​in the table or by the additional attributes of the button. For example:

    $('button').click(function(){ $("#val1").val($(this).parent().parent().children(":eq(0)").html()); $("#val2").val($(this).parent().parent().children(":eq(2)").html()); $("#val3").val($(this).attr('data-info')); $('.modal').show(); }) $('.close').click(function(){ $('.modal').hide(); }) 
     .modal{ display: none; border: 1px solid black; } 
     <script src="http://code.jquery.com/jquery-3.1.1.js"></script> <table> <thead> <tr> <th>Field 1</th> <th>Field 2</th> <th>Field 3</th> <th>Field 4</th> <th>Field 5</th> </tr> </thead> <tbody> <tr> <td>A Item 1</td> <td>A Item 2</td> <td>A Item 3</td> <td>A Item 4</td> <td><button data-info='a'>Заказать</button></td> </tr> <tr> <td>B Item 1</td> <td>B Item 2</td> <td>B Item 3</td> <td>B Item 4</td> <td><button data-info='b'>Заказать</button></td> </tr> <tr> <td>C Item 1</td> <td>C Item 2</td> <td>C Item 3</td> <td>C Item 4</td> <td><button data-info='c'>Заказать</button></td> </tr> <tr> <td>D Item 1</td> <td>D Item 2</td> <td>D Item 3</td> <td>D Item 4</td> <td><button data-info='d'>Заказать</button></td> </tr> <tr> <td>E Item 1</td> <td>E Item 2</td> <td>E Item 3</td> <td>E Item 4</td> <td><button data-info='e'>Заказать</button></td> </tr> </tbody> </table> <!-- modal --> <div class="modal"> <div class="close">Close</div> <form action=""> <input type="text" name="val1" id='val1'> <input type="text" name="val2" id='val2'> <input type="text" name="val3" id='val3'> <input type="submit" value="Send"> </form> </div>

      You make one form in a modal window, but fill in the values ​​of its fields dynamically, depending on the Order button pressed. A jquery script might look something like this.

       $("button_selector").on("click", buttonHandler()); function buttonHandler(e){ var productId = e.target.data("productId"); var modal = $("modal_form_selector"); modal.find("#product").val(productId); modal.show(); }

        Returning to this question again (and having learned js), I decided to use the following option:

        Js:

         $(document).ready(function (){ // первая кнопка $('.buttons-parent').on('click', '#button1', function() { $('#input-type-hide').val('new-value'); }); // вторая кнопка $('.buttons-parent').on('click', '#button2', function() { $('#input-type-hide').val('new-value'); }); });

        HTML:

          <div class="buttons-parent"> <button id="button1">Заказать</button> <button id="button2">Заказать</button> </div> <form> <input type="hidden" id="input-type-hide" value="here"> ... </form>

        Description:

        One form for all buttons, hidden in a modal window. In the form of hidden input . When you click on the order button, the value of the hidden input rewritten to the corresponding one, which is then sent with the rest of the form fields.

        Used event:

        http://api.jquery.com/delegate/ .delegate ()

        https://ruseller.com/jquery?id=126 (in Russian)

        If the message is read by experienced js developers, I would like to hear how competent this solution is and how to optimize it. Thank you in advance.