How to mount a link in JSP with the value of an input?

Question

You can mount a link(href) or action(form) by taking the value of an input to pass to a @Pathvariable of a method in the controller?

My code is next in the controller:

@RequestMapping(value="atendimentos/{numeroChamado}", method=RequestMethod.GET)
public ModelAndView detalhe(@PathVariable("numeroChamado") Long numeroChamado){
    ...
}

I would like to mount the link in a href or form, for example

<form:form action="/atendimentos/{valorDoInput}" id="formBusca" method="get" >
          <input type="text" id="buscaChamado" placeholder="Número do Chamado" name="numeroChamado" />
        </form:form>

or

<a href="/atendimentos/{valorDoInput}"><input type="text" id="buscaChamado" placeholder="Número do Chamado" name="numeroChamado" /></a>

Answer 1

You can do it with javascript in a simple way. For this just have an event in your input text and whenever its value is changed we will change the attribute action of form.

Starting from something similar to your form:

<form:form action="" id="formBusca" method="get" >
    <input type="text" id="numeroChamado" placeholder="Número do Chamado" />
</form:form>

We can do something like this in pure javascript:

numeroChamado.onchange = function() {
  var form = document.getElementById('formBusca');
  form.action = '/atendimentos/' + this.value;
};

See here an example: http://codepen.io/anon/pen/wMEZYO

If you use jQuery, you can simplify to something like this:

$('#numeroChamado').change(function() {
  $('#formBusca').attr('action', '/atendimentos/' + this.value);
});

See here an example: http://codepen.io/anon/pen/MKqRza

In both examples we perform a function in the event onchange of input text numeroChamado, altering the action of form formBusca.