Formulários HTML: Problemas com campos desabilitados?

Que desenvolvedor web nunca teve problemas com os campos desabilitados não irem no request?!? Pois é. Tivemos muito aqui! Foi aí que tive a idéia deste maravilhoso JavaScript que resolve o problema.

[ Hits: 25.134 ]

Por: Gabriel Ortiz Lour em 07/12/2006


Pequeno PHP para testes



index.php:

<html>
   <head>
      <script>
function arrumarCampoDesabilitado(node) {
   var tipo = node.getAttribute("type");
   if(tipo == "radio" && !node.checked) return;
  
   var nome = node.getAttribute("name");
   var val  = node.value;
   if(tipo == "checkbox") val = (node.checked) ? "on" : "";
  
   node.setAttribute("name", nome+"H");

  var novoCampo = document.createElement('input');
   novoCampo.setAttribute('type', 'hidden');
   novoCampo.setAttribute('name', nome);
   novoCampo.setAttribute('value', val);
   node.parentNode.appendChild(novoCampo);
}
function procuraDesabilitados(node) {
   if(node!=null) {
      if(((node.nodeName == "INPUT" && node.getAttribute("type")!="button") || node.nodeName == "SELECT") && node.disabled) {
         arrumarCampoDesabilitado(node);
      }
      if(node.hasChildNodes())
         for(var j=0; j<node.childNodes.length; j++)
            procuraDesabilitados(node.childNodes[j]);
   }
}
         function aoEnviar() {
            var _formularioZero = document.forms[0];
            if(_formularioZero) procuraDesabilitados(_formularioZero);
            
            document.form0.submit();
         }
        
         function btDisab() {
            document.form0.campoTexto.disabled = true;
            document.form0.campoCheck.disabled = true;
            document.form0.campoRadio[0].disabled = true;
            document.form0.campoRadio[1].disabled = true;
            document.form0.campoCombo.disabled = true;
         }

      </script>
   </head>
   <body>
      <form action="mostra.php" name="form0" method="post" id="formulario">
         campoTexto: <input type="text" name="campoTexto" value="teste" /><br />
         campoCheck: <input type="checkbox" name="campoCheck" checked /><br />
         campoRadio: <input type="radio" name="campoRadio" value="A" checked /> A - <input type="radio" name="campoRadio" value="B" /> B<br />
         campoCombo: <select name="campoCombo">
            <option value="AAA">AAA</option>
            <option value="BBB">BBB</option>
            <option value="CCC">CCC</option>
         </select>
         <br />
         <br />
         <input type="button" value="Disab" onclick="btDisab()" /><br />
         <br />
         <input type="button" value="Vai!" onclick="aoEnviar()" />
      </form>
   </body>
</html>

mostra.php:

<html>
   <head>
   </head>
   <body>
      campoTexto: <? echo $_POST['campoTexto']; ?> <br>
      campoCheck: <? echo $_POST['campoCheck']; ?> <br>
      campoRadio: <? echo $_POST['campoRadio']; ?> <br>
      campoCombo: <? echo $_POST['campoCombo']; ?> <br>
   </body>
</html>

É só colocar em um Apache para rodar o PHP e testar enviando o pequeno formulário. Tem um botãozão para desabilitar tudo. É só um testezinho...

Página anterior    

Páginas do artigo
   1. Explicando o abacaxi...
   2. Código JavaScript
   3. Pequeno PHP para testes
Outros artigos deste autor

Servidor Apache Profissional

Instalando drivers para placas de vídeo SiS

Leitura recomendada

Dicas simples para dar mais usabilidades aos formulários

Verificando a consistência de um formulário com JavaScript

Select dinâmico com PHP, Javascript e MySQL

Verificando a consistência de CPF e CNPJ em um formulário com JavaScript

XSS - Cross Site Scripting

  
Comentários
[1] Comentário enviado por Bruno Faria em 07/12/2006 - 20:49h

Realmente este problema de enviar os dados dos campos desabilitados eh uma dor d cabeça para a maioria dos desenvolvedores. Como voce disse, esperaremos pela versao 2 para verificar se tal bug fora corrigido.

[2] Comentário enviado por ls_junior em 08/12/2006 - 07:27h

Na minha opnião os campos desabilitados não devem fazer parte do request, para isso tem-se o atributo readonly, que não permite a alteração do valor. No caso dos select/radio/checkbox, que ignoram o atributo readonly, basta desabilitá-los e, antes de enviar o formulário, habilitá-los novamente.

...
function enviarDados() {
for(var i = 0; i < document.form.elements.length; i++) {
if(document.form.elements[i].disabled) {
document.form.elements[i].disabled = false;
}
}
return true;
}
...
<form name="form" id="form" method="post" onsubmit="return enviarDados();">
...


PS: Solução é bastante interessante.

[3] Comentário enviado por jonathantavares em 20/09/2007 - 00:49h

Esses formularios sao bastante interessantes e com boa utilização, mas sempre tem alguns problemas com esses campos, mas existen n solucoes!


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts