O formulário JavaScript enviando usando uma imagem não está funcionando

Question

Eu tenho um formulário que quero usar um IMG, em vez de um botão de entrada, para enviar o formulário.

O código:

<form>
    <input class="form_grey" value="Enter in City or Zipcode" type="text" id="city-field" name="city" onfocus="this.value='';" />
    <a href="javascript:document.form.submit()"><img src="/images/btn.png" /></a>               
</form>

Quando digito o campo de entrada e pressione Enter (no meu teclado), o formulário envia corretamente. Mas, se eu digitar o campo de entrada e clicar no botão de envio da imagem, nada acontece.

Alguma idéia de por que meu formulário de imagem JavaScript envia não funciona?

Answer 1

Substitua isto:

<a href="javascript:document.form.submit()"><img src="/images/btn_search_listings.png" /></a>  

Com isso:

<input type="image" src="/images/btn_search_listings.png" />

O uso do JavaScript para que uma imagem envie um formulário não seja realmente necessário aqui, pois você tem o tipo de entrada de imagem que se comporta como um botão de envio. Isso também fará com que a navegação do teclado funcione corretamente e seja muito mais acessível em geral.