Form submit button not working in bootstrap modal window

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.

Costanzia

None of the submit buttons work? – Diaphaneity

yup. Both of them are not working. I m still not able to find a solution for it as there seems to be no issue – Costanzia

Is it just not submitting or submitting the whole form that the modal resides in? – Diaphaneity

It is not submitting the form I suppose. Because I initially tried the same code without the modal window and it worked perfectly. – Costanzia

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>

Metallo

It worked. I was thinking of using javascript. Great. Thanks for your answer!! – Costanzia

But why? A little explanation would be helpful. – Incantatory

this oddly worked for me too, but I am also interested to know the reason why this does and any implications if this step is used. – Mozell

I am having same issue and worked but i don't know how :D – Rockie

Surely if we must resort to javascript <button onclick="this.form.submit()"… > is sufficient, without the form_submit() function. – Paradigm

document.getElementById('form').submit() ,form is id of form tag.this work – Milissamilissent

@Incantatory I think this is because the modal gets detached from the dom and moved when the modal is shown. – Guthrun

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">&times;</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>

Altercate

Except in the example, the OP did have the buttons in the form, and in my case I can find the button in the debug console and execute button.form.submit() which works, which should mean that clicking on the button would also work. You're also correct that data-dismiss="modal" will prevent submission (the modal is closed before the submit event), but OP doesn't have that in the example, either. It appears bootstrap is overriding the default click handler. – Paradigm

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">&times;</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>

Naze