Discussoes de Programacao e Tecnologia

[RESOLVIDO]Re:Recuperar valor do selectonemenu com javascript

6 respostas
P
pimentaft

Alguem sabe como eu pego o valor do <h:selectonemenu> com javascript?

Eu tentei com os codigos abaixo e nao obtive sucesso:

document.getElementbyId('idcombo').value

e tbm tentei:

document.nomeform.idcombo.value

Eu procurei em mtos lugares e nada.

Se alguem puder me ajudar.

Grato

Alura Desenvolvimento Front-End React Do primeiro componente à liderança técnica! HTML/CSS/JavaScript fundamental, React com hooks e...

6 Respostas

F
febeckers

como está o id do select?

Para "pegar " algum valor atraves de java script voce deve setar um id, exe.:

<input type="text" id="input">

e para pegar os dados:

document.getElementById("nomeIput").value;

em select voce tem que chamar o uma função javascript em onChange passando o valor this, e na função sim pegar o o valor que foi passado atraves do documente.getElementeBy… ex.:

<select id="nomeSelect" onChange="funcao(this)"></select>

Abraços!

P
pimentaft

Opa!
Obrigado por responder!
Na verdade eu setei um id na select e tambem testei da maneira que vc me passou, mas nao funcionou.Veja meu codigo:

<%@taglib uri="http://java.sun.com/jstl/core" prefix="c1"%><%@taglib
	uri="http://richfaces.org/rich" prefix="rich"%><%@taglib
	uri="http://richfaces.org/a4j" prefix="a4j"%><%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
	<%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
	<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Alocação de turmas nas salas</title>
<SCRIPT>
function verificaHorario(){
    var valor = document.getElementById("horainicio").value;
    alert(valor);
}
</SCRIPT>
</head>
<body>
    <f:view>
	<h:form id="alocaform">
		<center><h3>Alocação das turmas nas salas</h3></center>
		<h:outputText value="Campus:" />
		<h:selectOneMenu id="campus" style="width: 114px" value="#{bAloca.codcampus}">   
			<f:selectItems value="#{bCampus.listarCampus}"/>
		</h:selectOneMenu>
		<br>
		<h:outputText value="Turma:"/>
		<h:selectOneMenu id="turma" style="width: 125px" value="#{bAloca.codturma}">
			<f:selectItems value="#{bCampus.listarTurmas}"/>
		</h:selectOneMenu>
		<br>
		<h:outputText value="Hora inicial:"/>
		<h:selectOneMenu id="horainicio" style="width: 47px" value="#{bAloca.horainicio}">
			<f:selectItem itemLabel="00" itemValue="00"/>
			<f:selectItem itemLabel="01" itemValue="01"/>
			<f:selectItem itemLabel="02" itemValue="02"/>
			<f:selectItem itemLabel="03" itemValue="03"/>
			<f:selectItem itemLabel="04" itemValue="04"/>
			<f:selectItem itemLabel="05" itemValue="05"/>
			<f:selectItem itemLabel="06" itemValue="06"/>
			<f:selectItem itemLabel="07" itemValue="07"/>
			<f:selectItem itemLabel="08" itemValue="08"/>
			<f:selectItem itemLabel="09" itemValue="09"/>
			<f:selectItem itemLabel="10" itemValue="10"/>
			<f:selectItem itemLabel="11" itemValue="11"/>
			<f:selectItem itemLabel="12" itemValue="12"/>
			<f:selectItem itemLabel="13" itemValue="13"/>
			<f:selectItem itemLabel="14" itemValue="14"/>
			<f:selectItem itemLabel="15" itemValue="15"/>
			<f:selectItem itemLabel="16" itemValue="16"/>
			<f:selectItem itemLabel="17" itemValue="17"/>
			<f:selectItem itemLabel="18" itemValue="18"/>
			<f:selectItem itemLabel="19" itemValue="19"/>
			<f:selectItem itemLabel="20" itemValue="20"/>
			<f:selectItem itemLabel="21" itemValue="21"/>
			<f:selectItem itemLabel="22" itemValue="22"/>
			<f:selectItem itemLabel="23" itemValue="23"/>
		</h:selectOneMenu>	
		:
		<h:selectOneMenu id="minutoinicio" style="width: 47px" value="#{bAloca.minutoinicio}" >
			<f:selectItem itemLabel="00" itemValue="00"/>
			<f:selectItem itemLabel="10" itemValue="10"/>
			<f:selectItem itemLabel="20" itemValue="20"/>
			<f:selectItem itemLabel="30" itemValue="30"/>
			<f:selectItem itemLabel="40" itemValue="40"/>
			<f:selectItem itemLabel="50" itemValue="50"/>
		</h:selectOneMenu>
		<br>
		<h:outputText value="Hora fim:"/>
		<h:selectOneMenu id="horafim" style="width: 47px" value="#{bAloca.horafim}">
			<f:selectItem itemLabel="00" itemValue="00"/>
			<f:selectItem itemLabel="01" itemValue="01"/>
			<f:selectItem itemLabel="02" itemValue="02"/>
			<f:selectItem itemLabel="03" itemValue="03"/>
			<f:selectItem itemLabel="04" itemValue="04"/>
			<f:selectItem itemLabel="05" itemValue="05"/>
			<f:selectItem itemLabel="06" itemValue="06"/>
			<f:selectItem itemLabel="07" itemValue="07"/>
			<f:selectItem itemLabel="08" itemValue="08"/>
			<f:selectItem itemLabel="09" itemValue="09"/>
			<f:selectItem itemLabel="10" itemValue="10"/>
			<f:selectItem itemLabel="11" itemValue="11"/>
			<f:selectItem itemLabel="12" itemValue="12"/>
			<f:selectItem itemLabel="13" itemValue="13"/>
			<f:selectItem itemLabel="14" itemValue="14"/>
			<f:selectItem itemLabel="15" itemValue="15"/>
			<f:selectItem itemLabel="16" itemValue="16"/>
			<f:selectItem itemLabel="17" itemValue="17"/>
			<f:selectItem itemLabel="18" itemValue="18"/>
			<f:selectItem itemLabel="19" itemValue="19"/>
			<f:selectItem itemLabel="20" itemValue="20"/>
			<f:selectItem itemLabel="21" itemValue="21"/>
			<f:selectItem itemLabel="22" itemValue="22"/>
			<f:selectItem itemLabel="23" itemValue="23"/>
		</h:selectOneMenu>	
		:
		<h:selectOneMenu id="minutofim" style="width: 47px" value="#{bAloca.minutofim}">
			<f:selectItem itemLabel="00" itemValue="00"/>	
			<f:selectItem itemLabel="10" itemValue="10"/>
			<f:selectItem itemLabel="20" itemValue="20"/>
			<f:selectItem itemLabel="30" itemValue="30"/>
			<f:selectItem itemLabel="40" itemValue="40"/>
			<f:selectItem itemLabel="50" itemValue="50"/>
		</h:selectOneMenu>
		
		<br>
		<h:outputText value="Dia da semana:"/>
		<h:selectOneMenu id="diasemana" style="width: 157px" value="#{bAloca.diasemana}">
			<f:selectItem itemLabel="SEGUNDA" itemValue="SEGUNDA"/>
			<f:selectItem itemLabel="TERCA" itemValue="TERCA"/>
			<f:selectItem itemLabel="QUARTA" itemValue="QUARTA"/>
			<f:selectItem itemLabel="QUINTA" itemValue="QUINTA"/>
			<f:selectItem itemLabel="SEXTA" itemValue="SEXTA"/>
			<f:selectItem itemLabel="SABADO" itemValue="SABADO"/>
		</h:selectOneMenu>	
		<br>
		<h:outputText value="Quantidade:"/>
		<h:inputText value="#{bAloca.quantidade}"/>
		<br>
		<h:commandButton value="mostrar" actionListener="#{bAloca.salasdisponiveis}" onclick="verificaHorario()"/><br><br>
		<a4j:keepAlive beanName="bAloca"/>
		<rich:dataTable border="1" id="salas" value="#{bAloca.listaSalaDisponivel}" var="salas">
			<h:column id="descricao">
				<h:outputText value="#{salas.dscSala}"></h:outputText>
				
				<f:facet name="header">
					<h:outputText value="descricao"></h:outputText>
				</f:facet>
			</h:column>
			<h:column id="capacidade">
				<h:outputText value="#{salas.capacidade}"></h:outputText>
				<f:facet name="header">
					<h:outputText value="capacidade"></h:outputText>
				</f:facet>
			</h:column>
			<h:column id="arcondicionado">
				<h:outputText value="#{salas.arCondicionado}"></h:outputText>
				<f:facet name="header">
					<h:outputText value="Ar condicionado"></h:outputText>
				</f:facet>
			</h:column>
			<h:column id="ventilador">
				<h:outputText value="#{salas.ventilador}"></h:outputText>
				<f:facet name="header">
					<h:outputText value="ventilador"></h:outputText>
				</f:facet>
			</h:column>
			<h:column id="tipoquadro">
				<h:outputText value="#{salas.tipoQuadro}"></h:outputText>
				<f:facet name="header">
					<h:outputText value="Tipo do Quadro"></h:outputText>
				</f:facet>
			</h:column>
			<h:column id="salvar">
				<f:facet name="header">
					<h:outputText value="Salvar"></h:outputText>
				</f:facet>
				<h:commandLink action="#{bAloca.confirmaAlocaForm}" actionListener="#{bAloca.confirmaAloca}">
					<h:outputText value="Salvar"></h:outputText>
				<f:param id="codsala" value="#{salas.id.codSala}"/>	
				<f:param id="codcampus" value="#{salas.id.codCampus}"/>
				<f:param id="codbloco" value="#{salas.id.codBloco}"/>
				<f:param id="codpavimento" value="#{salas.id.codPavimento}"/>
				</h:commandLink>
			
			</h:column>
		
		</rich:dataTable>
	</h:form>
	</f:view>
	
</body>
</html>

O erro é esse: “Objeto necessário”

N
Naruffy

lembrando que os ids em JSF são setados sempre como o nome do form:id do componente

então se o form se chamar formulario e o componente chamar combo o valor deverá ser recuperado da seguinte maneira

document.getElementById('formulario:combo').value;

[]s

F
febeckers

Sim mas olha só, você esta chamdno a função atraves de um botão, você terá de chama a funçatravés de um onChange ou algo parecido, jstl não me recordo exatamente o comando

Abraço!

P
pimentaft

Opa!
Funcionou!
Veja a função:

function verificaHorario(){
    var valor = document.getElementById("alocaform:horainicio").value;
    alert(valor);
}

Obrigado pela ajuda!

F
febeckers

valeu t+!

Criado 25 de novembro de 2008
Ultima resposta 25 de nov. de 2008
Respostas 6
Participantes 3

Topicos relacionados

Como abrir um .WAR 3 respostas Instalar o Jforum 13 respostas Codificação com Ajax + Jquery + Spring [RESOLVIDO] 6 respostas Eclipse não gera .class 6 respostas Icone de aplicação web 11 respostas
Alura POO: o que é programação orientada a objetos? Aprenda os conceitos básicos da programação orientada a objetos, como classes, objetos, herança, encapsulamento e polimorfismo, com exemplos.
Casa do Codigo JavaScript Assertivo: Testes e qualidade de codigo em... Por Gabriel Ramos — Casa do Codigo