Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Form submit button not working in bootstrap modal window

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.

like image 379
gapc311 Avatar asked Jul 28 '15 20:07

gapc311


People also ask

How do I submit a bootstrap modal form?

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.

Why submit button is not working?

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.

How use modal in submit button?

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.

Can you put a form in a modal?

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.


1 Answers

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>
like image 122
Himanshu Singla Avatar answered Sep 16 '22 16:09

Himanshu Singla