24 Janeiro 2006
Tabelas Dinâmicas
Em meu último post eu fiz uma página HTML que acessava uma página em PHP que retornava um array de objetos JavaScript e inseria em uma tabela.
Acho que muitos não conheciam essa técnica HTML de inserção de dados em uma tabela via JavaScript, fazendo assim uma tabela dinâmica.
Continuo usando a prototype, que ela ajuda muito no desenvolvimento de programas em JavaScript, reduzindo o tamanho dos códigos e até mesmo o entendimento. Mas neste post vou utilizar o acesso direto as funções JavaScript bem como aos objetos do DOM.
A função de uma tabela em (X)HTML é de armazenar dados.
Se difundiu pelo mundo o uso de tabelas como uma forma de montar layouts de páginas HTML. Numa época que não haviam muitos padrões entre os browsers, isso ajudava no desenvolvimento de páginas que conseguiam ser iguais em plataformas diferentes. Esse "vício" continua até hoje, mas com algumas tendências de mudança, como Tableless. Essas tendências fizeram com que muitos webdesigners migrassem para o uso de formatações seguindo padrões normalizados pela W3C.
Os elementos de uma tabela são:
Ainda existem os elementos COL e COLGROUP que estilos e agrupamento em colunas.
Vejamos um exemplo de tabela utilizando uma formatação estruturada:
Note que o tfoot está abaixo do thead, mas mesmo assim ele aparece no final da tabela.
Veja esse exemplo com uma aplicação de estilo simples: Exemplo 1
Vamos agora fazer as funções via JavaScript.
Para acessar a tabela via JavaScript fazemos o seguinte:
Com isso recuperamos a tabela do HTML.
Agora vamos excluir as linhas existentes na tabela. O atributo rows contém as linhas da tabela informada:
Para limpar a tabela é só fazer um loop que percorre todas as linhas e apague uma a uma, exceto o cabeçalho.
Para inserir uma linha é só utilizar o método insertRow(índice) capturando o retorno em uma variável.
O Índice é a posição em que a linha irá aparecer na tabela. Coloque -1 para que apareça no final da tabela, 0 para sempre aparecer no inicio(isso fará com que a linha apareça acima do titulo), ou 1 para aparecer na segunda linha e caso tenha mais linhas é só mudar o índice.
Após isso utilize a variavel linha para inserir as celulas para essa linha:
Ao criar a célula e armazenarmos o conteúdo na variavel coluna1 ainda foi inserido o estilo e o texto que aparecerá na célula. Pode também ser definido uma cor de fundo e qualquer propriedade que a celula venha a ter.
Veja o exemplo completo: Exemplo 2
Acho que muitos não conheciam essa técnica HTML de inserção de dados em uma tabela via JavaScript, fazendo assim uma tabela dinâmica.
Continuo usando a prototype, que ela ajuda muito no desenvolvimento de programas em JavaScript, reduzindo o tamanho dos códigos e até mesmo o entendimento. Mas neste post vou utilizar o acesso direto as funções JavaScript bem como aos objetos do DOM.
A função de uma tabela em (X)HTML é de armazenar dados.
Se difundiu pelo mundo o uso de tabelas como uma forma de montar layouts de páginas HTML. Numa época que não haviam muitos padrões entre os browsers, isso ajudava no desenvolvimento de páginas que conseguiam ser iguais em plataformas diferentes. Esse "vício" continua até hoje, mas com algumas tendências de mudança, como Tableless. Essas tendências fizeram com que muitos webdesigners migrassem para o uso de formatações seguindo padrões normalizados pela W3C.
Os elementos de uma tabela são:
- <table></table>
- A tag principal de controle de tabela. Toda as partes de uma tabela ficam dentro dessa tag.
- <tr></tr>
- Ou Table Row, é a definição de uma linha na tabela. Dentro dela pode conter th ou td.
- <th></th>
- Ou Table Header, são as tags que definem células como header para a tabela.
- <tr></tr>
- Ou Table Data, são as células que contém dados na tabela.
- <thead></thead>
- Define a seção de cabeçalho da tabela
- <tbody></tbody>
- Define o corpo da tabela. Pode-se usar o tBody para formatar partes da tabela com estilos diferentes, podendo ter mais de um elemento tBody em uma tabela.
- <tfoot></tfoot>
- Define o rodapé de uma tabela.
- <caption></caption>
- Fornece a tabela um titulo ou descrição do que contém na tabela. Utilizando o caption a organização da informação é correta
Ainda existem os elementos COL e COLGROUP que estilos e agrupamento em colunas.
Vejamos um exemplo de tabela utilizando uma formatação estruturada:
<table id="tabela1">
<caption>Tabela 1</caption>
<thead>
<tr>
<th>Codigo</th>
<th>Nome</th>
<th>Idade</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Rodapé da Tabela</td>
</tr>
</tfoot>
<tbody class="estilo1">
<tr>
<td>1</td>
<td>Pedro</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>João</td>
<td>30</td>
</tr>
</tbody>
</table>
Note que o tfoot está abaixo do thead, mas mesmo assim ele aparece no final da tabela.
Veja esse exemplo com uma aplicação de estilo simples: Exemplo 1
Vamos agora fazer as funções via JavaScript.
Para acessar a tabela via JavaScript fazemos o seguinte:
var table1 = document.getElementById("tabela1");
Com isso recuperamos a tabela do HTML.
Agora vamos excluir as linhas existentes na tabela. O atributo rows contém as linhas da tabela informada:
//Para pegar todas as linhas,
//exceto a ultima, é necessário colocar - 1
var totLinhas = i<table1.rows.length - 1;
//Removendo as linhas da tabela,
//iniciando pela segunda
for(i=1;totLinhas;i++){
//Seleciona a segunda linha para ser excluida
// para que não seja removido o cabeçalho
table1.deleteRow(1);
}
Para limpar a tabela é só fazer um loop que percorre todas as linhas e apague uma a uma, exceto o cabeçalho.
Para inserir uma linha é só utilizar o método insertRow(índice) capturando o retorno em uma variável.
var linha = table1.insertRow(1);
O Índice é a posição em que a linha irá aparecer na tabela. Coloque -1 para que apareça no final da tabela, 0 para sempre aparecer no inicio(isso fará com que a linha apareça acima do titulo), ou 1 para aparecer na segunda linha e caso tenha mais linhas é só mudar o índice.
Após isso utilize a variavel linha para inserir as celulas para essa linha:
//Inserção de Celulas
var coluna1 = linha.insertCell(-1);
//Definindo o estilo para a célula
coluna1.className = "celula1";
//Definindo o conteúdo para a célula
coluna1.innerHTML = "1";
var coluna1 = linha.insertCell(-1);
coluna1.className = "celula1";
coluna1.innerHTML = "Pedro";
var coluna1 = linha.insertCell(-1);
coluna1.className = "celula1";
coluna1.innerHTML = "25";
Ao criar a célula e armazenarmos o conteúdo na variavel coluna1 ainda foi inserido o estilo e o texto que aparecerá na célula. Pode também ser definido uma cor de fundo e qualquer propriedade que a celula venha a ter.
Veja o exemplo completo: Exemplo 2
22 Janeiro 2006
Acessando banco de dados
Existem várias maneiras de fazer comunicação entre banco e páginas pelo conceito de HTTPRequest.
O método que mais uso, e nem sei se posso chamar de AJAX, pois não utilizo XML, é retornando um array de uma página que acessa informações no banco em JavaScript que contém um objeto com o resultado do banco.
Para isso veremos o codigo da página php que processa a requisição:
var Usuarios = new Array();
Usuarios[0] = new Object();
Usuarios[0].Nome = 'Joao';
Usuarios[0].Login = 'lolados1';
Usuarios[0].Email = 'teste1@lolados.com';
Usuarios[1] = new Object();
Usuarios[1].Nome = 'Luiz';
Usuarios[1].Login = 'lolados2';
Usuarios[1].Email = 'teste2@lolados.com';
Usuarios[2] = new Object();
Usuarios[2].Nome = 'Carlos';
Usuarios[2].Login = 'lolados3';
Usuarios[2].Email = 'teste3@lolados.com';
Usuarios[3] = new Object();
Usuarios[3].Nome = 'Pedro';
Usuarios[3].Login = 'lolados3';
Usuarios[3].Email = 'teste4@lolados.com'
Acesse o retorno desse script
Dessa maneira, conseguimos trazer qualquer informação e de uma forma bem fácil de carregar em uma página solicitante. Veja a parte do JavaScript que faz essa solicitação:
A função de retorno do Ajax.Request eCarregaUsuarios, recebe o objeto de retorno da solicitação.
É feita uma validação no conteúdo para ver se foi retornado com o conteúdo de Usuários, validando o texto é executado pela função eval() do JavaScript, que faz com que o conteudo de um texto seja transformado em script.
Após isso é só acessar o array de Usuarios como se tivesse na página, pois a função eval() fez com que estes existam.
Veja o exemplo funcionando: Exemplo 1
O método que mais uso, e nem sei se posso chamar de AJAX, pois não utilizo XML, é retornando um array de uma página que acessa informações no banco em JavaScript que contém um objeto com o resultado do banco.
Para isso veremos o codigo da página php que processa a requisição:
var Usuarios = new Array();
Usuarios[0] = new Object();
Usuarios[0].Nome = 'Joao';
Usuarios[0].Login = 'lolados1';
Usuarios[0].Email = 'teste1@lolados.com';
Usuarios[1] = new Object();
Usuarios[1].Nome = 'Luiz';
Usuarios[1].Login = 'lolados2';
Usuarios[1].Email = 'teste2@lolados.com';
Usuarios[2] = new Object();
Usuarios[2].Nome = 'Carlos';
Usuarios[2].Login = 'lolados3';
Usuarios[2].Email = 'teste3@lolados.com';
Usuarios[3] = new Object();
Usuarios[3].Nome = 'Pedro';
Usuarios[3].Login = 'lolados3';
Usuarios[3].Email = 'teste4@lolados.com'
Acesse o retorno desse script
Dessa maneira, conseguimos trazer qualquer informação e de uma forma bem fácil de carregar em uma página solicitante. Veja a parte do JavaScript que faz essa solicitação:
A função de retorno do Ajax.Request eCarregaUsuarios, recebe o objeto de retorno da solicitação.
É feita uma validação no conteúdo para ver se foi retornado com o conteúdo de Usuários, validando o texto é executado pela função eval() do JavaScript, que faz com que o conteudo de um texto seja transformado em script.
Após isso é só acessar o array de Usuarios como se tivesse na página, pois a função eval() fez com que estes existam.
Veja o exemplo funcionando: Exemplo 1
16 Janeiro 2006
Tutorial prototype -> Objeto Insertion
Mais um meio de manipular conteúdo que a prototype proporciona.
O Objeto Insertion serve para que se possa controlar um elemento, podendo colocar conteúdo dentro do elemento ou fora, podendo ser definido antes do elemento, no inicio, no fim ou após o elemento.
Olá Senhor <span id="texto">, como está?</span>
<script>new Insertion.Before("texto","Pedro");</script>
O texto resultante seria:
Olá Senhor Pedro<span id="texto">, como está?</span>
O Objeto Insertion pode ter os seguintes métodos:
Insertion.Before(elemento, valor) - Insere antes do elemento
Insertion.Before(elemento, valor) - Insere antes do elemento
Insertion.After(elemento, valor) - Insere após o elemento
Insertion.Top(elemento, valor) - Insere no inicio do elemento
Insertion.Bottom(elemento, valor) - Insere no final do elemento
Veja o exemplo: Exemplo 1
11 Janeiro 2006
Tutorial prototype -> Classes em JavaScript
Fazer Classes em JavaScript não é complicado, mas com a biblioteca prototype ficou ainda mais facil fazer.
Se você tem experiência em Orientação a Objetos verá que utilizar classes em JavaScript ajuda muito, principalmente em um sistema em Ajax.
Criando classes é possivel separar funções que muitas vezes ficam jogadas no meio do código e isso facilita o acesso a essas funções.
Vou mostrar um exemplo e explicar:
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
//Nesta linha é criada uma variavel que será uma classe
var Aluno = new Class.create();
//Declaração da classe;
Aluno.prototype = {
//Esse método é usado como construtor da classe
//Nele passa-se os parametros da construção da classe
// e se inicia as váriaveis
initialize: function (vCodigo, vNome){
this.codigo = vCodigo;
this.nome = vNome;
// o objeto "this" faz referencia a variaveis da classe
}, //Utilize virgula entre uma função e outra
// esse método ira imprimir as informações do aluno
Imprimir: function(){
document.write("Codigo:" + this.codigo + "<br />");
document.write("Nome:" + this.nome + "<br />" );
}
}
var cAluno = new Aluno(123,'Pedro');
cAluno.Imprimir();
</script>
Veja esse exemplo funcionando aqui: aluno.htm
O interessante das classes em Prototype é que vc consegue fazer um bloco como uma classe desenvolvida em Java ou outra linguagem.
No modelo convencional é necessário que se crie funções e se declare cada uma delas como filhos da função inicial para transforma-la em classe, além de ter que utilizar uma propriedade de uma função chamada Protoype (é o mesmo nome, mas não se confunda) para determinar como um item da classe.
Para exemplificar um pouco mais esse funcionamento, criei um exemplo bem interessante de uso de classe. Espero que se divirtam: carro.htm
Qualquer duvida em relação a classes coloquem comentários.
04 Janeiro 2006
Gerenciador de documentos AJAX
Poderia ser só mais um editor de documentos, mas o Writely gerencia documentos e as edições.
Imagina você editando um texto que fica compartilhado na rede e clica em salvar. Simples não?!
Só imagina que antes de você salvar alguém foi lá e abriu o mesmo documento e depois veio a salvá-lo novamente, só que perdendo o que você tinha feito.
Acho que já aconteceu com todos algo parecido.
Bem, o Writely ajuda nisso. Ele tem um editor de documentos que se outras pessoas estiverem editando ao mesmo tempo o mesmo documento ele tem a capacidade de avisar que existe outra pessoa editando. Mas não para por aí, ele atualiza os documentos para os usuários coforme vai sendo editado pelos outros usuários.
Fantástico! Tudo isso com a ajuda do bom DHTML e de Ajax.
Acesse o site: http://www.writely.com
O cadastro é gratuito.
Microsoft x Google
A disputa está ficando boa.
Depois do Google desktop e MSN Desktop (exemplo mais recente da disputa) a Microsoft agora vem bater de frente com o Google novamente.
Foi lançado o Live (http://www.live.com/), uma home page personalizada como o Google tem investido na sua home page de busca.
Achei que o Live tem um ambiente bem mais leve que o Google e funciona muito bem.
Há a possibilidade de cadastrar RSS Feed para acompanhar atualizações de sites de noticias e blogs.
Essa competitividade é muito boa, pois vem carregada de novas tecnologias.
Ajax Desktop
Vou quebrar um pouco a série de tutoriais prototype porque acabei descobrindo um site que usa Ajax que achei que vale a pena ser citado.
A idéia é de você ter um desktop no site deles, contendo RSS Reader, Links prediletos, entre outras coisas.
Vale a pena se cadastrar para dar uma olhada.
03 Janeiro 2006
Tutorial prototype -> Ajax.Updater
Eis uma ajuda pra quem nem conhece muito de programação.
Ajax.Updater é uma daquelas ferramentas que realmente ajudam nas atualizações de conteúdo em páginas de forma dinâmica e instantânea.
Imagina uma div numa página dessa maneira:
<div id="teste1"></div>
Agora vamos popular essa DIV com algum conteúdo fixo na página:
document.getElementById("teste1").innerHTML = "<b>Olá Mundo</b>";
Bom, acho que isso não deve ter nada de novo pra quem já programa em JavaScript ou que faz alguns Plus em DHTML.
Mas aí que está a diferença, você não vai precisar fazer nem isso se quiser atualizar o conteúdo de uma DIV via Ajax usando prototype.
Olhe como funciona essa função:
var myAjax = new Ajax.Updater("IDdaDIV", URL, {method:'get', parameters:pars});
pronto, a atualização é feita na DIV IDdaDIV pela URL informada. Complicado de entender? Então veja o exemplo completo:
<script src="prototype.js"></script>
<script>
function pegaHTML(){
var url = "http://www.lolados.com/ajax/exemplos/conteudo.htm";
var pars = "";
var meuAjax = new Ajax.Updater('conteudodinamico', url, {method: 'get',
parameters: pars});
}
</script>
<input type="button" value="Carrega Conteúdo" onclick="pegaHTML()" />
<div id="conteudodinamico"></div>
E é isso..
simples não? Agora vocês podem fazer seus menuzinhos atualizaveis e outras coisas mais...
Vejam o exemplo que fiz: Exemplo 1
02 Janeiro 2006
Tutorial prototype -> Ajax.Request
A biblioteca prototype contém várias classes para auxiliar no processo de desenvolvimento, mas muitas delas foram criadas para dar suporte ao desenvolvimento dos métodos principais da biblioteca, por isso abordarei somente o que é necessário para utilizar as ferramentas de Ajax.
A Classe Ajax.Request é a principal quando se quer trabalhar com acesso a dados em outras páginas através de JavaScript.
Vou montar um exemplo e explica-lo em seguida: Exemplo1
<HTML>
<HEAD>
<TITLE>Exemplo Ajax</TITLE>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<script type="text/javascript" src=" prototype.js"></script>
<script type="text/javascript">
function AbreAjax(){
//URL com a página que será chamado
var url = "http://www.lolados.com/ajax/exemplos/capitais.php ";
//parametros da URL (utilizando o serialize)
var pars = Form.serialize("frmEstado" );
Form.disable("frmEstado");
//Chamando metódo Ajax.Request()
var myAjax = new Ajax.Request( url, {method: 'post',
parameters: pars,
onComplete: MostraCapital,
onSuccess: Sucesso,
onFailure: ComErro} );
}
//função que trata erros
function ComErro(or1){
alert("Houve um erro na solicitação das informações." );
Form.enable("frmEstado");
}
function Sucesso(or1){
$("Sucesso").innerHTML = "Informações carregadas com sucesso." ;
setTimeout("$('Sucesso').innerHTML = ''",2000);
Form.enable("frmEstado");
}
//função que é chamada ao final do carregamento da página
function MostraCapital(or1){
if (or1.responseText != "")
//Pega o retorno da Solicitação e preenche a div
$("Capital").innerHTML = "A capital de "
+ $F("estado") + " é " + or1.responseText ;
else
$("Capital").innerHTML = "";
Form.enable("frmEstado");
}
</script>
</HEAD>
<BODY>
<h2>Consulta Capital</h2>
<form name="frmEstado" id="frmEstado">
<div id="Capital" style="font-weight:bold;color:red;"></div>
Estado: <input type="text" name="estado" id="estado" size="2" maxlength="2" /><br />
<input type="button" value="Solicitar Estado"onclick="AbreAjax()" />
<div id="Sucesso" style="font-weight:bold;color:navy;"></div>
</form>
</BODY>
</HTML>
O principal nesse passo é a chamada ao objeto Ajax.Request que vai fazer todo o processo de chamada de página que retornará o conteúdo solicitado.
São dois os parametros passados. O primeiro é a URL e o segundo um objeto anônimo que contem 3 parametros.
Vamos analisar os parametrôs passados:
URL - é a página a ser chamada pelo método.
method - é o metódo que será enviado os parametros para a página, via POST ou GET
parameters - uma string contendo os parametros a serem passados
onComplete - aqui é informada a função a ser chamada assim que o processo de carga for completo.
onSuccess - função que será chamada caso o processo de carga do Ajax tenha tido sucesso.
onFailure - função que será chamada caso o processo de carga do Ajax tenha tido falha.
Quando a função de onComplete é chamada ela retorna o objeto response que contém as funcionalidades de captura de resultados (mesmo do objeto HttpRequest).
Utiliza-se o método responseText para acessar o texto de retorno da página e assim tem o retorno sendo exibido.
Acesse novamente o exemplo aqui: Exemplo1
Em um proximo tópico vou ensinar como dá para utilizar esse método para fazer request de códigos javascripts e utilizar o eval para utilizá-lo.
Tutorial prototype -> Atalhos e funções
A biblioteca já vem com diversas funções com utilitários que ajudam no processo de desenvolvimento, evitando redigitação e até mesmo ajudando a evitar erros que podem vir com códigos muito longos.
Função $("ID do elemento")
Essa função é sensacional.. Sam Stephenson estava inspirado quando criou ela.. alias, ela já devia ter sido criado pela Netscape quando lançou o JavaScript.
Com essa função é possivel acessar qualquer elemento html editavel que tenha uma propriedade id definida na tag.
Ela funciona igual a propriedade document.getElementById() só que ela vai um pouco mais além.
Diferente da função original ela aceita mais de um argumento, o que fará a função retornar um array com todos os elementos solicitados.
Veja o Exemplo:
Para testar esse exemplo clique aqui: Exemplo 1
Para que os acessos funcionem lembre sempre de nomear os elementos com a tag ID.
Função $F("ID do elemento de formulário")
Essa é outra função que ajuda muito no momento de desenvolver.
Ela retorna o valor de qualquer campo de formulário.
Essa função pode receber tanto o ID do elemento como o objeto.
Para testar esse exemplo clique aqui: Exemplo 2
Utilizando Try.these()
Quando você precisa experimentar diferentes chamadas de funções sabendo que uma delas pode dar erro geralmente tem que fazer uma série de tratamentos pra ver se existe ou até mesmo fazer o seu tratamento de erros para o código.
Seus problemas acabaram. Essa função consegue executar uma lista de funções até que uma dê certo, aí ela sai fora.
No exemplo abaixo uma é executada duas solicitações do elemento xmlNode. Em cada browser funciona de uma maneira:
return Try.these(
function() {return xmlNode.text;},
function() {return xmlNode.textContent;)
);
}
</script>
Quaqluer duvidas me escrevam.
Função $("ID do elemento")
Essa função é sensacional.. Sam Stephenson estava inspirado quando criou ela.. alias, ela já devia ter sido criado pela Netscape quando lançou o JavaScript.
Com essa função é possivel acessar qualquer elemento html editavel que tenha uma propriedade id definida na tag.
Ela funciona igual a propriedade document.getElementById() só que ela vai um pouco mais além.
Diferente da função original ela aceita mais de um argumento, o que fará a função retornar um array com todos os elementos solicitados.
Veja o Exemplo:
<HTML>
<HEAD>
<TITLE>Teste da função $()</TITLE>
<script src="prototype.js"></script> <script>
function teste1() {
var d = $('minhaDiv');
alert(d.innerHTML);
}
function teste2(){
var divs = $('minhaDiv','minhaOutraDiv');
for(i=0; i<divs.length; i++){
alert(divs[i].innerHTML);
}
}
</script>
</HEAD>
<BODY>
<div id="minhaDiv">
<p>Paragrafo da primeira div</p>
</div>
<div id="minhaOutraDiv">
<p>Paragrafo da outra div</p>
</div>
<input type="button" value=Test1 onclick="teste1();"><br>
<input type="button" value=Test2 onclick="teste2();"><br>
</BODY>
</HTML>Para testar esse exemplo clique aqui: Exemplo 1
Para que os acessos funcionem lembre sempre de nomear os elementos com a tag ID.
Função $F("ID do elemento de formulário")
Essa é outra função que ajuda muito no momento de desenvolver.
Ela retorna o valor de qualquer campo de formulário.
Essa função pode receber tanto o ID do elemento como o objeto.
Para testar esse exemplo clique aqui: Exemplo 2
Utilizando Try.these()
Quando você precisa experimentar diferentes chamadas de funções sabendo que uma delas pode dar erro geralmente tem que fazer uma série de tratamentos pra ver se existe ou até mesmo fazer o seu tratamento de erros para o código.
Seus problemas acabaram. Essa função consegue executar uma lista de funções até que uma dê certo, aí ela sai fora.
No exemplo abaixo uma é executada duas solicitações do elemento xmlNode. Em cada browser funciona de uma maneira:
<script>
function getXmlNodeValue(xmlNode){return Try.these(
function() {return xmlNode.text;},
function() {return xmlNode.textContent;)
);
}
</script>
Quaqluer duvidas me escrevam.
Tutorial prototype -> Objeto Form
Vou procurar criar um mini tutorial da biblioteca prototype para que possa facilitar o uso da mesma no dia-á-dia.
O objeto Form do prototype contém funções que facilitam a vida das pessoas que desenvolvem em JavaScript.
Com ele você consegue acessar métodos de formulários de forma bem mais facil e rápida, economizando muitos caracteres no seu código.
Vou falar um pouco sobre os métodos dessa classe:
serialize(form) - Retorna uma string contendo os elementos do formulário e seus valores como no exemplo: 'campo1=valor1&campo2=valor2&campo3=valor3'
Essa função é muito boa quando se vai enviar informações para uma página que retorna resultados utilizando o conceito Ajax.
getElements(form) - Retorna um Array contendo todos os elementos do formulário.
Essa função é muito boa quando se quer utilizar um laço for para fazer uma validação nos campos da tela.
getInputs(form [, typeName [, nome]]) - semelhante a função getElements, só que esta função retorna apenas os elementos do tipo <input> podendo ser filtrados pelo typeName (que é o valor do campo type, podendo ser text, checkbox, etc..) e também sendo filtrado pelo nome do campo.
disable(form) - coloca todos os campos do formulário como travados para edição. Muito util para processos que você faz uma pesquisa e fica aguardando a resposta em Ajax.
enable(form) - coloca todos os campos do formulário indicado em form como editaveis.
focusFirstElement(form) - coloca o foco no primeiro elemento do formulário.
reset(form) - o mesmo que document.form.nomeform.reset(), só que uma forma bem mais simples de acesso.
Assinar Postagens [Atom]