Pass parameter bootstrap modal window

Question

Good afternoon guys, I have a problem that should be silly, but I’m not able to solve.

I have a list of people... on that list I have a button. When you hover the mouse over the button, the correct person ID appears.

But when I click the button, it opens the modal, and the ID field shows a different number.

<a class="btn btn-warning btn-xs" href="<c:url value="upload?cod=${pessoa.cod}"/>" data-toggle="modal" data-target="#testes">Upload Doc</a>

And here’s my modal:

<div class="modal fade" id="testes" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <%@include file="formUpload.jsp" %>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

And finally my "form":

<form name="formUpload"  id="formUpload" action="<c:url value="/pessoa/uploadDoc"/>" method="post">
<input type="text" name="pessoa.cod" id="pessoaCod" class="id" value="${pessoa.cod}">

I’m confused about this.

This field does not show the correct id.

Answer 1

You can do it via javascript by populating the modal fields by clicking. Following example

Link

<a data-toggle="modal" data-target="#modal" class="btn btn-primary" onclick="setaDadosModal('valor1')">
    <span class="btn-label"><i class="fa fa-check"></i></span>Abrir modal
</a>

Javascript

<script>
function setaDadosModal(valor) {
    document.getElementById('campo').value = valor;
}
</script>

Modal

<div id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" class="modal fade">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-body">
                <div class="panel-body">
                    <form id="modalExemplo" method="post" action="">
                        <input type="text" name="campo" id="campo">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

I hope I’ve helped. :)