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

Question

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

Navigation

#1 by (2 votes)

3

Is it possible to create a link (href) or an action (form) by taking the value of an input to pass to a @PathVariable of a method in the controller?

My code is the following 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>

java jsp spring-mvc jstl

asked by anonymous 04.02.2016 / 15:05

1 answer

Javascript - Sum and Group By in Array How to generate compiled classes and keep .java in maven?

score 2 · Accepted Answer

You can do it with javascript in a simple way. For this we just need to 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;
};

Here's an example: link

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

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

Here's an example: link

In both examples we run a function in the onchange event of the input text numeroChamado element, changing the action form formBusca .