1

Tenho esse código para confirmação de um formulário em uma modal do Bootstrap.

Como faço para pegar o nome que selecionou no select do formulário imprimir na modal de confimação do bootstrap?

$('#submitBtn').click(function() {
     /* when the button in the form, display the entered values in the modal */
     $('#cliente').text($('#cliente').val());

});

$('#submitBtn').click(function() {
     $('#cliente').text($('#cliente').val());

});

$('#submit').click(function(){

    $('#formfield').submit();
});

Formulário

<form role="form" name="form1" method="post" id="formfield" action="cadastrar_DADOS_arquivos_enviar.php" enctype="multipart/form-data" accept-charset="UTF-8">

    <div class="clear"></div>

    <br>

    <div class="col-md-12">

        <label>Nome</label>

        <div class="input-group">

            <span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>

            <select id="cliente" name="cliente" class="form-control">

                <option value="541">

                    2LJM SERVICOS ADMINISTRATIVOS LTDA
                </option>

            </select>

        </div>

    </div>

    <div class="clear"></div>

    <div class="col-md-12">

        <label>Editar o nome</label>

        <div class="input-group">

            <span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>

            <select id="categoria" name="categoria" class="form-control">

                <option value="30">

                    contabilidade
                </option>

                <option value="33">

                    financeiro
                </option>

                <option value="31">

                    fiscal
                </option>

                <option value="34">

                    outras
                </option>

                <option value="32">

                    setor pessoal
                </option>

            </select>

        </div>

    </div>

    <div class="clear"></div>

    <div class="col-md-12">
        <label>Arquivos</label>

        <div id="photoWrapper">
            <label>
                <input type="file" name="upload[]" multiple="multiple">
                <div class="newInputWrapper">
                    <!-- custom picture -->
                    <span id="photo"></span>
                    <!-- custom text -->
                    <p class="filename">C:\fakepath\boleto-dominio.pdf</p>
                </div>
            </label>
        </div>

    </div>
    <div class="clear"></div>
    <div class="form-group" style="text-align: center;">
        <input type="button" name="cadastrar_arquivos" value="Enviar" id="cadastrar_arquivos submitBtn submit" data-toggle="modal" data-target="#confirm-submit" class=" btn btn-success dropdown-toggle btn-lg text-center">
    </div>

    <div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    Confirmação de envio de arquvos
                </div>
                <div class="modal-body">
                    Tem certeza que deseja enviar para o cliente?

                    <!-- We display the details entered by the user here -->
                    <table class="table">
                        <tbody>
                            <tr>
                                <th>Last Name</th>
                                <td id="cliente"></td>
                            </tr>

                        </tbody>
                    </table>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                    <a href="#" id="submit" class="btn btn-success success">Submit</a>
                </div>
            </div>
        </div>
    </div>
</form>
4
  • Seu HTML tem dois elementos com o mesmo ID cliente, não podem ter dois elementos com o mesmo ID no HTML e o ID deve ser só um parâmetro, você colocou id="cadastrar_arquivos submitBtn submit", após corrigir isso coloque um ID diferente no modal e mude para aparecer text()e não val(). Commented 17/10/2018 às 13:57
  • pode mostrar isso que você falou na prática, modificando meus códigos?
    – Wagner
    Commented 17/10/2018 às 14:02
  • Está na minha resposta. Commented 17/10/2018 às 14:16
  • está imprimindo todos os options e não somente o selecionado
    – Wagner
    Commented 17/10/2018 às 14:25

2 Respostas 2

1

Seu HTML tem dois elementos com o mesmo ID cliente, não podem ter dois elementos com o mesmo ID no HTML e o ID deve ser só um parâmetro, você colocou id="cadastrar_arquivos submitBtn submit", após corrigir isso coloque um ID diferente no modal e mude para aparecer text() e não val(), o seletor deve ter também option:selected para aparecer somente o texto da opção selecionada.

Veja funcionando:

$('#submitBtn').click(function() {
  $('#selCliente').html($('#cliente option:selected').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form role="form" name="form1" method="post" id="formfield" action="cadastrar_DADOS_arquivos_enviar.php" enctype="multipart/form-data" accept-charset="UTF-8">   
  <div class="clear"></div>
  <br>
  <div class="col-md-12">
    <label>Nome</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
      <select id="cliente" name="cliente" class="form-control">
        <option value="541">2LJM SERVICOS ADMINISTRATIVOS LTDA</option>
        <option value="542">STACKOVERFLOW</option>
      </select>
    </div>
  </div>
  <div class="clear"></div>
  <div class="col-md-12">
    <label>Editar o nome</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
      <select id="categoria" name="categoria" class="form-control">
        <option value="30">contabilidade</option>
        <option value="33">financeiro</option>
        <option value="31">fiscal</option>
        <option value="34">outras</option>
        <option value="32">setor pessoal</option>
      </select>
    </div>
  </div>
  <div class="clear"></div>
  <div class="col-md-12">
    <label>Arquivos</label>
    <div id="photoWrapper">
      <label>
        <input type="file" name="upload[]" multiple="multiple">
        <div class="newInputWrapper">
            <!-- custom picture -->
            <span id="photo"></span>
            <!-- custom text -->
            <p class="filename">C:\fakepath\boleto-dominio.pdf</p>
        </div>
      </label>
    </div>
  </div>
  <div class="clear"></div>
  <div class="form-group" style="text-align: center;">
    <input type="button" name="cadastrar_arquivos" value="Enviar" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class=" btn btn-success dropdown-toggle btn-lg text-center">
  </div>
  <div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">Confirmação de envio de arquvos</div>
          <div class="modal-body">
            Tem certeza que deseja enviar para o cliente?
            <table class="table">
              <tbody>
                <tr>
                  <th>Last Name</th>
                  <td id="selCliente"></td>
                </tr>
              </tbody>
            </table> 
          </div>
          <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
          <a href="#" id="submit" class="btn btn-success success">Submit</a>
        </div>
      </div>
    </div>
  </div>
</form>

2
  • Seu código quase deu certo, o problema é que quando tem mais de uma opção no select do formulário, ao clicar em enviar, aparece todos os <option> e não somente o selecinado, como posso resolver isso?
    – Wagner
    Commented 17/10/2018 às 14:19
  • Agora está correto, foi só colocar o seletor da opção selecionada. option:selected Commented 17/10/2018 às 14:31
1

Eu não sei nem como os navegadores lidam com isso, mas o id de uma tag html além de ser único no documento, não se coloca mais de um id por tag, somente em classes usamos mais de uma por tag, no melhor dos casos isso é muito confuso, no pior o navegador se perde.

Tu tem duas funções iguais?

$('#submitBtn').click(function() {
    /* when the button in the form, display the entered values in the modal */
    $('#cliente').text($('#cliente').val());
});

$('#submitBtn').click(function() {
    $('#cliente').text($('#cliente').val());
});

Para fazer o teu botão do formulário abrir o modal ao invés de submeter ele, que eu imagino que é o que está acontecendo, eu ajustaria os id do input submit e do button do modal, e o id da tag que recebe o nome do cliente

<input type="submit" name="cadastrar_arquivos" value="Enviar" id="cadastrar_arquivos" data-toggle="modal" data-target="#confirm-submit" class=" btn btn-success dropdown-toggle btn-lg text-center">, e o button do modal <a href="#" id="submitForm" class="btn btn-success success">Submit</a>, e por fim <td id="clienteName"></td>

No JS:

$('#cadastrar_arquivos').click(function(e) {
    e.preventDefault(); //Para envitar que o form seja enviado

    /* when the button in the form, display the entered values in the modal */
    $('#clienteName').text($('#cliente').val());
});

$('#submitForm').click(function(){
    $('#formfield').submit();
});

Tinham duas tags com id cliente #cliente, o DOM acha apenas a primeira ocorrência, o caminho é arrumar teus IDs

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .