Formulários HTML: Problemas com campos desabilitados?

elbriga

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.881 ]

Por: Gabriel Ortiz Lour em 07/12/2006

0 0

Denuncie Favoritos Indicar Impressora

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

Instalando drivers para placas de vídeo SiS

Servidor Apache Profissional

Leitura recomendada

Dicas simples para dar mais usabilidades aos formulários

Select dinâmico com PHP, Javascript e MySQL

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

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

Web sites dinâmicos com Ajax + JSP + MySQL

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.

0 0

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

0 0

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

0 0