Pegar valor de inputText pelo javascript (JSF)

13 respostas
S

Boa tarde pessoal!!!

É o seguintee…eu tenho um cadastro no meu sistema e eu preciso fazer algumas validações nelee…e quero faazer com javascript…
mas eu nao consigo pegar os valores das inputText’s com o comando:

document.getElementById(“id_do_campo”).value;

como eu consigo pegar alguem sabe??

Desde já agradeço!

13 Respostas

V
cara tambem estou com o mesmo problema.... é que assim para usar o document.getElementById("id_do_campo").value; vc tem que fazer o seguinte no seu form vc deve colocar uma tag chamada prependId="false" pois os atributos filhos vao herdando os Id dos elementos pais ... tipo
<form id = "a">
<texto id = "b">
</form>

o codigo gerado disso fica algo como

<form id = "a">
<texto id = "a:b">
</form>

o texto por ser filho do form recebe o id do pai... ai colocando o prependId="false" no form não era para isso acontecer, mas comigo não esta dando certo tb =/
olha meu topico
http://guj.com.br/posts/list/225851.java

D

Eu acredito q assim funciona:

<h:form id="aForm">
  <h:inputText id="anInput" />
</h:form>
<script type="javascript">
<[CDATA[
  document.getElementById('aForm:anInput');
]]>
</script>
S

nao funcionou :S

eu dei um alert e ele mostrou null

ai eu puis .value no final e ele nao mostrou mais nada…nem abriu o dialog…

D

Se vc estiver usando Facelets use o seguinte:

<h:form id="aForm">
  <h:inputText id="anInput" />
</h:form>
<script type="text/javascript">
  var input = document.getElementById('aForm:anInput');
  alert(input);
</script>
S

nao estou usando facelets

D

Eu fiz um teste com o primeiro código q postei e o <[CDATA[…]]> realmente ficou sobrando pois o framework o colocou lá p/ mim. Eu ñ tenho certeza d quem fez isso, se foi Facelets, JSF, ou o próprio servidor. Agora, vc ao menos testou o ultimo código q postei? Eu o executei em servidor Glassfish v3.0.1 e funcionaou perfeitamente.

S

nao deu certo…eu tentei todos os exemplos ai de cima…nenhuma deu certo…
se isso ajuda em alguma coisa, minha pagina é .jsp…

D

Mesmo JSP o código deveria funcionar. Seria um problema postar o código da sua página p/ q eu possa dar uma olhada?

S

tem partes estranhas no codigo rsrs…mas nem esquenta que sao testes rsrs…

<%@page contentType="text/html" pageEncoding="ISO-8859-1"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<f:subview id="conteudo_lateral_direita">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
            <script type="text/javascript">
                $(document).ready(function(){
                    $('#cadastrar').button();

                    $('#cadastrar').click(function(){
                        var nome = document.getElementById('formulario:nome_adm').value;

                        alert(nome);
                    });

                    $('#novo').button({ icons: {primary: 'ui-icon-document'} });
                    $('#editar').button({ icons: {primary: 'ui-icon-pencil'} });
                    $('#excluir').button({ icons: {primary: 'ui-icon-trash'} });

                    $('#conteudo').css('height', '880px');

                    $('#novo').click(function(){
                        var xml = "<administradora>\n\
                                        <codigo>0</codigo>\n\
                                        <nome>heitor</nome>\n\
                                        <razaoSocial>razao</razaoSocial>\n\
                                        <cnpj>12345678912345</cnpj>\n\
                                        <rua>rua</rua>\n\
                                        <bairro>bairro</bairro>\n\
                                        <complemento>comlemento</complemento>\n\
                                        <numero>62</numero>\n\
                                        <cep>13339520</cep>\n\
                                        <cidade>indaiatuba</cidade>\n\
                                        <uf>SP</uf>\n\
                                        <telefone>30160786</telefone>\n\
                                        <ddd>19</ddd>\n\
                                        <email>[email removido]</email>\n\
                                        <site>site.com.br</site>\n\
                                        <nomeResponsavel>heitor</nomeResponsavel>\n\
                                        <telefoneResponsavel>12345678</telefoneResponsavel>\n\
                                        <dddTelefoneResponsavel>19</dddTelefoneResponsavel>\n\
                                        <celularResponsavel>12345678</celularResponsavel>\n\
                                        <dddCelularResponsavel>19</dddCelularResponsavel>\n\
                                        <nextelResponsavel>[telefone removido]</nextelResponsavel>\n\
                                        <emailResponsavel>[email removido]</emailResponsavel>\n\
                                        <usuarioPainel>dadasdas</usuarioPainel>\n\
                                        <senhaPainel>dsadas</senhaPainel>\n\
                                        <ultimoAcesso>2005-12-13 17:26:58.772 CET</ultimoAcesso>\n\
                                        <dataCadastro>2005-12-13 17:26:58.772 CET</dataCadastro>\n\
                                        <status>false</status>\n\
                                    </administradora>";
                        $.post("Servlet", {action: "cadastrar", bean: "Administradora", param: xml});
                        alert("aqui");
                    });
                });
            </script>
        </head>
        <body>
            <div id="titulo">
                <h:outputText value="Listagem de Usuários" />
            </div>

            <h:form id="formulario">
                <div id="formulario">
                    <h3 style="margin-top: 0px;"><h:outputText value="Informações da administradora" /></h3>
                    <h:panelGrid columns="2" columnClasses="colunaAdm1, colunaAdm2" width="625">
                            <h:outputLabel for="nome_adm" value="Nome:" />
                            <h:inputText id="nome_adm" value="" size="82" maxlength="50"/>
                            <h:outputLabel for="razao_social_adm" value="Razão Social:" />
                            <h:inputText id="razao_social_adm" value="" size="82" maxlength="50"/>
                            <h:outputLabel for="cnpj_adm" value="CNPJ:" />
                            <h:inputText id="cnpj_adm" value="" size="15" maxlength="14"/>
                            <h:outputLabel for="rua_adm" value="Rua:" />
                            <h:inputText id="rua_adm" value="" size="70" maxlength="50"/>
                            <h:outputLabel for="bairro_adm" value="Bairro:" />
                            <h:inputText id="bairro_adm" value="" size="70" maxlength="50"/>
                            <h:outputLabel for="complemento_adm" value="Complemento:" />
                            <h:inputText id="complemento_adm" value="" size="82" maxlength="100"/>
                            <h:outputLabel for="numero_adm" value="Número:" />
                            <h:inputText id="numero_adm" value="" size="5" maxlength="6"/>
                            <h:outputLabel for="cep_adm" value="CEP:" />
                            <h:inputText id="cep_adm" value="" size="8" maxlength="9"/>
                            <h:outputLabel for="cidade_adm" value="Cidade:" />
                            <h:inputText id="cidade_adm" value="" size="40" maxlength="40"/>
                            <h:outputLabel for="estado_adm" value="Estado:" />
                            <h:selectOneMenu id="estado_adm">
                                <f:selectItems value="#{usuario.estados}" />
                            </h:selectOneMenu>
                            <h:outputLabel for="telefone_adm" value="Telefone:" />
                            <h:inputText id="telefone_adm" value="" size="12" maxlength="20"/>
                            <h:outputLabel for="email_adm" value="Email:" />
                            <h:inputText id="email_adm" value="" size="60" maxlength="80"/>
                            <h:outputLabel for="site_adm" value="Site:" />
                            <h:inputText id="site_adm" value="" size="60" maxlength="80"/>
                    </h:panelGrid>

                    <br/>
                    <h3><h:outputText value="Informações do responsável" /></h3>
                    <h:panelGrid columns="2" columnClasses="colunaAdm1, colunaAdm2" width="625">
                            <h:outputLabel for="nome_resp_adm" value="Nome:" />
                            <h:inputText id="nome_resp_adm" value="" size="82" maxlength="40"/>
                            <h:outputLabel for="telefone_resp_adm" value="Telefone:" />
                            <h:inputText id="telefone_resp_adm" value="" size="12" maxlength="20"/>
                            <h:outputLabel for="celular_resp_adm" value="Celular:" />
                            <h:inputText id="celular_resp_adm" value="" size="12" maxlength="20"/>
                            <h:outputLabel for="nextel_resp_adm" value="Nextel:" />
                            <h:inputText id="nextel_resp_adm" value="" size="12" maxlength="20"/>
                            <h:outputLabel for="email_resp_adm" value="Email:" />
                            <h:inputText id="email_resp_adm" value="" size="60" maxlength="80"/>
                    </h:panelGrid>

                    <br/>
                    <h3><h:outputText value="Informações da conta de usuário" /></h3>
                    <h:panelGrid columns="2" columnClasses="colunaAdm1, colunaAdm2" width="625">
                            <h:outputLabel for="usuario_adm" value="Usuário:" />
                            <h:inputText id="usuario_adm" value="" size="20" maxlength="40"/>
                            <h:outputLabel for="senha_adm" value="Senha:" />
                            <h:inputSecret id="senha_adm" value="" size="20" maxlength="40"/>
                            <h:outputLabel for="confirmar_senha_adm" value="Confirmar senha:" />
                            <h:inputSecret id="confirmar_senha_adm" value="" size="20" maxlength="40"/>
                    </h:panelGrid>

                    <br/>
                    <br/>
                    <a id="cadastrar">
                        <h:outputText value="Cadastrar" />
                    </a>
                </div>
            </h:form>
        </body>
    </html>
</f:subview>
V

veja como esta o código fonte pelo browser… as vezes o elemento que você quer não estar herdando apena a ID do form… logo nao daria para pegar apenas com
document.getElementById(‘aForm:anInput’);
vc teria que fazer algo como…

<h:form id="aForm" prependId="false">
  <h:inputText id="anInput" />
</h:form>
<script type="text/javascript">
  var input = document.getElementById('anInput');
  alert(input);
</script>

coloque o ( prependId=“false” ) dentro do Form e utilize o document.getElementById(‘anInput’);

S

eu vi o codigo fonte e as input’s estao com o id assim: conteudo:conteudo_lateral_direita:razao_social_adm

“conteudo” é uma div que eu carrega a div “conteudo_lateral_direita” que carrega esta pagina…

e eu puis isso no get element id e deu certo rs

V

Schoker:
eu vi o codigo fonte e as input’s estao com o id assim: conteudo:conteudo_lateral_direita:razao_social_adm

“conteudo” é uma div que eu carrega a div “conteudo_lateral_direita” que carrega esta pagina…

e eu puis isso no get element id e deu certo rs

sim sim, isto acontece pois o JSF monta meio que uma arvore de IDs… logo os elementos filhos recebem a ID do elemento pai na sua id… ficando separado pelos “:” …
ai quando vc coloca o comando ( prependId=“false” ) o elemento pai não passa para seus filhos a sua ID

P
Schoker:
tem partes estranhas no codigo rsrs...mas nem esquenta que sao testes rsrs..
<%@page contentType="text/html" pageEncoding="ISO-8859-1"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<f:subview id="conteudo_lateral_direita">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
            <script type="text/javascript">
                $(document).ready(function(){
                    $('#cadastrar').button();

                    $('#cadastrar').click(function(){
                        var nome = document.getElementById('formulario:nome_adm').value;

                        alert(nome);
                    });

                    $('#novo').button({ icons: {primary: 'ui-icon-document'} });
                    $('#editar').button({ icons: {primary: 'ui-icon-pencil'} });
                    $('#excluir').button({ icons: {primary: 'ui-icon-trash'} });

                    $('#conteudo').css('height', '880px');

                    $('#novo').click(function(){
                        var xml = "<administradora>\n\
                                        <codigo>0</codigo>\n\
                                        <nome>heitor</nome>\n\
                                        <razaoSocial>razao</razaoSocial>\n\
                                        <cnpj>12345678912345</cnpj>\n\
                                        <rua>rua</rua>\n\
                                        <bairro>bairro</bairro>\n\
                                        <complemento>comlemento</complemento>\n\
                                        <numero>62</numero>\n\
                                        <cep>13339520</cep>\n\
                                        <cidade>indaiatuba</cidade>\n\
                                        <uf>SP</uf>\n\
                                        <telefone>30160786</telefone>\n\
                                        <ddd>19</ddd>\n\
                                        <email>[email removido]</email>\n\
                                        <site>site.com.br</site>\n\
                                        <nomeResponsavel>heitor</nomeResponsavel>\n\
                                        <telefoneResponsavel>12345678</telefoneResponsavel>\n\
                                        <dddTelefoneResponsavel>19</dddTelefoneResponsavel>\n\
                                        <celularResponsavel>12345678</celularResponsavel>\n\
                                        <dddCelularResponsavel>19</dddCelularResponsavel>\n\
                                        <nextelResponsavel>[telefone removido]</nextelResponsavel>\n\
                                        <emailResponsavel>[email removido]</emailResponsavel>\n\
                                        <usuarioPainel>dadasdas</usuarioPainel>\n\
                                        <senhaPainel>dsadas</senhaPainel>\n\
                                        <ultimoAcesso>2005-12-13 17:26:58.772 CET</ultimoAcesso>\n\
                                        <dataCadastro>2005-12-13 17:26:58.772 CET</dataCadastro>\n\
                                        <status>false</status>\n\
                                    </administradora>";
                        $.post("Servlet", {action: "cadastrar", bean: "Administradora", param: xml});
                        alert("aqui");
                    });
                });
            </script>
        </head>
        <body>
            <div id="titulo">
                <h:outputText value="Listagem de Usuários" />
            </div>

            <h:form id="formulario">
                <div id="formulario">
                    <h3 style="margin-top: 0px;"><h:outputText value="Informações da administradora" /></h3>
                    <h:panelGrid columns="2" columnClasses="colunaAdm1, colunaAdm2" width="625">
                            <h:outputLabel for="nome_adm" value="Nome:" />
                            <h:inputText id="nome_adm" value="" size="82" maxlength="50"/>
                            <h:outputLabel for="razao_social_adm" value="Razão Social:" />
                            <h:inputText id="razao_social_adm" value="" size="82" maxlength="50"/>
                            <h:outputLabel for="cnpj_adm" value="CNPJ:" />
                            <h:inputText id="cnpj_adm" value="" size="15" maxlength="14"/>
                            <h:outputLabel for="rua_adm" value="Rua:" />
                            <h:inputText id="rua_adm" value="" size="70" maxlength="50"/>
                            <h:outputLabel for="bairro_adm" value="Bairro:" />
                            <h:inputText id="bairro_adm" value="" size="70" maxlength="50"/>
                            <h:outputLabel for="complemento_adm" value="Complemento:" />
                            <h:inputText id="complemento_adm" value="" size="82" maxlength="100"/>
                            <h:outputLabel for="numero_adm" value="Número:" />
                            <h:inputText id="numero_adm" value="" size="5" maxlength="6"/>
                            <h:outputLabel for="cep_adm" value="CEP:" />
                            <h:inputText id="cep_adm" value="" size="8" maxlength="9"/>
                            <h:outputLabel for="cidade_adm" value="Cidade:" />
                            <h:inputText id="cidade_adm" value="" size="40" maxlength="40"/>
                            <h:outputLabel for="estado_adm" value="Estado:" />
                            <h:selectOneMenu id="estado_adm">
                                <f:selectItems value="#{usuario.estados}" />
                            </h:selectOneMenu>
                            <h:outputLabel for="telefone_adm" value="Telefone:" />
                            <h:inputText id="telefone_adm" value="" size="12" maxlength="20"/>
                            <h:outputLabel for="email_adm" value="Email:" />
                            <h:inputText id="email_adm" value="" size="60" maxlength="80"/>
                            <h:outputLabel for="site_adm" value="Site:" />
                            <h:inputText id="site_adm" value="" size="60" maxlength="80"/>
                    </h:panelGrid>

                    <br/>
                    <h3><h:outputText value="Informações do responsável" /></h3>
                    <h:panelGrid columns="2" columnClasses="colunaAdm1, colunaAdm2" width="625">
                            <h:outputLabel for="nome_resp_adm" value="Nome:" />
                            <h:inputText id="nome_resp_adm" value="" size="82" maxlength="40"/>
                            <h:outputLabel for="telefone_resp_adm" value="Telefone:" />
                            <h:inputText id="telefone_resp_adm" value="" size="12" maxlength="20"/>
                            <h:outputLabel for="celular_resp_adm" value="Celular:" />
                            <h:inputText id="celular_resp_adm" value="" size="12" maxlength="20"/>
                            <h:outputLabel for="nextel_resp_adm" value="Nextel:" />
                            <h:inputText id="nextel_resp_adm" value="" size="12" maxlength="20"/>
                            <h:outputLabel for="email_resp_adm" value="Email:" />
                            <h:inputText id="email_resp_adm" value="" size="60" maxlength="80"/>
                    </h:panelGrid>

                    <br/>
                    <h3><h:outputText value="Informações da conta de usuário" /></h3>
                    <h:panelGrid columns="2" columnClasses="colunaAdm1, colunaAdm2" width="625">
                            <h:outputLabel for="usuario_adm" value="Usuário:" />
                            <h:inputText id="usuario_adm" value="" size="20" maxlength="40"/>
                            <h:outputLabel for="senha_adm" value="Senha:" />
                            <h:inputSecret id="senha_adm" value="" size="20" maxlength="40"/>
                            <h:outputLabel for="confirmar_senha_adm" value="Confirmar senha:" />
                            <h:inputSecret id="confirmar_senha_adm" value="" size="20" maxlength="40"/>
                    </h:panelGrid>

                    <br/>
                    <br/>
                    <a id="cadastrar">
                        <h:outputText value="Cadastrar" />
                    </a>
                </div>
            </h:form>
        </body>
    </html>
</f:subview>

Amigo uma dica você pode usar jQuery para pegar os valores do campo da seguinte forma:

<< var nome = document.getElementById('formulario:nome_adm').value;

>> var nome = $('#formulario\\:nome_adm').val();

Criado 26 de novembro de 2010
Ultima resposta 13 de jun. de 2011
Respostas 13
Participantes 4