我的页面有一个这样的表单字段。
<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>
当用户点击register按钮时,模态加载
<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>
是这样的- http://twitter.github.io/bootstrap/javascript.html#modals
我想使用模态来确认用户的输入。我如何引用用户在表单字段中输入的文本并在模态中显示它?
谢谢
为了明确,我在<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/ <script type="text/javascript">
$("#inputTeamName").keypress(function() {
var TeamName = $(this).val();
$(this).after(TeamName);
});
</script>