Form tag removing automatically from Bootstrap modal

Question

In the default magento 1.9 version, I am facing a problem with modal popup.

It's working fine but the form tag is being automatically removed. When I view the page source, the form tag is there. I don't know what I'm doing wrong.

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <form id="modalForm" name="modalForm" action="/test" method="post">
          <input type="text" name="text" />
        </form>
        Content for the dialog / modal goes here.
      </div>
      <div class="modal-footer">
        <a href="#" data-dismiss="modal" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
      </div>
    </div>
  </div>
</div>

Fiddle demo

Any help?

Answer 1

I experienced this exact problem today (although I was using Spree rather than Magento). My mistake was placing the bootstrap modal html within an existing form element.

Chrome automatically removes form tags within an existing form element. See question here.

Moving your modal window to the bottom of the body tag may help.