formulário sem ação e onde entrar não recarrega a página

94

Estou procurando a maneira mais simples de criar um formulário HTML que não tenha um botão de envio. Isso por si só é fácil, mas também preciso impedir que o formulário seja recarregado quando coisas semelhantes a envio são feitas (por exemplo, acertar Enterum campo de texto).

javascript html forms

— Matt Roberts
fonte

Você quer que nunca seja submetido?

— UpTheCreek

Se você tiver apenas um <form> com um único <input> que é um campo de texto, ele não deve ser enviado quando você pressiona Enter, deve?

— Zack The Human

Eu quero que ele seja submetido sob alguma outra condição (na verdade, pressionando um certo botão). O problema é que não consegui fazer com que o comportamento 'entrar no campo de texto' de postar / acessar a mesma url não acontecesse. Portanto, meu formulário cuidadosamente criado, onde você precisa fazer X, Y e Z para enviá-lo, pode ser enviado erroneamente pelo usuário pressionando Enter.

— Matt Roberts

44

Adicione um manipulador onsubmit ao formulário (via plain js ou jquery $ (). Submit (fn)) e retorne false a menos que suas condições específicas sejam atendidas.

A menos que você não queira que o formulário seja enviado, nunca - nesse caso, por que não deixar de fora o atributo 'ação' no elemento do formulário?

— K Prime
fonte

150

Um formulário sem um actionatributo não é um formulário, de acordo com os padrões - e realmente causará uma recarga de página em alguns navegadores. Descobri que action="javascript:void(0);"funciona bem.

— Dutchie432

A resposta de Dutchies funciona perfeitamente. O Firefox estava apenas atualizando a página.

— IAmGroot

1

@ Dutchie432 deve transformar isso em uma resposta em vez de um comentário. Em seguida, faria o seu caminho para o topo, onde pertence. Alternativamente, KPrime poderia ajustar sua resposta, já que omitir a ação não funcionou para mim ...

— sábio

210

Você deseja incluir action="javascript:void(0);"em seu formulário para evitar recarregamentos de página e manter o padrão HTML.

— Dutchie432
fonte

4

Só passei 2 dias tentando suprimir a ação padrão do botão enviar quando o enter é pressionado, pois embora a ação tenha ocorrido, a página acabou recarregando (Firefox). Adicionar o javascript void como ação no formulário corrigiu isso. Obrigado por isso.

— Tony Payne

obrigado por esta resposta adicional. isso ainda funciona - mas ainda é a solução de "última geração" em 2016?

— low_rents

1

@low_rents Eu ainda uso o tempo todo e não encontrei pessoalmente uma solução melhor.

— Dutchie432

1

Obrigado pela solução precisa e excelente para resolver o recarregamento da página enquanto pressiona a tecla Enter :) Melhor solução.

— Imran Rafiq Rather

9

Basta adicionar este evento ao seu campo de texto. Isso impedirá um envio ao pressionar Enter, e você está livre para adicionar um botão de envio ou chamar form.submit () conforme necessário:

onKeyPress="if (event.which == 13) return false;"

Por exemplo:

<input id="txt" type="text" onKeyPress="if (event.which == 13) return false;"></input>

— GenericMeatUnit
fonte

1

Obrigado por isso. Receio que a clareza de sua resposta deixou claro para mim a correção de uma resposta anterior, de modo que você não obteve a resposta aceita, mas obteve minha gratidão e um voto positivo!

— Matt Roberts

2

Obrigado. Feliz em ajudar. Eu nunca fui um dos holofotes de qualquer maneira. ;)

— GenericMeatUnit

5

Quando você pressiona enter em um formulário, o comportamento natural do formulário é ser submetido, para parar esse comportamento que não é natural, você tem que evitar que ele envie (comportamento padrão), com jquery:

$("#yourFormId").on("submit",function(event){event.preventDefault()})

— jsDevia
fonte

4

uma ideia:

<form method="POST" action="javascript:void(0);" onSubmit="CheckPassword()">
    <input id="pwset" type="text" size="20" name='pwuser'><br><br>
    <button type="button" onclick="CheckPassword()">Next</button>
</form>

e

<script type="text/javascript">
    $("#pwset").focus();
    function CheckPassword()
    {
        inputtxt = $("#pwset").val();
        //and now your code
        $("#div1").load("next.php #div2");
        return false;
    }
</script>

— Tom nobre
fonte

1

Duas maneiras de resolver:

o valor da ação do formulário é "javascript: void (0);".
adicione ouvinte de evento de pressionamento de tecla para o formulário para evitar o envio.

— conta
fonte

Ouvir o evento de pressionamento de tecla (por exemplo, tecla enter) pode trazer problemas com textareas, e possivelmente selecionar autocompletar ou menus suspensos, e o celular pode ser outra fonte de problemas.

— luckydonald

0

A primeira resposta é a melhor solução:

Adicione um manipulador onsubmit ao formulário (via plain js ou jquery $ (). Submit (fn)) e retorne false a menos que suas condições específicas sejam atendidas.

Mais específico com jquery:

$('#your-form-id').submit(function(){return false;});

A menos que você não queira que o formulário seja enviado, nunca - nesse caso, por que não deixar de fora o atributo 'ação' no elemento do formulário?

Escrever extensões do Chrome é um exemplo de onde você pode ter um formulário para entrada do usuário, mas não deseja que ele seja enviado. Se você usar action = "javascript: void (0);", o código provavelmente funcionará, mas você terminará com este problema em que obtém um erro sobre a execução de Javascript embutido.

Se você deixar a ação completamente de fora, o formulário será recarregado, o que também é indesejável em alguns casos ao escrever uma extensão do Chrome. Ou se você tivesse uma página da web com algum tipo de calculadora embutida, onde o usuário forneceria alguma entrada e clicaria em "Calcular" ou algo parecido.

— Skelliam
fonte