Send multiple checkbox values to modal bootstrap

Asked

Viewed 359 times

-1

Good night,

I have a checkbox list and need to send to a modal the information of which checkbox are with status 'ckecked'.

I’m using the code below, but I’m not getting it, can help me please?

form

<form id="form"> <ul> <li><input type="checkbox" value="1" name="disponivel">1</li> <li><input type="checkbox" value="2" name="disponivel">2</li> <li><input type="checkbox" value="3" name="disponivel">3</li> </ul> <button id="salvar" type="submit" class="btn btn-primary" data-toggle="modal" data-target="#teste" onclick="obterMarcados();">Enviar</button> </form>

modal

<div class="modal fade" id="teste" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Reservados </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Valor:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

.JS

<script> var botao = document.querySelector('#salvar'); var form = document.querySelector('#form');
botao.addEventListener('click', function (event) { event.preventDefault(); $('#teste').on('show.bs.modal', function (event) { var numeros = form.disponivel.value; var modal = $(this) modal.find('.modal-title').text('Reservar Números ' + numeros) modal.find('.modal-body input').val(numeros) }); }); </script>

2 answers

0


        $('#teste').on('shown.bs.modal', function () {
          $('#myInput').trigger('focus')
        })

        $(document).ready(function(){
            $("#mybtn1").click(function() {
                var p=$("#teste #result");
                $(p).html("Disponíveis: ");
                $.each($("input[name='disponivel']:checked"), function() {
                    $(p).html($(p).html() + '<br>' + $(this).val());
                });      
            }); 
        });
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


      <div class="modal fade" id="teste" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Reservados </h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label for="recipient-name" class="col-form-label">Valor:</label>
                  <p id="result"></p>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
      
      <form id="form">
        <ul>
            <li><input type="checkbox" value="1" name="disponivel">1</li>
            <li><input type="checkbox" value="2" name="disponivel">2</li>
            <li><input type="checkbox" value="3" name="disponivel">3</li>
        </ul>     
      </form>

      <button  id = "mybtn1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#teste" >Ver disponíveis</button>
          <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

0

If the intention is to put in a value of a input is as follows.

Note: the values were separated by commas so that it can be manipulated more easily later.

   $('#teste').on('shown.bs.modal', function () {
          $('#myInput').trigger('focus')
        })

        $(document).ready(function(){
            $("#mybtn1").click(function() {
                var numeros="";
             $.each($("input[name='disponivel']:checked"), function() {

                    //sem virgulas retire +"," na linha abaixo
                    numeros +=$(this).val()+",";

                    
                });

                // sem virgulas retire toda a linha abaixo 
                numeros = numeros.substring(0,(numeros.length - 1));

               document.getElementById("recipient-name").value = numeros;
            }); 
        });
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


      <div class="modal fade" id="teste" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Reservados </h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label for="recipient-name" class="col-form-label">Valor:</label>
                  <input type="text" class="form-control" id="recipient-name">
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
      
      <form id="form">
        <ul>
            <li><input type="checkbox" value="1" name="disponivel">1</li>
            <li><input type="checkbox" value="2" name="disponivel">2</li>
            <li><input type="checkbox" value="3" name="disponivel">3</li>
        </ul>     
      </form>

      <button  id = "mybtn1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#teste" >Enviar para modal</button>
          <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Browser other questions tagged

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