• 技术文章 >web前端 >Bootstrap教程

    bootstrap模态框如何提交表单

    藏色散人藏色散人2021-01-08 14:36:30原创691

    bootstrap模态框提交表单的方法:首先打开相应的代码文件;然后直接把form表单写在模态框的modal-body里;最后设置action提交时要跳转的链接即可。

    本教程操作环境:Windows7系统、bootsrap3.3.7版,该方法适用于所有品牌电脑。

    推荐:《bootstrap教程》《css视频教程

    bootstrap模态框提交表单

    直接把form表单写在模态框的modal-body里,和正常的form表单一样处理,action=提交时要跳转的链接。

    如果按照bootstrap的模态框架构来,最后的保存要放在form外,但是提交按钮放在form之外则不能提交表单,所以要放在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>

    更多编程相关知识,请访问:编程教学!!

    以上就是bootstrap模态框如何提交表单的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:bootstrap
    上一篇:bootstrap如何获取行数据? 下一篇:如何解决bootstrap 图标不显示的问题
    大前端线上培训班

    相关文章推荐

    • bootstrap的清除浮动• bootstrap怎么实现响应式布局• bootstrap modal 如何关闭• bootstrap支持手机吗• bootstrap如何获取行数据?

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网