How to submit form in bootstrap modal box

How to submit the form in the bootstrap modal box: first open the corresponding code file; then write the form form directly in the modal-body of the modal box; finally set the link to jump when the action is submitted. .

The operating environment of this tutorial: Windows 7 system, bootsrap version 3.3.7. This method is suitable for all brands of computers.

Recommended: "bootstrap tutorial" "css video tutorial"

bootstrap modal box submission form

Write the form form directly in the modal-body of the modal box and process it like a normal form form. Action=the link to be jumped when submitting.

If structured according to the modal framework of bootstrap, the final save must be placed outside the form, but if the submit button is placed outside the form, the form cannot be submitted, so it must be placed inside the form.

<div class="modal-content">
       <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">添加数据字典</h4>
      </div>
      <div class="modal-body">
      <form class="form-horizontal" role="form" id="add-key-form" action="system/dic-save.json" method="post">
   <div class="form-group">
      <label class="col-sm-2 control-label"><i class="required">* </i>键：</label>
      <div class="col-sm-4">
         <input type="text" class="form-control" name="keyName" placeholder="请输入字典键"/>
      </div>
      <label class="col-sm-2 control-label"><i class="required">* </i>值：</label>
      <div class="col-sm-4">
         <input type="text" class="form-control" name="keyValue" placeholder="请输入字典值">
      </div>
   </div>
  <div class="modal-footer">
        <button type="submit" class="btn btn-primary">保存</button>
  </div>
</form>
      </div>
</div>

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of How to submit form in bootstrap modal box. For more information, please follow other related articles on the PHP Chinese website!