Pergunta

Estou usando uma imagem como o botão Enviar para um formulário de pesquisa, ou seja:

<input id="search" type="image" alt="Search" src="/images/searchButton.png" name=""/>

Isso tem um efeito colateral infeliz no Chrome e Firefox-os parâmetros & x = 0 & y = 0 aparecem no final do URL dos resultados da pesquisa, por exemplo, se eu procurar "comida", sou direcionado para a página:

main/search?search=food&x=0&y=0

Algumas caçadas on -line indicaram que esse é um comportamento padrão quando você usa uma imagem para enviar um formulário.

Percebi que o Digg.com usa uma imagem para enviar seu formulário de pesquisa, mas evita esse comportamento. Não consigo descobrir como eles fazem isso. Eles não parecem estar usando o JavaScript para enviar o formulário. Alguém pode contar?

Foi útil?

Solução

Digg é Usando JavaScript para fazer isso. Tente enviar o formulário de pesquisa com JavaScript desativado no seu navegador.

Outras dicas

Em vez de usar um <input type="image">, você pode usar um <button> elemento:

<button type="submit" style="border: 0; background: transparent">
  <img src="image.png"></img>
</button>

Esses parâmetros denotam o local em que o clique foi exercido na imagem, que é o comportamento padrão da maioria, se não todos os navegadores, quando se trata de usar imagens como botões de envio. Você pode usar uma solução alternativa que basicamente passa por JavaScript para enviar seu formulário, assim como o que você vê no exemplo de Watain. Ou você pode criar um botão de envio que não é um elemento de formulário, utilizando o form.submit () como a ação anexada a essa imagem.

Você pode usar o JavaScript para enviar o formulário assim, ainda é a maneira mais fácil:

<script>
yourForm.onSubmit = function() {
 location.href = 'main/search?search=' + encodeURIComponent(yourForm.elements['query'].value);
 return false;
}
</script>

Infelizmente, não sei como eles fazem isso sem JavaScript.

Editar: BTW, você também pode usar um simples que enviará o formulário quando ele for clicado.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top