Menu
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.
379
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.
Sometimes the problem is caused by old versions of the Javascript files, cached by your browser and can be fixed by clearing the browser cache. You can use the browser console of your browser for debugging. After the Javascript error is fixed, the submit button will automatically be enabled.
Because the submit button is outside the form element. Wrap the form element around . modal-body - that will ensure that all the form fields and input buttons are in the form to be submitted. Also, apply some styling to the form with 0 padding and 0 margin as it may push the form making the modal look untidy.
You can place the Login and Signup form right in the same Modal. This way, the user triggers the modal, then can either login or register right from that modal. Another way you might try this is to simply provide links to both the Login and Signup pages of your website in the Modal.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With