title: Using JavaScript to load form view in a modal, in Yii2
body: <p>I found a YouTube video that shows how to create a popup form using modal and JavaScript. I was able to achieve this for the button I have. However, I want to extend the same functionality to cover several buttons I have on the same view. I thought I could use the same JS code to achieve this but only the first button works and the subsequent buttons do not work. Only possible when I rewrite the JS code and change the <code>id</code> for each button; which to me is inefficient and introduces a lot of verbatim.</p>
  
  <p>Again, after saving the form data in the modal popup, I want the view of the model to be loaded in the popup modal without redirecting the page to the page <code>controller/view</code>. I am not a guru in JavaScript but somehow I have a feeling that this is possible. Here is the link to the <a href="https://www.youtube.com/watch?v=Vq5zbnJZuEo" rel="nofollow noreferrer">YouTube Video</a>.</p>
  
  <p><strong><em>main.js File</em></strong></p>
  
  <pre><code>$(function() {
      // get the click of the create button
      $('#btnSeat1').click(function () {
          $('#modal').modal('show')
              .find('#modalContent')
              .load($(this).attr('value'));
      });
  });
  </code></pre>
  
  <p>Below is the button initiating the event onclick and the modal</p>
  
  <pre><code>&lt;?= Html::button('Book Now &amp;raquo;', ['value' =&gt; Url::to('create'), 'class' =&gt; 'btn btn-primary', 'id' =&gt; 'btnSeat1', 'schedule_id' =&gt; $model-&gt;schedule_id]) ?&gt;
  
  &lt;?php
      Modal::begin([
          'header'=&gt;'&lt;h4&gt;Book Seat&lt;/h4&gt;',
          'id'=&gt;'modal',
          'size'=&gt;'modal-lg',
      ]);
  
      echo "&lt;div id='modalContent'&gt;&lt;/div&gt;";
  
      Modal::end();
  ?&gt;
  </code></pre>