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

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

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

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

AJAX - Parte 1

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