How to print the selected name in the Bootstrap confirmation modal?

Asked

Viewed 264 times

1

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

How do I get the name you selected in the select of the print form in the bootstrap confimation 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

  • Your HTML has two elements with the same ID cliente, cannot have two elements with the same ID in HTML and the ID should be only one parameter, you have put id="cadastrar_arquivos submitBtn submit", after fixing this put a different id in the modal and change to appear text()and not val().

  • can show that you spoke in practice by modifying my codes?

  • It’s in my answer.

  • is printing all options and not only the selected

2 answers

1

I don’t even know how the browsers deal with it, 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 this is very confusing, at worst the browser gets lost.

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

To make your form button open the modal instead of submitting it, which I imagine is what is happening, I would adjust the id of the input Submit and modal button, and the id of the tag that gets the customer 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 button of the modal <a href="#" id="submitForm" class="btn btn-success success">Submit</a>, and finally <td id="clienteName"></td>

In the 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();
});

They had two tags with customer id #cliente, DOM finds only the first occurrence, the way is to pack your Ids

1


Your HTML has two elements with the same client ID, they cannot have two elements with the same ID in HTML and the ID must be only one parameter, you have put id="cadastrar_arquivos submitBtn submit", after fixing this put a different id in the modal and change to appear text() and not val(), the selector must also have option:selected to display 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>
<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>

  • Your code almost worked, the problem is that when you have more than one option in the select of the form, when you click submit, appears all the <option> and not only the selected, how can I solve it?

  • Now it’s correct, just put the selector of the selected option. option:selected

Browser other questions tagged php jquery

You are not signed in. Login or sign up in order to post.