'How to keep bootstrap modal inside html form?

Im trying to get data from inputs of modal and to submit into database. Form has also input fields that aren't inside modal. I wrote modal inside form but it keep going outsite it (Im watching in inspect element), so I can't get those data. Is there any chance I make this working?

Pseudocode:

<form>
<label>Name</label>
<input type="text" name="Name" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Check students</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <input type="checkbox" name="students[]" value="student1">
        <input type="checkbox" name="students[]" value="student2">
        <input type="checkbox" name="students[]" value="student3">
        <input type="checkbox" name="students[]" value="student4">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
<!-- END MODAL -->

<button type="submit" class="btn btn-primary" id="main-btn">Create</button>
</form>
phphtmllaraveltwitter-bootstrap


Solution 1:[1]

You should keep the tag open and close before the modal. 

<form id="myForm1">
<label>Name</label>
<input type="text" name="Name" />
</form>

Then, add the attibute form to every input inside your modal.

<input form="myForm1" type="checkbox" name="students[]" value="student1">

Don't forget the submit button

[...]
<!-- END MODAL -->
<button type="submit" form="myForm1"  class="btn btn-primary" id="main-btn">Create</button>

Solution 2:[2]

Any button inside form will automatically be considered as "submit" button

If the button is a submit button (it's inside/associated with a and doesn't have type="button"), specifies how to encode the form data that is submitted.

So i just added to the button that opens the modal the type="button" and it stopped from submitting the form.

Regarding the above answer - in my case the modal was outside the <form> already ... so i knew this wasn't it for me.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Edoardo Lobbiani
Solution 2 Ricky Levi

Related Questions