How to POST the data from a modal form of Bootstrap?
You need to handle it via ajax
submit.
Something like this:
$(function(){ $('#subscribe-email-form').on('submit', function(e){ e.preventDefault(); $.ajax({ url: url, //this is the submit URL type: 'GET', //or POST data: $('#subscribe-email-form').serialize(), success: function(data){ alert('successfully submitted') } }); });});
A better way would be to use a django form, and then render the following snippet:
<form> <div class="modal-body"> <input type="email" placeholder="email"/> <p>This service will notify you by email should any issue arise that affects your plivo service.</p> </div> <div class="modal-footer"> <input type="submit" value="SUBMIT" class="btn"/> </div></form>
via the context - example : {{form}}
.
I was facing same issue not able to post form without ajax.but found solution , hope it can help and someones time.
<form name="paymentitrform" id="paymentitrform" class="payment" method="post" action="abc.php"> <input name="email" value="" placeholder="email" /> <input type="hidden" name="planamount" id="planamount" value="0"> <input type="submit" onclick="form_submit() " value="Continue Payment" class="action" name="planform"> </form>
You can submit post form, from bootstrap modal using below javascript/jquery code :call the below function onclick of input submit button
function form_submit() { document.getElementById("paymentitrform").submit(); }
You CAN include a modal within a form. In the Bootstrap documentation it recommends the modal to be a "top level" element, but it still works within a form.
You create a form, and then the modal "save" button will be a button of type="submit" to submit the form from within the modal.
<form asp-action="AddUsersToRole" method="POST" class="mb-3"> @await Html.PartialAsync("~/Views/Users/_SelectList.cshtml", Model.Users) <div class="modal fade" id="role-select-modal" tabindex="-1" role="dialog" aria-labelledby="role-select-modal" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Select a Role</h5> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="submit" class="btn btn-primary">Add Users to Role</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> </div> </div> </div> </div></form>
You can post (or GET) your form data to any URL. By default it is the serving page URL, but you can change it by setting the form action
. You do not have to use ajax.