How to print the selected name in Bootstrap confirmation mode?

Question

How to print the selected name in Bootstrap confirmation mode?

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I have this code to confirm a form in a Bootstrap modal.

How do I get the name that you selected in the form select print in bootstrap config modal?

$('#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();
});

Form

<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>

php jquery

asked by anonymous 17.10.2018 / 15:35

2 answers

1

I do not even know how browsers deal with this, but the id of an html tag besides being unique in the document, does not put more than one id per tag, only in classes we use more than one per tag at best of cases this is very confusing, at worst the browser gets lost.

Do you have two equal functions?

$('#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());
});

In order to make your form button open the modal rather than submit it, which I imagine is what is happening, I would adjust the input submit and modal button ids, and the id of the tag that receives the client name

<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"> , and the modal button <a href="#" id="submitForm" class="btn btn-success success">Submit</a> , and finally <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();
});

There were two tags with client id #cliente , DOM finds only the first occurrence, the way is to sort your IDs

17.10.2018 / 16:04

What exactly is the UTL_HTTP (ORACLE) SET_PROXY Proxy? How to run the ProcessList periodically from the command line?

score 1 · Accepted Answer

Your HTML has two elements with the same client ID, they can not have two elements with the same ID in HTML, and the ID must be just a parameter, you put id="cadastrar_arquivos submitBtn submit" , after correcting this, put a different ID in modal and change to appear text() and not val() , the selector must also have option:selected to appear only the text of the selected option.

See working:

$('#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><scriptsrc="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>