Javascript set value in Modal Bootstrap

Question

I have the following javascript code:

function chamarModal(valor) {

    $('span.nome').text(valor);
    $('#pagamento-modal').modal();
}

How do I set this variable content valor in my modal bootstrap?

I tried the above code and other codes and it didn’t work

My modal:

<div class="modal fade" id="pagamento-modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="modalLabel">Registrar Pagamento</h4>
                        </div>
                        <div class="modal-body">Deseja realmente registrar o pagamento no valor de  <b><span class="nome"></span></b>? </div>
                        <div class="modal-footer">
                            <a href="#" type="button"  class="btn btn-primary pay-yes">Sim</a>
                            <button type="button" class="btn btn-default" data-dismiss="modal">N&atilde;o</button>
                        </div>
                    </div>
                </div>
            </div>

I want to insert in this block:

<div class="modal-body">Deseja realmente registrar o pagamento no valor de  <b><span class="nome"></span></b>? </div>

Answer 1

Just add a id at the < span >, that will work.

Example:

$("#nome").text("13,13");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="modal-body">

  Deseja realmente registrar o pagamento no valor de <b>
  <span id="nome" class="nome"></span></b> ?

</div>

Answer 2

I don’t see where that variable is being set in your code. But if what you’re trying to do is take the value of a string and add it to the DOM, you can do it this way:

var resultado = '464866';
document.getElementsByClassName('nome')[0].innerHTML = resultado;

<div class="modal-body">Deseja realmente registrar o pagamento no valor de <b><span class="nome"></span></b> ? </div>

If the case is to take the content/value of an element that is already implemented in the DOM:

var resultado = document.getElementsByClassName('nome')[0].innerHTML;
document.getElementById('montante_pagar').innerHTML = resultado;

<div class="modal-body">Deseja realmente registrar o pagamento no valor de  <b><span class="nome">464866</span></b>? </div>
<br>
<h3>Montante a pagar: <span id="montante_pagar"></span></h3>

If the case is to obtain the value of a input:

document.getElementById('botao').addEventListener("click", minhaFuncao);

function minhaFuncao() {
    var resultado = document.getElementById('obtemValor').value;
    document.getElementsByClassName('nome')[0].innerHTML = resultado;
}

<p>quantia a adicionar: <input type="number" id="obtemValor"/></p>
<div class="modal-body">Deseja realmente registrar o pagamento no valor de  <b><span class="nome"></span></b>? </div>
<button id="botao">traz o valor</button>

Answer 3

I will answer more how to debug. In my view your code is functional, then the problem is elsewhere. that not in the code snippet you made available.

Use the browser console and run the lines one by one, analyzing in the elements tab if the values that will change are those of what you are setting.

Another possibility is that your modal is not defined in the document but in a variable and the code you passed to us is just an example. To avoid this possible problem try your code like this

function chamarModal(valor) {
    $('#pagamento-modal').modal().find('span.nome').text(valor);
}