0

buen dia, espero me puedan ayudar con esto les comento a gran detalle. Tengo mi pagina la cual desde un inicio muestra un input text en el cual se coloca cierta informacion es importante que ese input este ahi. el detalle es que necesito ocultarlo o desabilitado ya que primero ocupo llenar un pequeño formulario y al terminar de llenar ese formulario que se encuentra en una ventana modal se habilite o aparesca el input text en mi pagina.

boton que esta en un menu para activar el modal

<li><a href="#" data-toggle="modal" data-target="#modalForm">Datos Camion</a></li>

modal donde esta el formulario

<!-- Modal -->
<div class="modal fade" id="modalForm" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</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 id="frmCamion" method="POST" >

                    <div class="form-group">
                        <label for="remolque">Numero de Remolque</label>
                        <input type="text" name="remolque" id="remolque" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label for="unidad">Numero de Unidad</label>
                        <input type="text" name="unidad" id="unidad" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label for="fecha">Fecha</label>
                        <input type="date" name="fecha" id="fecha" class="form-control" required>
                    </div>

                <div class="form-group">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            <button class="btn btn-info" id="guardar">Guardar</button>
                </div>

                    </form>
      </div>
    </div>
  </div>
</div>

al darle click al boton de guardar solo guarda la informacion pero no cierra el modal por eso tengo que poner el otro boton le puse la funcion data-dismiss="modal"al boton de guaradar pero no funciono

funcion con la que guarda la info del modal

$(document).ready(function(){
                     $('#guardar').click(function(){
                         var datos=$('#frmCamion').serialize();
                         $.ajax({
                             type:"POST",
                             url:"php/registrar.php",
                             data:datos,
                             success:function(r){

                             }
                         });

                         return false;
                     });
             });

input text que esta en mi pagina que ocupo que desaparesca o se desabilite al inicio y aparesca despues de llenar el formulario.

<form id="codigobarras" class="codigo">
              <input type="text" name="codigo" id="codigo" placeholder="Escanear Codigo de Barras del DN" class="codigo"/>
            </form>
1
  • para ocultar tu modal ocupa: $('#modalForm').modal('hide'); en el evento success o error, ya depende de ti.... luego de eso tan solo mandarias a mostrar tu input en el success con: $("#mi_input_oculto").show(); el 14 jun. 2018 a las 17:47

2 respuestas 2

0

El modal lo tienes bien, ahora bien ocultamos primero el form que quieres deshabilitar

<form id="codigobarras" class="codigo" style="display:none">
              <input type="text" name="codigo" id="codigo" placeholder="Escanear Codigo de Barras del DN" class="codigo"/>
            </form>

Y ahora en el ajax hacemos esto cuando recibimos una respuesta, si no funciona cambia el success por complete, ya que el complete admite tanto errores como ok en las respuestas

$(document).ready(function(){
   $('#guardar').click(function(){
          if(
            $('input#remolque').val()!="" &&
            $('input#unidad').val()!="" &&
            $('input#fecha').val()!="" &&
            ){
             var datos=$('#frmCamion').serialize();
             $.ajax({
               type:"POST",
               url:"php/registrar.php",
               data:datos,
               success:function(r){
                 $("#codigobarras").show();
               }
             });
          }
          return false;
      });
});

Solo si los campos del modal están todos rellenos enviamos el ajax, sino no ocurre nada y el codigobarras permanecera oculto mientras no rellenemos todos los campos

10
  • gracias por tu respuesta @jorgeBowen, pero aqui lo que me hace es ocultar el boton de guardar y el detalle que cuando cargue la pagina aparesca oculto este form #codigobarras. y al llenar el formulario reaparesca el formulario #codigobarras
    – francisco
    el 13 jun. 2018 a las 15:19
  • Vale, el formulario código de Barras necesariamente tiene qué estar fuera del modal o te da igual dónde esté??? Puede estar dentro del modal también??? el 13 jun. 2018 a las 17:21
  • si tiene que estar fuera del modal, el modal con el pequeño formulario es solo para tener un poco de informacion diaria y el form codigo de barras tiene que estar fuera para estar recibiendo la informacion de lo escaneado
    – francisco
    el 13 jun. 2018 a las 18:02
  • te he actualizado la respuesta, tanto el html como el script el 14 jun. 2018 a las 8:23
  • no me funciona, al llenar el formulario y darle guardar se cierra el formulario y no manda los datos, pero el detalle que despues no aparece el input despues de cerrarce el modal no aparece nada creo que por el style que le estas pasando lo desapareces por completo y con el jquery lo estas volviendo a ocultar.
    – francisco
    el 14 jun. 2018 a las 15:39
0

me funciono esto mejor ya que style="display:none" siempre esta presente y no desabilita con jquery entonces lo que se me ocurrio es hacer esto que si me funciono al menos a mi.

<header>
<script type="text/javascript">
                        $(document).ready(function(){
                            $('#codigobarras #codigo').hide();
                        });

                </script>
</header>

esto lo puse al principio para que comenzara desabilitado el input y despues poderlo habilitar mas adelante. despues de que se mandan los datos puse un if de que si no se mandan los datos siga desabilitado y si manda los datos habilite el input.

$(document).ready(function(){
            $('#guardar').click(function(){
                var datos=$('#frmCamion').serialize();
                $.ajax({
                    type:"POST",
                    url:"php/registrar.php",
                    data:datos,
                    success:function(r){
                        if(r==1){
                            $("#codigobarras #codigo").hide();
                        }else{
                             $("#codigobarras #codigo").show();
                        }

                    }

                });

            return false;
        });
}); 

lo unico que no pude hacer es que al darle al boton guardar se pueda cerrar pero agrega y habilita el input text espero les sirva..

Tu Respuesta

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

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