There are several buttons on the site that open one modal window. But the buttons with different semantic content. When I click on the button, I need to add its name or id to the hidden form field. How to implement it?

  • Add your code. - MihailPw

2 answers 2

$('#btn').on('click', function() { $('input.hidden').val(this.id); console.log(this.id); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btn">Кнопка</button> <input type="hidden" class="hidden" /> 

     $('.overlay, .modal-close').click(function() { $('.modal, .overlay').removeClass('shown'); }); $('.load-modal-frame').click(function() { let id = this.id; $('.modal .modal-content').text(id); $('.overlay, .modal').addClass('shown'); return false; }); 
     .modal { top: 50%; left: 50%; border-radius: 5px; border: 1px black solid; background: #fff; position: fixed; display: none; z-index: 5; padding: 40px 20px 20px 20px; overflow: hidden; margin-top: -100px; margin-left: -150px; width: 300px; height: 200px; } .modal .modal-close { width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; cursor: pointer; display: block; stroke: black; } .modal iframe { width: 100%; height: 100%; border-width: 0; } .overlay { z-index: 3; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: black; opacity: 0.6; display: none; } .modal.shown, .overlay.shown { display: block; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button-1" class="load-modal-frame">button-1</button> <br> <button id="button-2" class="load-modal-frame">button-2</button> <div class="modal"> <span class="modal-close"> <svg viewbox="0 0 40 40"> <path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" /> </svg> </span> <div class="modal-content"></div> </div> <div class="overlay"></div>