duanfei9278 2013-04-29 04:14
浏览 53
已采纳

如何在Twitter Bootstrap的弹出模式中引用html表单字段?

My page has a form fields like so.

<form id = "registerform" class="form-horizontal" action = "insert.php" method = "post">
  <div class="control-group">
    <label class="control-label" for="inputTeamName">Team Name</label>
      <div class="controls">
        <input id="inputTeamName" class = "span11" type="text" placeholder="Team Name" name = "inputTeamName" data-toggle="tooltip" title="Innuendos encouraged" data-placement="left">
      </div>
    </div>
  <div class="control-group">
    <div class="controls">
      <a href="#myModal" role="button" class="btn" id="registerBtn" data-toggle="modal">Register</a>
    </div>
  </div>
</form>

When the user clicks the register button, a modal loads

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Confirm Registration</h3>
  </div>
  <div class="modal-body">
    <ul class="unstyled">
      <li>Team Name:</li>
    </ul>
  </div>
<div class="modal-footer">
  <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
  <button class="btn btn-primary">Confirm</button>
</div>

It looks like this - http://twitter.github.io/bootstrap/javascript.html#modals

I want to use the modal to confirm the user's input. How do I reference the text the user entered in the form field and display it inside of the modal?

Thanks

  • 写回答

2条回答 默认 最新

  • dongwoqin7034 2013-04-29 08:09
    关注

    To be clear, I added a div tag inside <li>Team Name:</li>:

    <div class="modal-body">
        <ul class="unstyled">
          <li>Team Name:<div id = "divTeamName"></div></li>
        </ul>
    </div>
    

    Add the following script (possibly just before the closing html tag):

    <script type="text/javascript">   
       $("#registerBtn").click(function() {          
        $(divTeamName).text($('#inputTeamName').val());        
       });
    </script>
    

    The JQuery code above will respond after your register button has been clicked, displaying the text from the input into the div I've added above.

    JsFiddle:

    http://jsfiddle.net/6y4yQ/1/

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能