Open dynamic form only once

Question

Open dynamic form only once

Navigation

#1 by (1 votes)

0

I have the html code to create a ticket or sales invoice. And I want to add all the checks that are desired as a form of payment. For this I have a new check button that dynamically loads a form with the data of it and a button to register. But the problem is if I click more than once another form appears indefinitely. The idea is that until a check is loaded that does not appear another form, I mean one at a time.

<div class="row"> 
  <a id="nuevocheque" class="btn btn-primary">
    <span class="glyphicon glyphicon-new"></span>Nuevo Cheque
  </a>
</div>

<div id="datoscheque"></div>

And in factura.js:

$("#nuevocheque").click(function(){
   var formcheque='<div class="row"><label  class="col-sm-2 control- 
   label">BANCO</label><div class="col-sm-4">'+'<select id="bancos"><option 
   value"=0">Seleccione<option></select></div>'+'<label class="col-sm-2 control- 
   label">CUENTA N°</label>'+'<div class="col-sm-4">'+'<input type="text" 
   class="form-control" id="nrocuenta" placeholder="Cuenta 
   Bancaria"/>'+'</div>'+'<label class="col-sm-2 control- 
   label">Titular</label>'+'<div class="col-sm-4">'+'<input type="text" 
   class="form-control" id="titular" placeholder="Titular"/>'+'</div>'+' <label 
   class="col-sm-2 control-label">Fecha de Cobro</label>'+'<div class="col-sm- 
   4">'+'<input type="text" class="form-control" id="fechacobro" 
   placeholder="Deposito el:"/>'+'</div>'+'<label class="col-sm-2 control- 
   label">Importe</label>'+'<div class="col-sm-4">'+'<input type="text" 
   class="form-control" id="Importe" placeholder="Son pesos"/>'+'</div>'+'<div 
   class="row"> <a id="acreditar" class="btn btn-primary">'+'<span 
   class="glyphicon glyphicon-ok"></span>Ingresar al pago</a></div></div>';

   $(formcheque).appendTo("#datoscheque");
      listarbancos();

   $("#acreditar").click(function(){
      var Importe=$("#Importe").val();
      $("#cheques").val(Importe);
    });
});

How can I do it?

jquery

asked by Caruso 26.09.2018 в 09:45

source

1 answer

AJAX Update live data How to hide lectures on a web server

score 1 · Accepted Answer

A good option is to use the one () feature from jQuery , which serves to execute only once the assigned element

$("#nuevocheque").one('click', function(){
   var formcheque='<div class="row"><label class="col-sm-2 control-label">BANCO</label><div class="col-sm-4"><select id="bancos"><option value"=0">Seleccione<option></select></div><label class="col-sm-2 control-label">CUENTA N°</label><div class="col-sm-4"><input type="text" class="form-control" id="nrocuenta" placeholder="Cuenta Bancaria"/></div><label class="col-sm-2 control-label">Titular</label><div class="col-sm-4"><input type="text" class="form-control" id="titular" placeholder="Titular"/></div><label class="col-sm-2 control-label">Fecha de Cobro</label><div class="col-sm-4"><input type="text" class="form-control" id="fechacobro" placeholder="Deposito el:"/></div><label class="col-sm-2 control-label">Importe</label><div class="col-sm-4"><input type="text" class="form-control" id="Importe" placeholder="Son pesos"/></div><div class="row"><a id="acreditar" class="btn btn-primary"><span class="glyphicon glyphicon-ok"></span>Ingresar al pago</a></div></div>';

   $(formcheque).appendTo("#datoscheque");
      listarbancos();

   $("#acreditar").click(function(){
      var Importe=$("#Importe").val();
      $("#cheques").val(Importe);
    });
});

<div class="row"> 
  <a id="nuevocheque" class="btn btn-primary">
    <span class="glyphicon glyphicon-new"></span>Nuevo Cheque
  </a>
</div>

<div id="datoscheque"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Also edit the way you were creating the form, since you were concatenating each element of your form. In this case it is unnecessary since you are not concatenating variables of any kind.

You tell us colleague =)