Having an input hidden and clicking on a button

0

good day, I hope you can help me with this I comment in great detail. I have my page which from the beginning shows an input text in which certain information is placed, it is important that this input is there. The detail is that I need to hide it or disable it, because first I fill a small form and when I finish filling that form that is in a modal window, the input text is enabled or displayed on my page.

button that is in a menu to activate the modal

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

modal where the form is

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

by clicking on the save button, it only saves the information but it does not close the modal, so I have to put the other button, I put the function data-dismiss="modal" to the guaradar button but it did not work

function with which saves the modal info

$(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 that is on my page that I occupy that disappears or is disabled at the beginning and appears after completing the form.

<form id="codigobarras" class="codigo">
              <input type="text" name="codigo" id="codigo" placeholder="Escanear Codigo de Barras del DN" class="codigo"/>
            </form>
    
asked by fokus 13.06.2018 в 00:04
source

2 answers

0

I work this better since style="display: none" is always present and does not disable with jquery so what happened to me is to do this if it worked for me at least.

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

                </script>
</header>

this I put it at the beginning so that the input would be disabled and later I could enable it later. After the data is sent I put an if if the data is not sent continue to be disabled and if you send the data enable the 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;
        });
}); 

The only thing I could not do is that by clicking on the save button it can be closed but it adds and enables the input text I hope it serves them ..

    
answered by 14.06.2018 / 20:34
source
0

The modal has it right, now we hide the form you want to disable first

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

And now in the ajax we do this when we receive an answer, if it does not work the success changes completely, since the complete one admits both errors and ok in the answers

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

Only if the modal fields are all filled, we send the ajax, otherwise nothing happens and the barcode will remain hidden as long as we do not fill in all the fields

    
answered by 13.06.2018 в 11:48