0

Buen día. Tengo un formulario al que le quiero mandar diferentes parámetros dependiendo del tab que tenga seleccionado. Estoy trabajando en bootstrap 4. Lo que está pasando es que el input "tipo" siempre se envía con value "mensual" independientemente de lo que haya seleccionado.

<div class="modal fade" id="liquidacionComercio" tabindex="-1" aria-labelledby="liquidacionComercioLabel"
aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="liquidacionComercioLabel">Liquidacion comercio</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <form method="POST" action="#">
            @csrf
            <div class="modal-body">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" href="#section-one" data-toggle="tab" id="a-diario" role="tab"
                            aria-controls="section-one" aria-selected="true">Diario</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#section-two" data-toggle="tab" id="a-mensual" role="tab"
                            aria-controls="section-two" aria-selected="false">Mensual</a>
                    </li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane fade show active" id="section-one" role="tabpanel" aria-labelledby="section-one">
                        {{-- Tipo de liquidación --}}
                        <input type="hidden" name="tipo" value="diaria">
                    </div>

                    <div class="tab-pane" id="section-two" role="tabpanel" aria-labelledby="section-two">
                        {{-- Tipo de liquidación --}}
                        <input type="hidden" name="tipo" value="mensual">
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <button type="submit" class="btn btn-success">Generar reporte</button>
            </div>
        </form>
    </div>
</div>
1
  • Eso es por que tus inputs tienen el mismo name pero no son type="radio", lo unico que haces es ocultar tus inputs, y cuando envias 2 inputs con el mismo name solo se toma uno. Lo que deberias hacer es buscar otra manera de hacer lo que quieres.
    – Mateo Guio
    Commented el 8 abr. 2022 a las 14:08

1 respuesta 1

0

Para solucionar tu problema lo que hice fue retirar uno de tus input para dejar solo uno y con JavaScript detectar en que pestaña estas haciendo click, para asi cambiar el valor del input. Ahora solo enviaras un input y lo que haras sera cambiarle el valor. SIm embargo el usuario sigue viendo lo mismo :)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    </head>
    <body>

        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#liquidacionComercio">
            Launch demo modal
        </button>
        <div class="modal fade" id="liquidacionComercio" tabindex="-1" aria-labelledby="liquidacionComercioLabel"
        aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="liquidacionComercioLabel">Liquidacion comercio</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form method="POST" action="#">
                        <div class="modal-body">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" href="#section-one" data-toggle="tab" id="a-diario" role="tab"
                                        aria-controls="section-one" aria-selected="true">Diario</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#section-two" data-toggle="tab" id="a-mensual" role="tab"
                                        aria-controls="section-two" aria-selected="false">Mensual</a>
                                </li>
                            </ul>

                            <div class="tab-content">

                                <div class="tab-pane fade show active" role="tabpanel" aria-labelledby="section-one">
                                    {{-- Tipo de liquidación --}}
                                </div>
                                <div class="tab-pane" role="tabpanel" aria-labelledby="section-two">
                                    {{-- Tipo de liquidación --}}
                                </div>

                                <input type="text" name="tipo" value="" id="iptTypeLi" style="visibility:hidden">
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                            <button type="submit" class="btn btn-success">Generar reporte</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
        <script>
           //Capturar tab section mensual
           var secMensual = document.getElementById("a-mensual");
           //Capturar tab section diaria
           var secDiario = document.getElementById("a-diario");

           //Capturar inputs one
           var iptTypeLi = document.getElementById("iptTypeLi");

           //Detectar cuando es clickeada la seccion mensual
           secMensual.addEventListener("click", ()=>{
             iptTypeLi.value = 'mensual'
             alert(iptTypeLi.value) //Quitar esto despues
           })

           //Detectar cuando es clickeada la seccion diaria
           secDiario.addEventListener("click", ()=>{
               iptTypeLi.value = 'diaria' 
               alert(iptTypeLi.value) // Quitar esto despues
           })
        </script>
      </body>
    </html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.