3

Estou com um problema relacionado ao Spring MVC e o javascript/JQuery.

Bom tenho um jsp com um 'form' e precisei fazer um teste onde ao clicar em um botão o jquery limpe os textos de alguns "input type='Text'".

Até consegui fazer o teste, mas toda vez que clico no botão é executado o método do 'RequestMapping' na classe em java.

Então, o método da classe faz umas consultas em banco de dados e retorna na tela pelo 'ModelAndView', logo, se minha intenção é só limpar os controles da tela não quero ficar rodando as consultas.

Script para limpar os campos

    function limparCampos()
    {
         $(".cmpTexto").val("");
    }

Código Html

    <form action="UCC001.htm" method="post">
       <table>
          <tr>
             <td>Nome:</td>
             <td><input type="text" class="cmpTexto" value="${cad.nome}" name="nome"/></td>
          </tr>
          <tr>
             <td>Endereço:</td>
             <td><input type="text" class="cmpTexto" value="${cad.endereco}"   name="endereco"/></td>
          </tr>
       </table>
       <input type="button" onclick="limparCampos()" value="Limpar Campos">
    </form>

Método da Classe

    @RequestMapping("/UCC001")
    public ModelAndView buscaDados(Cadastro cadastro)
    {
         Cadastro cad = new Cadastro();
         cadastro = retCadastro(); //Retorna dados do banco de dados
         ModelAndView mav = new ModelAndView("cadastro");
         mav.AddObject("cad", cadastro);
         return mav;
    }

Mais ou menos é assim que esta meu código, resumindo, quero clicar no botão, limpar os campos sem ter que executar o método 'buscaDados'. Quando eu tiro a tag 'Form' funciona, mas não consigo dar retorno ao Spring quando clico em um botão.

O que posso fazer para resolver isso?

1
  • Tem alguem dando um submit no seu <form> provavelmente. Edite sua pergunta e coloque o código fonte completo da função limparCampos()
    – wryel
    Commented 30/03/2015 às 22:55

1 Resposta 1

2

Creio que o problema pode ser resolvido prevenindo o comportamento padrão do botão, que no caso é enviar o formulário. Isso pode ser resolvido da seguinte forma:

No html do botão adicione o parâmetro event na chamada da função limparCampos:

<input type="button" onclick="limparCampos(event)" value="Limpar Campos">

Na função limparCampos:

function limparCampos (e) {
  e.preventDefault(); // previne que o comportamento padrão do navegador seja executado   
  $('.cmpTexto').val('');
}

Apenas como observação, evite de colocar chamadas javascript em atributos no html. Como você já está usando jQuery, o ideal seria o seguinte:

$('#idDoBotao').on('click', function (e) {
  limparCampos(e);
});

Ou até mesmo:

$('#idDoBotao').on('click', limparCampos);

Pois a função limparCampos já espera um parâmetro de evento.

Caso utilize esta maneira, lembre-se de colocar o script acima da tag de fechamento do body.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .