1

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

4

2 回答 2

1

为了清楚起见，我在里面添加了一个 div 标签<li>Team Name:</li>：

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

添加以下脚本（可能就在结束 html 标记之前）：

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

上面的 JQuery 代码将在您的注册按钮被点击后做出响应，将输入中的文本显示到我在上面添加的 div 中。

JsFiddle：

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

于 2013-04-29T08:09:29.320 回答
0 
   <script type="text/javascript">   
   $("#inputTeamName").keypress(function() {    
   var TeamName = $(this).val();        
   $(this).after(TeamName);        
   });             
   </script>
于 2013-04-29T04:22:25.667 回答