单击按钮时如何将ID从按钮传递到模态体?

时间:2018-04-19 06:25:22

标签: javascript jquery twitter-bootstrap

我有一个带有id的按钮,我希望将这个id传递给模态body。我可以将它传递给模态体吗?

带有var=q

标识的

按钮

<td><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2" id="${q.id}">Confirm</button>

模态内容

<div class="modal fade" id="myModal2" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Send an Email</h4>
                </div>
                <div class="modal-body">
                    <g:form action="send">
                     <h4>Email to:</h4><g:textField name="email" placeholder="Enter email" value=""/><br>
                        <h4>Subject:</h4><g:textField name="subject" placeholder="Enter subject"/><br>
                       <h4>Description:</h4><g:textArea name="body" placeholder="Enter body"/><br>
                        <g:submitButton name="send" value="send"/>
                    </g:form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

不确定..尝试这种方式,而不是让Id使用data-id来发送值

<td><button type="button" class="btn btn-info btn-lg custom_popup"  data-toggle="modal" data-target="#myModal2" data-id="${q.id}">Confirm</button>

JS

<script>
    $(document).on("click", ".custom_popup", function () {
         var custom_id= $(this).data('id');
        document.getElementById("tem_id").id = "custom_id";
    });
</script>

在你的模态体类中添加ID

<div class="modal fade" id="myModal2" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Send an Email</h4>
                </div>
                <div class="modal-body" id='tem_id'>
                    <g:form action="send">
                     <h4>Email to:</h4><g:textField name="email" placeholder="Enter email" value=""/><br>
                        <h4>Subject:</h4><g:textField name="subject" placeholder="Enter subject"/><br>
                       <h4>Description:</h4><g:textArea name="body" placeholder="Enter body"/><br>
                        <g:submitButton name="send" value="send"/>
                    </g:form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>