1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

bloquear botão (em HTML) depois de se ter enviado os dados do formulário

Discussão em 'Web Development' iniciada por peter alien, 7 de Dezembro de 2007. (Respostas: 9; Visualizações: 3965)

  1. peter alien

    peter alien Power Member

    Poderiam-me dizer como posso fazer para, quando um utilizador clica no botão de Submit de um formulario, ele não possa voltar a carregar nele logo de seguida?

    É que eu reparei que quando se carrega no botão após se ter introduzido os dados no formulário, no periodo em que os dados são processados para a BD, o utilizador pode continuar a carregar no botão quantas vezes quiser. Quando fui abrir a BD tinha carradas de entradas repetidas :(

    Existe alguma maneira de evitar que isso aconteça?
     
  2. alfinete

    alfinete Power Member

    isso para repetir os registos na bd, é porque não fizeste validações aos campos da bd , se eram ou não obrigatorios preencher etc etc etc.

    ja agra qual a linguagem que estas a utilizar para ligar a bd?

    ja agora esse botão nunca se põe desactivo, tens é de ter essas validações bemfeitas , para não teres esse tipo de problemas.
     
  3. p3dro

    p3dro Power Member

    Vê se isto te ajuda em alguma coisa

    Código:
    <html>
    <head>
      <script type="text/javascript">
        function ValidateForm(frm){
          var result=true;
          var bt=document.getElementById("btSubmit");
          
          //fazer aqui, por ex. validações de campos ...
          if(!frm.txt.value){
            result=false;
          }
          //
          
          if(result) { //tudo bem preenchido
            bt.disabled=true; //desactivar botão submit
          }
          else{ //erros preenchimento
            alert("Faltam preencher campos ...");
          }
    
          return result;
        }
      </script>
    </head>
    <body>
      <form id="frm" name="frm" onsubmit="return ValidateForm(this)">
        Teste <input type="text" id="txt"><br>
        <input type="submit" id="btSubmit" value="Submit">
      </form>
    </body>
    </html>
    
    Não testei por isso não sei funciona correctamente sem alguns toques :P

    Mas basicamente o que faz é quando é activado o submit (onsubmit) do formulário é chamada uma função javascript que desactiva o botão, e poderá também fazer a validação dos campos, verificar se por ex. algum se encontra bem preenchido, fiz isso no exemplo, mas não é de todo obrigatório, já que o fundamental é validar os dados no lado do servidor, já que do cliente basta não ter javascript activo para que não efectue a validação.
    Mas pronto tens lá a instrução que te vai permitir desactivar o botão (espero eu :)) depois de feito o submit. Como te disse, não experimentei o código ...

    Também convém teres esse cuidado quando inseres os dados, ou arranjares outro mecanismo, porque basta o cliente fazer Refresh à página para estar constantemente a guardar na BD.

    Espero ter ajudado.
     
    Última edição: 7 de Dezembro de 2007
  4. peter alien

    peter alien Power Member

    Todos os campos validei-os usando javascript (e são validados em tempo real, usando eventos onkeypressed e onkeydown nas linhas onde defini os controlos HTML), o problema mesmo é que na altura de se clicar no botão, o tempo que leva o servidor a processar os dados, um utilizador poderá sempre continuar a clicar no botão e claro vai mandar novamente os dados para a BD.


    Estou a utilizar ASP.NET com acesso a uma BD em Access.

    Já agora haverá uma maneira de evitar que o utilizador faça o refresh? Não existe uma instrução que se coloca nos META TAGS que faz com que passado um certo tempo essa página perca a validade e depois seja preciso que ela carregue novamente, ou estou a divagar?
     
    Última edição: 9 de Dezembro de 2007
  5. K0mA

    K0mA Power Member

    Faz assim:

    Quando é introduzido um dado na base de dados, REDIRECIONAS para outra página 'os dados foram introduzidos clique aqui para voltar'.
     
    Última edição: 9 de Dezembro de 2007
  6. p3dro

    p3dro Power Member

    Já que utilizas outra forma para validar os dados, podes então simplificar o ex. que já te tinha dado:

    Código:
    <html>
    <head>
      <script type="text/javascript">
        function PreventMultipleSubmit(){
          document.getElementById("btSubmit").disabled=true;
        }
      </script>
    </head>
    <body>
      <form id="frm" name="frm" onsubmit="PreventMultipleSubmit();">
        Teste <input type="text" id="txt"><br>
        <input type="submit" id="btSubmit" value="Submit">
      </form>
    </body>
    </html>
    Assim quando é iniciado o submit do form o botão é desactivado.


    Em relação ao outro ponto do refresh da página, podes por ex. (após guardares os valores na base de dados e fazeres as operações que tiveres que efectuar) usar o Response.Redirect; ou por ex. verificares se o registo já foi inserido novamente, n sei que valores estás a inserir, mas se por ex. fôr um registo de uma conta, hás-de ter um elemento identificativo do utilizador, seja ele o e-mail, um username, um BI, etc, etc, sempre que fores a inserir um registo terás de verificar se já tens um registo na BD com esse elemento identificador, assim se por ex. fizeres 1 refresh podes verificar se ele já existe ou não; mas devem existir várias maneiras.
     
  7. nothing

    nothing Power Member

    Em relação ao desactivar o botão e dado que estás a trabalhar com asp podes sempre meter o botao.enabled = false; no método onclick() desse botão.

    Para a página perder a validade tens que definir o timeout da sessão (metes a 1 por exemplo) ou provocares tu esse fim de sessão com o Session.Abandon() por exemplo.
     
  8. p3dro

    p3dro Power Member

    Como vês soluções não faltam

    :x2:
     
  9. peter alien

    peter alien Power Member

    A parte do evento onclick do botão não funcionou, não sei porquê ?!!!! o código tambem tinha lógica!

    Mas finalmente depois de experimentar de várias maneiras a ultima que experimentei que foi usar o "document.getElementById("btSubmit").disabled=true;" finalmente funcionou... já estava a desesperar com aquilo :(

    Obrigadão a todos pelas dicas.
     
  10. Tyran

    Tyran Power Member

    Não seria melhor fazer esse check aquando do submeter os dados na bd, porque podem sempre alterar isso com javascript injection ou não?
    cumpzz
     

Partilhar esta Página