我有一个页面,显示了当地咖啡馆的列表。当用户单击某个咖啡馆时,将显示一个模态对话框,该对话框已预先填写了“咖啡馆名称”。该页面包含许多咖啡馆名称,并且表单应包含他单击的“咖啡馆名称”。
以下是使用链接按钮以文本形式生成的咖啡馆名称的列表
<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>
问题是如何将实际值传递给模式形式的“值”属性?
<input type="hidden" name="cafeId" value="104" />
表单“显示”事件由“ onlick”事件触发
<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数据ID作为模式#cafeId中的值:
$(document).ready(function(){ $(".announce").click(function(){ // Click to only happen on announce links $("#cafeId").val($(this).data('id')); $('#createFormId').modal('show'); }); });