我有一个页面显示当地咖啡馆的列表。当用户单击某个咖啡馆时,会显示一个模式对话框,其中已预先填写了“咖啡馆名称”。该页面包含许多咖啡馆名称,表单应包含他点击的“咖啡馆名称”。
以下是生成为带有链接按钮的文本的咖啡馆名称列表
<table class="table table-condensed table-striped">
<tbody>
<tr>
<td>B&Js
</td>
<td>10690 N De Anza Blvd </td>
<td>
<a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a>
</td>
</tr>
<tr>
<td>CoHo Cafe
</td>
<td>459 Lagunita Dr </td>
<td>
<a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a>
</td>
</tr>
<tr>
<td>Hot Spot Espresso and Cafe
</td>
<td>1631 N Capitol Ave </td>
<td>
<a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a>
</td>
</tr>
</tbody>
</table>
这是模态形式
<div class="modal hide fade" id="createFormId"">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
<h3>Create Announcement</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" method="POST" commandName="announceBean" action="/announce" >
<input type="hidden" name="cafeId" value="104" />
<fieldset>
<div class="control-group">
<label class="control-label" for="cafeName">Where I am Coding</label>
<div class="controls">
<input id="cafeName" name="cafeName" class="input-xlarge disabled" type="text" readonly="readonly" type="text" value="B&Js"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="date">Date</label>
<div class="controls">
<input type="text" class="input-xlarge" id="date" name="date" />
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" class="btn btn-primary" value="create" />
<input type="button" class="btn" value="Cancel" onclick="closeDialog ();" />
</div>
</div>
</fieldset>
</form>
</div>
问题是如何将实际值传递到模态形式的“value”属性中?
<input type="hidden" name="cafeId" value="104" />
表单“show”事件由“onclick”事件触发
<a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a>
你可以这样做:
<a class="btn btn-primary announce" data-toggle="modal" data-id="107" >Announce</a>
然后使用 jQuery 绑定点击并发送Announce data-id 作为模态 #cafeId 中的值:
$(document).ready(function(){
$(".announce").click(function(){ // Click to only happen on announce links
$("#cafeId").val($(this).data('id'));
$('#createFormId').modal('show');
});
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)