Form submit button not working in bootstrap modal window - forms

Question

I have been trying to make this work but the submit button is not working at all.
The bootstrap modal window I am using is:
<div class="modal fade" id="search" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4><span class="fa fa-search"></span> Search Anything...</h4>
</div>
<form name='searchdata' action="webarch/search.php" method="post" id="form1">
<div class="modal-body">
<div class="input-with-icon success-control">
<input type="text" class="form-control" id="form1Amount" name="searchvalue" placeholder="Search in users or #hashtags"><br/>
<button type="submit" name='user_search' form="form1" id="user_search" value='user' class="btn btn-danger btn-cons"><i class="fa fa-user"></i> User</button>
<button type="submit" name='tag_search' form="form1" value='tag' class="btn btn-default"><i class="fa fa-tag"></i> Tags</button>
</div>
</div>
</form>
</div>
</div>
Whenever I click the submit buttons, nothing happens and the form doesn't post the values.
Let me know how to make this work.

Answer 1

Try this using javascript. It worked for me:
<form name='searchdata' id="search_form" action="search.php" method="get">
<div class="input-with-icon success-control">
<input type="text" class="form-control" id="form1Amount" name="searchvalue" placeholder="Search in users or #hashtags"><br/>
</div>
<button onclick="form_submit()" name='user_search' value='user' class="btn btn-danger"><i class="fa fa-user"></i> User</button>
<button onclick="form_submit()" name='tag_search' value='tag' class="btn btn-default"><i class="fa fa-tag"></i> Tags</button>
</form>
<script type="text/javascript">
function form_submit() {
document.getElementById("search_form").submit();
}
</script>

Answer 2

Submit button is not in the form. Place form="modal-details" to the button, which is form id. You should not have data-dismiss="modal" on submit button, which is a bootstrap handler for closing the modal box. It is working for me.
<div class="modal fade" id="filterModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Client Filter</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-action="Details" asp-controller="Client" method="get" id="modal-details">
<div class="form-group">
<label for="recipient-name" class="col-form-label">Branch:</label>
<select asp-for="NetworkUnitId" class="custom-select form-control">
<option value="0">All</option>
#foreach (var client in classifierService.GetClients())
{
<option value="#client.Id">#client.Name</option>
}
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" form="modal-details">Search</button>
</div>
</div>
</div>
</div>

Answer 3

You have not mentioned modal-content here. I think that's why you may be getting the error.
<button type="button" class="btn btn-primary" data-target="#search" data-toggle="modal" name="button">modal</button>
<div class="modal fade" id="search" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<div class="modal-title">
<a class="close" data-dismiss="modal">×</a>
<h4><span class="fa fa-search"></span> Search Anything...</h4>
</div>
</div>
<form name='searchdata' action="webarch/search.php" method="post" id="form1">
<div class="modal-body">
<form class="frm-group" action="index.html" method="post">
<div class="modal-content">
<input type="text" name="" value="">
<button type="submit" name='user_search' form="form1" id="user_search" value='user' class="btn btn-danger btn-cons"><i class="fa fa-user"></i> User</button>
<button type="submit" name='tag_search' form="form1" value='tag' class="btn btn-default"><i class="fa fa-tag"></i> Tags</button>
</div>
</form>
</div>
</div>