Capture the value of the item selected in the selectOneRadio with JavaScript



  • I have this Primefaces component:

    <p:selectOneRadio id="mercado" styleClass="teste">
        <f:selectItem itemLabel="Interno" itemValue="I"/>
        <f:selectItem itemLabel="Externo" itemValue="E"/>
    </p:selectOneRadio>
    

    I tried to capture the value of the selection via JavaScript as below, but it returns empty.

    $('.teste').change(function () {
        alert($(this).val());
    });
    

    How do I recover the value of the selection via JavaScript?

    Full form code:

    <!-- Dialog com Formulario de Produtos-->
    <p:dialog header="Formulário de Produtos" widgetVar="dialogProdutos" resizable="false" modal="true">
      <h:form id="formCadClientes">
        <p:panelGrid columns="2" id="painel" columnClasses="rotulo, campo" style="margin-top: 20px; margin-bottom: 20px">
          <p:outputLabel value="Código" for="codigo" />
          <p:panelGrid columns="2" styleClass="semBorda">
            <p:inputText id="codigo" size="20" />
          </p:panelGrid>
          <p:outputLabel value="Descrição" for="descricao" />
          <p:panelGrid columns="2" styleClass="semBorda">
            <p:inputText id="descricao" size="70" />
          </p:panelGrid>
          <p:outputLabel value="Categoria" for="categoria" />
          <p:panelGrid columns="2" styleClass="semBorda">
            <p:selectOneMenu id="categoria" style="width: 230px">
              <f:selectItem itemLabel="Selecione uma categoria" />
            </p:selectOneMenu>
            <p:commandButton value="+" oncomplete="PF('dialogCategorias').show();" title="Adicionar nova categoria" style="height: 30px" />
          </p:panelGrid>
          <p:outputLabel value="Mercado" for="mercado" />
          <p:panelGrid columns="2" styleClass="semBorda">
            <p:selectOneRadio id="mercado" styleClass="teste">
              <f:selectItem itemLabel="Interno" itemValue="I" />
              <f:selectItem itemLabel="Externo" itemValue="E" />
            </p:selectOneRadio>
          </p:panelGrid>
          <p:outputLabel value="Preço" for="preco" />
          <p:panelGrid columns="2" styleClass="semBorda">
            <p:inputText id="preco" size="15" />
          </p:panelGrid>
          <p:outputLabel value="Moeda" for="moeda" />
          <p:panelGrid columns="2" styleClass="semBorda">
            <p:inputText id="moeda" size="15" />
          </p:panelGrid>
          <p:outputLabel value="Imposto" for="imposto" />
          <p:panelGrid columns="2" styleClass="semBorda">
            <p:inputText id="imposto" size="15" />
          </p:panelGrid>
        </p:panelGrid>
        <p:commandButton value="Gravar" icon="ui-icon-disk" style="width: 120px; height: 40px; font-size: 16px" />
        <p:commandButton value="Cancelar" icon="ui-icon-cancel" oncomplete="PF('dialogProdutos').hide();" style="width: 120px; height: 40px; font-size: 16px" />
      </h:form>
    </p:dialog>
    

    Here image of the rendered form:

    Imagem do formulário renderizado

    Basically what I would like is that when selecting the Internal, in the currency field the value "R$" is sealed if you select the External, the value "US$" is sealed.



  • Insert onchange="teste(this.value)" (or) onclick="teste(this.value)") in <p:selectOneRadio id="mercado" styleClass="teste">, getting like this:

    <p:selectOneRadio id="mercado" styleClass="teste" onchange="teste(this.value)">
    

    And the JavaScript function that will receive the value:

    <script>
    function teste(a){
        alert('O valor do radio clicado é '+a);
    }
    </script>
    



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2