Formulario AJAX como faze-lo funcionar corretamente.

El_pancho · Janeiro 6, 2012

olá, estou tendo um problema que ta me tirando o sono, em todos os <form> do meu site que tenham ajax,

como

<tr>

</td>

</td>

</tr>

</table>

</form>

se o usuario escreve no campo SEARCH e APERTA ENTER, ele não chama a funçao e direciona para a página index.php (onde está essa funçao).

Como eu poderia impedir isso de acontecer, e somente realizar a funçao ajax?

ele somente funciona quando o usuario digita no campo SEARCH e CLICA NO BOTAO.

Editado Janeiro 6, 2012 por El_pancho

Pooh · Janeiro 6, 2012

Boa tarde!

El pancho você tem 2 probleminhas visíveis ai...

O primeiro seria que seu evento "ajax" somente é disparado como você mesmo registro no "ONCLICK" ou seja....???

apenas quando o usuário CLICKAR no botão...

O segundo é que você não está tratando o evento submit do formulário.

O ideal é você tratar o submit do seu form...mas você é o capitão do navio e quer apenas bloquear o enter.

vamos la.

Como não sei o que você tem nesse seu ajax... pois uma coisa poderia nos resolver a vida:

Se a sua função ajax não desse submit no form, basta que adicione esse evento nele:

onSubmit="return false"

Porém se em algum momento da sua vida você ainda quer dar submit no form, sinto muito trate o evento dele pois é inviável ficar bloqueando a tecla enter. ex:

<script>
/*Vamos supor que se codigo ajax esteja na funcao ajax*/

var submitByClick = false; //o que nos vai bloquear o submit...

var ajax = function() //função do onclick!
{

    /*aqui seu codigo ajax bla bla bla antes de tentar dar o submit pela função...*/

    submitByClick = true; //setamos nossa condicional para true;
    document.getElementById('idDoSeuForm').submit(); //agora o submit vai funcionar
};

var submitHandler = function() //função do onsubmit!
{
    return submitByClick;
}
</script>

<body>

    <form method="get" id="idDoSeuForm" name="nomedoSeuform" onSubmit="return submitHandler()">
        <input type="text" name="inputQualquer" />
        <input type="button" value="ajax!" onClick="ajax()"/>
    </form>

</body>

Bom isso já seria o suficiente pra você conseguir o que quer....

Não usamos nenhum framework, o que seria bom já que com as condições da internet atualmente.

Não vou entrar em metodologia de trabalho mt menos suas ferramentas, espero que com isso você consiga

desenvolver o que precisa e durma em paz...

Se ainda assim não conseguir, tente mais uma vez

E claro tente voltar aqui apenas para dizer que deu certo para que mais pessoas saibam que isso resolveu esse

problema que você teve e com certeza outros virão a ter e bla bla bla ok parei de falar...

Abraços e boa sorte!

Poofy

El_pancho · Janeiro 7, 2012

Obrigado Poofy,

estava usando onclick pois era a unico TRIGGER que conhecia, até prefiro fazer agora usando onsubmit pois acho muito mais pratico apertar a tecla enter ao invés de clicar em BUSCAR.

Portanto no seu código eu teria que mudar:


&lt;script>
var ajax = function() //função do onclick!
{

    /*aqui seu codigo ajax bla bla bla antes de tentar dar o submit pela função...*/

    submitByClick = true; //setamos nossa condicional para true;
    document.getElementById('idDoSeuForm').submit(); //agora o submit vai funcionar
};

<body>

    <form method="get" id="idDoSeuForm" name="nomedoSeuform" onSubmit="ajax()">
        <input type="text" name="inputQualquer" />
        <input type="button" value="ajax!"/>
    </form>

</body>

[/codebox]

Eu teria que mudar o input type='button' para input type='submit'?

Desde de já obrigado novamente.

:lol:

Entrar

Formulario AJAX como faze-lo funcionar corretamente.

Pergunta

El_pancho

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Pooh

Link para o comentário

Compartilhar em outros sites

El_pancho

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades