Manipular a URL e QueryString de um form antes do submit com o jQuery

Bom dia a todos,

Hoje consegui fazer mais uma modificação DOM interessante com o jQuery, no caso foi uma dúvida que me surgiu enquando eu desenhava um relatório aqui. Como que faço para alterar a URL da action de um form antes do seu submit com o jQuery ?

Por sinal é bem simples de modificar através do uso dos gatilhos do jQuery. Em resumo precisamos fazer o seguinte:

Criar um gatilho para o evento ‘onsubmit’;
Implementar alguma lógica para a nova URL desejada na action;

Implementação

Primeiramente iremos definir um gatilho para o form, vamos pensar que o ID do mesmo seja formulario.

$('#formulario').bind('submit', function() {
    //alguma ação aqui.
});

$('#formulario').bind('submit', function() {

//alguma ação aqui.

});

Depois de termos um gatilho criado, agora só implementamos alguma lógica dentro do gatilho, no caso a implementação do handler (segundo a documentação do jQuery).

$('SELETOR').bind(String action, function handler);

1	$('SELETOR').bind(String action, function handler);

O que eu necessitei aqui era de apenas um parâmetro na URL para gerar um PDF, o problema era porque eu utilizo um componente de consulta que me gera no mínimo cinco parâmetros e como no componente que gera o documento PDF é dinamico tanto para um ou N registros ele precisa de um parâmetro fora do padrão. Logo o que eu fiz foi de modificar o parâmetro ‘id_turma’ para ‘idt’.

Assim fiz a seguinte implementação para a modificação da QueryString da action do meu formulário.

$('#formulario').bind('submit', function(){
   var f = $(this);
   f.attr('action', f.attr('action') + "?idt=" + $('#some-field-id').attr('value'));
 });

$('#formulario').bind('submit', function(){

var f = $(this);

f.attr('action', f.attr('action') + "?idt=" + $('#some-field-id').attr('value'));

});

Conclusão

Não tem mistério a implementação do handler acima, eu somente concatenei a action do form que era ‘relatorios/declaracao.php’ para ‘relatorios/declaracao.php?idt=304X’. Logo o meu formulário não irá submitar os outros campos que tinha no meu componente de consulta como no exemplo abaixo:

http://localhost/sistema/relatorios/declaracao.php?id_periodo=3&id_turma=43&ordem=NOME&foo=foo

Referências

.submit – http://api.jquery.com/submit/

.attr – http://api.jquery.com/attr/

DOM – Document Object Model

QueryString – http://en.wikipedia.org/wiki/Query_string

Espero que tenham gostado. Abraços e até a próxima.

Comentários, dúvidas e sugestões utilizem a área de comentários abaixo.