Como preencher input com base em um select

Opa, pelo que entendi vc quer alterar o valor do input de texto em função do valor escolhido no select. Isso não tem a ver com o spring mvc, e sim com javascript. Só que eu acho que vc pode fazer mais simples, apenas com o input do select mesmo.

<select name="produto.tipoProduto" id="tipoProduto">
            <c:forEach items="${tiposProduto}" var="tipoProduto" varStatus="status">
                <option value="${produto.descricaoTipoProduto}" ${produto.descricaoTipoProduto eq tipoProduto.descricaoTipoProduto ? "Selected" : ""}> ${tipoProduto.descricaoTipoProduto}</option>
            </c:forEach>
        </select>

Caso não queira, procura pelo onclick do javascript.

Bom dia Alberto!

Nesse código que vc mostrou eu listo a descrição e salvo o código... Até ai blz, entendi...

Mas o problema é que eu preciso ter essas duas informações (TipoProduto e DescricaoTipoProduto) na tabela Produto, porque eu tenho por exemplo:

ID        TipoProduto        DescricaoTipoProduto
1          005               Garrafa térmica
2          005               Garrafa térmica inóx
3          005               Garrafa térmica elétrica
4          006               Jogo de talheres
5          006               Jogo de talheres Tramontina

Etc...

Eu trabalho em cima de um BD em produção, acessado por outro sistema.. Esse BD não possui NORMALIZAÇÃO, e o relacionamento entre as tabelas não é BOM, isso é qdo existe... Então não posso mexer na estrutura do BD, pra não correr o risco do sistema atual parar...

Ola Eweverton, como o Alberto disse, nesse caso, acho que a melhor forma é você criar uma função javascript que vai ser chamada quando o evento onchange do seu select for acionado, e nesta função voce pega o value do seu select e coloca no seu input, tipo assim:

<select name="produto.tipoProduto" id="tipoProduto"  onchange="javascript:associaInput();"*>


function associaInput() {
    //pega o value do select
    var e = document.getElementById("tipoProduto");
    var itemSelecionado = e.options[e.selectedIndex].value;

    //injeta no value do input
    document.getElementByName('produto.tipoProduto').value = itemSelecionado;
}

Bom dia pessoal... Não Não...

No meu Dao eu tenho o listaTipoProduto():

    public List<TipoProduto> listaTipoProduto(String marca) {
        TypedQuery<TipoProduto> query = manager.createQuery("Select tp From TipoProduto tp Where tp.marca = :marca Order By tp.descricaoTipoProduto" ,
                TipoProduto.class);
        query.setParameter("marca", marca);
        return query.getResultList();

No select do meu form.jsp eu listo a "descricaoTipoProduto"..... Que por exemplo é: bicicleta, skate, patins, etc...

                    <select name="produto.descricaoTipoProduto" class="form-control">
                        <c:forEach items="${tiposProduto}" var="tipoProduto" varStatus="status">
                            <option value="${tipoProduto.descricaoTipoProduto}" ${produto.descricaoTipoProduto eq tipoProduto.descricaoTipoProduto ? "SELECTED" : ""}>${tipoProduto.descricaoTipoProduto}</option>
                        </c:forEach>
                    </select>

E eu gostaria de sincronizar "descricaoTipoProduto" com "tipoProduto", quando o usuário escolhesse, por exemplo:

"bicicleta", eu gravo para tipoProduto "3"...
"skate", eu gravo para tipoProduto "5"...
"patins", eu gravo para tipoProduto "10"...

Mas é exatamente o que esse javascritpt faz, ele vai pegar o valor da opcao que vc escolher no select e vai por no iput tipoProduto:

aqui ele pega o valor do item selecionado no caso pode ser 3, 5 ou 10:

 var itemSelecionado = e.options[e.selectedIndex].value

e aqui ele coloca no value do input tipoProduto:

//injeta no value do input
    document.getElementByName('produto.tipoProduto').value = itemSelecionado;

Olhando com mais atenção pude ver que quando voce popula o seu select voce tanto no value como no label do option voce preenche com o descricaoProduto, sendo que o correto seria no value voce preencher o tipoProduto e no label com descricaoProduto, e no seu controler voce usa o tipoProduto vindo do select para pegar o descricaoProduto e persistir na sua tabela, creio que se voce tem o tipoProduto que pelo que entendi seria o 3, 5 ou 10, voce tem como buscar em algum lugar sua respectiva descrição, ja que voce utilizou para popular sua classe de modelo.

E como eu recebo essa informação da view (.jsp) no meu controller ?

Ai eu crio um novo método fazendo uma busca na tabela e passando esse TipoProduto como parâmetro...

Isso Daniel ?

O bind é automatico, quando voce submeter o seu formulario, no metodo POST do seu controller vc deve esperar um objeto Produto que tenha esse atributo tipoProduto, normalmente quando utilizamos varios componentes na JPS o ideal é criar uma classe de formulario, tipo ProdutoForm, e nessa classe voce terá um objeto Produto e um atributo por exemplo tipo, aí no seu select vc refeencia como produtoForm.tipo.

No seu controller voce precisará ter um metodo parecido com este:

@RequestMapping("/gravar")
public String gravaProduto(ProdutoForm form) {
    // aqui voce coloca sua regra
    return
}

Daniel, eu prefiro não ter de criar mais uma classe para o form...

Eu tentei implementar o javaScript, mas não deu certo... Não sincronizou a informação quando eu salvei o registro... Ai eu abri o console do browser e verifique que na linha:

var itemSelecionado = e.option[e.selectedIndex].value;

Gerou o erro:

Uncaught TypeError: Cannot read property 'undefined' of undefined

Para voce fazer o teste pelo console voce deve executar essas linhas nessa ordem, esse erro deu porque a variavel "e" não foi definida, e para testar no console voce nao pode colocar a palavra reservada "var" segue as linhas:

//pega o value do select
    var e = document.getElementById("tipoProduto");
    var itemSelecionado = e.options[e.selectedIndex].value;

    //injeta no value do input
    document.getElementByName('produto.tipoProduto').value = itemSelecionado;

Mas foi assim q eu fiz...

<head>

...

<script>
function associaInput() {
    //pega o value do select
    var e = document.getElementById("tipoProduto");
    var itemSelecionado = e.options[e.selectedIndex].value;

    //injeta no value do input
    document.getElementByName('produto.tipoProduto').value = itemSelecionado;
}
</script>
...
</head>

OBS.: Eu esqueci de mencionar...

Eu NÃO estou mais trabalhando com o Spring...

Mudei para o VRaptor...

Coloca sua JSP inteira para eu ver como estão seus componentes.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="ebf" %>

<!DOCTYPE html>
<html>

<head>

<title>Catálogo de produtos - Empresa</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="<c:url value='/css/bootstrap.min.css'/>"  />

<script>
function associaInput() {
    //pega o value do select
    var e = document.getElementById("tipoProduto");
    var itemSelecionado = e.options[e.selectedIndex].value;

    //injeta no value do input
    document.getElementByName('produto.tipoProduto').value = itemSelecionado;
}
</script>

</head>

<body>
    <form action="${linkTo[ProdutoController].salva(null)}" method="post">
        <input type="hidden" name="hdproduto" id="hdproduto" value="<%=request.getRemoteUser()%>">
        <input type="hidden" value="1" id="controle_cons" name="controle_cons" /> <br />
        <div id="container-fluid">
            <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span> 
                            <span class="icon-bar"></span> 
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="${linkTo[LoginController].desloga()}">Deslogar</a></li>
                            <li><a href="${linkTo[IndexController].index()}" id="pgInicial">Pág. Inicial</a></li>
                            <li><a href="${linkTo[ProdutoController].lista()}" id="listarProdutos">Listar</a></li>
                        </ul>
                    </div>
                    <!-- /.navbar-collapse -->
                </div>
                <!-- /.container-fluid -->
            </nav>
        </div>
        <br /> 

        <div class="btn-group" data-toggle="buttons"></div>

        <div class="panel panel-default painelCabecalho">
            <div class="panel-heading">
                <h3 class="panel-title">Informações do Produto </h3>
            </div>
            <div id="collapse1" class="panel-body panel-collapse collapse"></div>
        </div>

            <!--PRIMEIRA LINHA... -->
            <div class="row text-left">
                <input type="hidden" name="produto.id" id="id" class="form-control" value="${produto.id}" /><br />
                <div class="col-md-2">
                    <label>Código:</label> 
                    <input type="text" name="produto.codigo" size="24" maxlength="24" id="codigo" class="form-control" value="${produto.codigo}" autofocus="autofocus" /><br />
                    <ebf:validationMessage name="produto.codigo" />
                </div>
                <div class="col-md-2"></div>
            </div><br />

            <!--SEGUNDA LINHA... -->
            <div class="row text-left">
                <div class="col-md-2">
                     <label>Descrição tipo produto:</label>
                    <select name="produto.descricaoTipoProduto" class="form-control" onBlur="javascript:associaInput();">
                        <c:forEach items="${tiposProduto}" var="tipoProduto">
                            <option value="${tipoProduto.descricaoTipoProduto}" ${produto.descricaoTipoProduto eq tipoProduto.descricaoTipoProduto ? "SELECTED" : ""}>${tipoProduto.descricaoTipoProduto}</option>
                        </c:forEach>
                    </select>
                </div>
                <div class="col-md-1">
                    <label>Tipo produto:</label>
<!--                 PREENCHER CONFORME A OPÇÃO ESCOLHIDA NO SELECT ANTERIOR -->
                    <input type="text" name="produto.tipoProduto" id="tipoProduto" class="form-control" value="${produto.tipoProduto}" /><br />

                </div>

                <div class="col-md-1">
                    <label>Sulfixo Opcional:</label>
                    <select name="produto.sulfixoOpcional" id="sulfixoOpcional" class="form-control" data-select="sl" data-url="sl">
                        <option value="+">+</option>
                        <option value="A">A</option>
                        <option value="AV">AV</option>
                        <option value="C">C</option>
                        <option value="E">E</option>
                        <option value="EHV">EHV</option>
                        <option value="H">H</option>
                        <option value="K">K</option>
                        <option value="N">N</option>
                        <option value="R">R</option>
                        <option value="S">S</option>
                        <option value="T">T</option>
                        <option value="TB">TB</option>
                        <option value="X">X</option>
                        <option value="XS">XS</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label>Montadora:</label>
                    <select name="produto.montadora" class="form-control">
                        <c:forEach items="${montadoras}" var="montadora">
                            <option value="${montadora.nome}" ${produto.montadora eq montadora.nome ? "SELECTED" : ""}>${montadora.nome}</option>
                        </c:forEach>
                    </select>            
                </div>
                <div class="col-md-2"></div>
            </div><br />

            <!--TERCEIRA LINHA... -->
            <div class="row text-left">
                <div class="col-md-6">
                    <label>Modelo:</label>
                    <input type="text" name="produto.modelo" size="100" maxlength="100" id="modelo" class="form-control" value="${produto.modelo}" /><br />
                    <ebf:validationMessage name="produto.modelo" />
                </div>
                <div class="col-md-1">
                    <label>De ano:</label> 
                    <input type="text" name="produto.deAno" size="4" maxlength="4" id="deAno" class="form-control" value="${produto.deAno}" /><br />
                    <ebf:validationMessage name="produto.deAno" />
                </div>
                <div class="col-md-1">
                    <label>Até ano:</label>
                    <input type="text" name="produto.ateAno" size="4" maxlength="4" id="ateAno" class="form-control" value="${produto.ateAno}" /><br />
                    <ebf:validationMessage name="cliente.ateAno" />
                </div>
                <div class="col-md-6"></div>
            </div><br />

            <!--QUARTA LINHA... -->
            <div class="row text-left">
                <div class="col-md-1">
                    <label>Cilindrada:</label>
                    <input type="text" name="produto.cilindrada" size="4" maxlength="4" id="cilindrada" class="form-control" value="${produto.cilindrada}" /><br />
                    <ebf:validationMessage name="produto.cilindrada" />
                </div>
                <div class="col-md-1">
                    <label>Tipo corrente:</label> 
                    <input type="text" name="produto.tipoCorrente" size="10" maxlength="10" id="tipoCorrente" class="form-control" value="${produto.tipoCorrente}" /><br />
                    <ebf:validationMessage name="produto.tipocorrente" />
                </div>
                <div class="col-md-1">
                    <label>Prefixo:</label> 
                    <input type="text" name="produto.prefixo" size="10" maxlength="10" id="prefixo" class="form-control" value="${produto.prefixo}" /><br />
                    <ebf:validationMessage name="produto.prefixo" />
                </div>
                <div class="col-md-1">
                    <label>Nro. Dentes/Elos:</label> 
                    <input type="text" name="produto.nroDentesElos" size="3" maxlength="3" id="nroDentesElos" class="form-control" value="${produto.nroDentesElos}" /><br />
                    <ebf:validationMessage name="produto.nroDentesElos" />
                </div>
                <div class="col-md-1">
                    <label>Dianteira/Traseira:</label> 
                    <select name="produto.dianteiraTraseira" id="dianteiraTraseira" class="form-control" data-select="sl" data-url="sl">
                        <option value="D">D</option>
                        <option value="D/T">D/T</option>
                        <option value="T">T</option>
                    </select>
                </div>
                <div class="col-md-1">
                    <label>Pinça dupla:</label>
                    <select name="produto.pincaDupla" id="pincaDupla" class="form-control" data-select="sl" data-url="sl">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label>Marca:</label>
                    <select name="produto.marca" id="marca" class="form-control" data-select="sl" data-url="sl">
                        <option value="Empresa">Empresa</option>
                    </select>
                </div>
                <div class="col-md-1"></div>
            </div><br />

            <!--QUINTA LINHA... -->
            <div class="row text-left">
                <div class="col-md-1">
                    <label>Original:</label>
                    <select name="produto.original" id="original" class="form-control" data-select="sl" data-url="sl">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                </div>
                <div class="col-md-1">
                    <label>Liberado:</label> 
                    <select name="produto.liberado" id="liberado" class="form-control" data-select="sl" data-url="sl">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                </div>
                <div class="col-md-1">
                    <label>Lançamento:</label>    
                    <select name="produto.lancamento" id="lancamento" class="form-control" data-select="sl" data-url="sl">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                </div>
                <div class="col-md-1">
                    <label>Promoção:</label> 
                        <select name="produto.promocao" id="promocao" class="form-control" data-select="sl" data-url="sl">
                            <option value="S">Sim</option>
                            <option value="N">Não</option>
<%--                        <option value="S" ${produto.promocao eq S ? "SELECTED" : ""} >Sim</option> --%>
<%--                        <option value="N" ${produto.promocao eq N ? "SELECTED" : ""} >Não</option> --%>
                        </select>
                </div>
                <div class="col-md-1">
                    <label>Queima estoque:</label>
                    <select name="produto.queimaEstoque" id="queimaEstoque" class="form-control" data-select="sl" data-url="sl">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                </div>
                <div class="col-md-1">
                    <label>Preço:</label> 
                    <input type="text" name="produto.preco" id="preco" class="form-control" value="${produto.preco}" /><br />
                    <ebf:validationMessage name="produto.preco" />
                </div>
                <div class="col-md-1">
                    <label>Semelhantes:</label> 
                    <input type="text" name="produto.semelhantes" size="3" maxlength="3" id="semelhantes" class="form-control" value="${produto.semelhantes}" /><br />
                    <ebf:validationMessage name="produto.semelhantes" />
                </div>
                <div class="col-md-1">
                    <label>Imagem:</label> 
                    <input type="text" name="produto.imagem" size="30" maxlength="30" id="imagem" class="form-control" value="${produto.imagem}" /><br />
                    <ebf:validationMessage name="produto.imagem" />
                </div>
                <div class="col-md-1"></div>
            </div>

            <!-- SEXTA LINHA... -->
            <div class="row text-left">
                <div class="col-md-1">
                    <label>Código corrente:</label> 
                    <input type="text" name="produto.codigoCorrente" size="24" maxlength="24" id="codigoCorrente" class="form-control" value="${produto.codigoCorrente}" /><br />
                    <ebf:validationMessage name="produto.codigoCorrente" />
                </div>
                <div class="col-md-1">
                    <label>Imagem corrente:</label> 
                    <input type="text" name="produto.imagemCorrente" size="30" maxlength="30" id="imagemCorrente" class="form-control" value="${produto.imagemCorrente}" /><br />
                    <ebf:validationMessage name="produto.imagemCorrente" />
                </div>
                <div class="col-md-1">
                    <label>Código coroa:</label> 
                    <input type="text" name="produto.codigoCoroa" size="24" maxlength="24" id="codigoCoroa" class="form-control" value="${produto.codigoCoroa}" /><br />
                    <ebf:validationMessage name="produto.codigoCoroa" />
                </div>
                <div class="col-md-1">
                    <label>Imagem coroa:</label> 
                    <input type="text" name="produto.imagemCoroa" size="30" maxlength="30" id="imagemCoroa" class="form-control" value="${produto.imagemCoroa}" /><br />
                    <ebf:validationMessage name="produto.imagemCoroa" />
                </div>
                <div class="col-md-1">
                    <label>Código pinhão:</label>
                    <input type="text" name="produto.codigoPinhao" size="24" maxlength="24" id="codigoPinhao" class="form-control" value="${produto.codigoPinhao}" /><br />
                    <ebf:validationMessage name="produto.codigoPinhao" />
                </div>
                <div class="col-md-1">
                    <label>Imagem pinhão:</label>
                    <input type="text" name="produto.imagemPinhao" size="30" maxlength="30" id="imagemPinhao" class="form-control" value="${produto.imagemPinhao}" /><br />
                    <ebf:validationMessage name="produto.imagemPinhao" />
                </div>
                <div class="col-md-2">
                    <label>Imagem embalagem:</label>
                    <input type="text" name="produto.imagemEmbalagem" size="30" maxlength="30" id="imagemEmbalagem" class="form-control" value="${produto.imagemEmbalagem}" /><br />
                    <ebf:validationMessage name="produto.imagemEmbalagem" />
                </div>
                <div class="col-md-1"></div>
            </div><br /> 

            <!-- SÉTIMA LINHA -->         
            <div class="row text-left">    
                <div class="col-md-7">
                    <label>Local imagem:</label>
                    <input type="text" name="produto.localImagem" size="200" maxlength="200" id="localImagem" class="form-control" value="${produto.localImagem}" /><br />
                    <ebf:validationMessage name="produto.localImagem" />
                </div>
                <div class="col-md-1">
                    <label>Desenho:</label>
                    <input type="text" name="produto.desenho" size="20" maxlength="20" id="desenho" class="form-control" value="${produto.desenho}" /><br />
                    <ebf:validationMessage name="produto.desenho" />
                </div>
                <div class="col-md-7"></div>
            </div><br />

            <!-- OITAVA LINHA -->         
            <div class="row text-left">    
                <div class="col-md-1">
                    <label>Passo:</label>
                    <input type="text" name="produto.passo" size="5" maxlength="5" id="passo" class="form-control" value="${produto.passo}" /><br />
                    <ebf:validationMessage name="produto.passo" />
                </div>
                <div class="col-md-1">
                    <label>Diam. passo:</label>
                    <input type="text" name="produto.diamPasso" id="diamPasso" class="form-control" value="${produto.diamPasso}" /><br />
                    <ebf:validationMessage name="produto.diamPasso" />
                </div>
                <div class="col-md-1">
                    <label>Diam.Central:</label>
                    <input type="text" name="produto.diamCentral" id="diamCentral" class="form-control" value="${produto.diamCentral}" /><br />
                    <ebf:validationMessage name="produto.diamCentral" />
                </div>
                <div class="col-md-1">
                    <label>Qde. furos:</label>
                    <input type="text" name="produto.qtdFuros" id="qdtFuros" class="form-control" value="${produto.qtdFuros}" /><br />
                    <ebf:validationMessage name="produto.qdtFuros" />
                </div>
                <div class="col-md-1">
                    <label>Diam. furos:</label>
                    <input type="text" name="produto.diamFuros" id="diamFuros" class="form-control" value="${produto.diamFuros}" /><br />
                    <ebf:validationMessage name="produto.diamFuros" />
                </div>
                <div class="col-md-1">
                    <label>Diam. entre furos:</label>
                    <input type="text" name="produto.diamEntreFuros" id="diamEntreFuros" class="form-control" value="${produto.diamEntreFuros}" /><br />
                    <ebf:validationMessage name="produto.diamEntreFuros" />
                </div>    
                <div class="col-md-1">
                    <label>Rebaixo furos:</label>
                    <select name="produto.rebaixoFuros" id="rebaixoFuros" class="form-control" data-select="sl" data-url="sl">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                </div>
                <div class="col-md-1">
                    <label>Capa:</label> 
                        <select name="produto.capa" id="capa" class="form-control" data-select="sl" data-url="sl">
                            <option value="S">Sim</option>
                            <option value="N">Não</option>
                        </select>
                </div>
                <div class="col-md-1"></div>
            </div><br />

            <!-- NONA LINHA -->
            <div class="row text-left">
                <div class="col-md-1">
                    <label>Dobra:</label>
                    <select name="produto.dobra" id="dobra" class="form-control" data-select="sl" data-url="sl">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                </div>
                <div class="col-md-1">
                    <label>Pino:</label>
                    <select name="produto.pino" id="pino" class="form-control" data-select="sl" data-url="sl">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                </div>
                <div class="col-md-1">
                    <label>Espessura:</label>
                    <input type="text" name="produto.espessura" id="espessura" class="form-control" value="${produto.espessura}" /><br />
                    <ebf:validationMessage name="produto.espessura" />
                </div>
                <div class="col-md-1">
                    <label>Qtd. dentes estria:</label>
                    <input type="text" name="produto.qtdDentesEstria" id="qtdDentesEstria" class="form-control" value="${produto.qtdDentesEstria}" /><br />
                    <ebf:validationMessage name="produto.qtdDentesEstria" />
                </div>
                <div class="col-md-2">
                    <label>Diam. interno estria:</label>
                    <input type="text" name="produto.diamInternoEstria" id="diamInternoEstria" class="form-control" value="${produto.diamInternoEstria}" /><br />
                    <ebf:validationMessage name="produto.diamInternoEstria" />
                </div>
                <div class="col-md-2">
                    <label>Diam. externo estria:</label>
                    <input type="text" name="produto.diamExternoEstria" id="diamExternoEstria" class="form-control" value="${produto.diamExternoEstria}" /><br />
                    <ebf:validationMessage name="produto.diamExternoEstria" />
                </div>
                <div class="col-md-1"></div>
            </div><br />  

<!--        DÉCIMA LINHA -->
            <div class="row text-left">
                <div class="col-md-1">
                    <label>Largura estria:</label> 
                    <input type="text" name="produto.larguraEstria" id="larguraEstria" class="form-control" value="${produto.larguraEstria}" /><br />
                    <ebf:validationMessage name="produto.larguraEstria" />
                </div>
                <div class="col-md-1">
                    <label>Injetado:</label>
                    <select name="produto.injetado" id="injetado" class="form-control" data-select="sl" data-url="sl">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                </div>
                <div class="col-md-1">
                    <label>Rebaixo.:</label>
                    <select name="produto.rebaixo" id="rebaixo" class="form-control" data-select="sl" data-url="sl">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                </div>
                <div class="col-md-1">
                    <label>Self.Clean:</label>
                    <select name="produto.selfClean" id="selfClean" class="form-control" data-select="sl" data-url="sl">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                </div>
                <div class="col-md-1">
                    <label>Catálogo:</label>
                    <select name="produto.catalogo" id="catalogo" class="form-control" data-select="sl" data-url="sl">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                </div>
                <div class="col-md-1"></div>
            </div><br />

<!--        DÉCIMA PRIMEIRA LINHA -->    
            <div class="row text-left">
                <div class="col-md-4">
                    <label>Observações:</label> 
                    <textarea name="produto.observacoes" id="observacoes" rows="4" cols="100" maxlength="200" class="form-control" >${produto.observacoes}</textarea>
                    <ebf:validationMessage name="produto.observacoes" />
                </div>
                <div class="col-md-1">
                    <label>Imagem do produto: </label>
<!--                 <img src = "C:\Temp\logo.jpg" >                      -->
                </div>
                <div class="col-md-4"></div>
            </div><br />

        <br /><br />
        <input type="submit" value="Cadastrar/Salvar" class="btn btn-primary"> <br /> <br />

        <div id="dialog" title="Lista clientes" style="overflow-x: hidden;">
            <table id="tabPesquisa"></table>
        </div>
    </form>

</body>
</html>

Muda de:

var e = document.getElementById("tipoProduto");

para

var e = document.getElementByName("produto.descricaoTipoProduto");

Porque seu select nao tem um ID por isso ele não encontrava.

Ficou na msm Daniel...

Debugando pelo console do browser verifiquei que o campos está vindo em "branco"... 1º td é o codigo 2º td é o tipoProduto e o 3º td é a descricaoTipoProduto:

<tr>
                        <td>
                            102030
                        </td>

                        <td></td>

                        <td>
                            PASTILHA XTREME
                        </td>

SEM SOLUÇÂO