Imprimir inputs após selecionar opção da combo

Martinsrj · Abril 15, 2010

Olá pessoal, bom dia!

Estou com duas dificuldade em javascript.

Primeira-

1° Preciso criar no final da pagina um link onde o usuario ao clicar crie as linhas abaixo.

Existe caso que apenas com esses campos irá suprir a necessidade do usuario, porem depedendo do caso irá necessida na pagina de mais campo como esse. Por isso que pensei num link e criando dinamicamente os campos abaixo.

<tr>
    <td>
      <label for="optTpDesp" class="label">Tipo de despesas</label><br />
      <select name="optTpDesp" id="optTpDesp">
        <option>... Selecione ...</option>
        <option value="Kilometragem">Kilometragem</option>
        <option value="Taxi">Taxi</option>
        <option value="Onibus">&Ocirc;nibus</option>
        <option value="Refeicao">Refei&ccedil;&atilde;o</option>
        <option value="Outros">Outros</option>
     </select> 
      </td>
  </tr>
  <tr>
    <td>
      <label for="txtDesc" class="label">Descrição</label><br />
      <input class="input" type="text" title="" maxlength="" size="" name="txtDesc" id="txtDesc" value="" />
      </td>
  </tr>
  <tr>
    <td>
      <label for="txtValor" class="label">Valor</label><br />
      <input class="input" type="text" title="" maxlength="" size="" name="txtValor" id="txtValor" value="" />
      </td>
  </tr>
  <tr>

Segunda 2° Quando o usuario selecionar a opção HP da combo (optTipoChamado) imprima tb na tabela as linha abaixo:

<tr>
    <td>
      <label for="txtPNRemovido" class="label">PN Removido:</label><br />
      <input class="input" type="text" title="" maxlength="" size="" name="txtPNRemovido" id="txtPNRemovido" value="" />
      </td>
  </tr>
  <tr>
    <td>
      <label for="txtNSRemovido" class="label">N/S Removido</label><br />
            <input class="input" type="text" title="" maxlength="" size="" name="txtNSRemovido" id="txtNSRemovido" value="" />
      </td>
  </tr>
  <tr>
    <td>
      <label for="txtPNInstalado" class="label">PN Instalado:</label><br />
            <input class="input" type="text" title="" maxlength="" size="" name="txtPNInstalado" id="txtPNInstalado" value="" />
      </td>
  </tr>
  <tr>
    <td>
      <label for="txtNSInstalado" class="label">N/S Instalado</label><br />
            <input class="input" type="text" title="" maxlength="" size="" name="txtNSInstalado" id="txtNSInstalado" value="" />
      </td>
  </tr>

No momento como não estou conseguindo fazer esse script em javascript imprime tudo na tabela, seja ele HP ou NTL Abaixo segue o meu código completo. OBS.: Cheguei a criar uma função para pegar o nome do texto que o usuario selecionou.

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Atualização de Chamado</title>

<style type="text/css">
.label {
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-size:11px;
}

input:focus, select:focus, textarea:focus {
      background:#DFDFFF;
      color:white; 
  }

body { 
      margin:0; 
      padding:0; 
      background:#E8E8E8;  
} 
#tudo { 
      width: 760px; 
      margin:0 auto;           
      padding: 10px; 
      text-align:left; /* "remédio" para o hack do IE */   
      background:#FFFFFF;
          
} 
/*#conteudo { 
      padding: 5px; 
      background-color: #FFFFFF;
}*/

table.tabela {   
      width:200;
      text-align: center;   
      margin: 0 auto;
}
</style>

<script type="text/javascript">
function textoCombo(){
      var indice = document.frmPrimeiro.optTipoChamado.selectedIndex
      var textoEscolhido = document.frmPrimeiro.optTipoChamado.options[indice].text
      alert(textoEscolhido)
}
</script>


</head>
<body>
<div id="tudo">
<!--<div id="conteudo">-->
<form id="frmPrimeiro" name="frmPrimeiro" method="post" action="">

<table class="tabela">
  <tr>
    <td>
      <label class="label" for="optTipoChamado">Tipo do Chamado:</label><br />
      <select title="Por favor, selecione o tipo do chamado" name="optTipoChamado" id="optTipoChamado">
            <option value="">... Selecione ...</option>
            <option value="f_hp@ntl.com.br">HP</option>
            <option value="f_altiris@ntl.com.br">NTL</option>
      </select>
      </td>
  </tr>
  <tr>
    <td>
      <label for="txtChamadoAltiris" class="label">Chamado Altiris:</label><br />
            <input class="input" type="text" title="" maxlength="" size="" name="txtChamadoAltiris" id="txtChamadoAltiris" value="" />            
      </td>
  </tr>
  <tr>
    <td>
      <label for="txtChamadoHP" class="label">Chamado HP:</label><br />
            <input class="input" type="text" title="" maxlength="" size="" name="txtChamadoHP" id="txtChamadoHP" value="" />
      </td>
  </tr>
  <tr>
    <td>
      <label for="txtDescServico" class="label">Descrição do Serviço:</label><br />
      <textarea title="" name="txtDescServico" id="txtDescServico" rows="5" cols="25" class="input"></textarea>

      </td>
  </tr>
  <tr>
    <td>
      <label for="txtPNRemovido" class="label">PN Removido:</label><br />
      <input class="input" type="text" title="" maxlength="" size="" name="txtPNRemovido" id="txtPNRemovido" value="" />
      </td>
  </tr>
  <tr>
    <td>
      <label for="txtNSRemovido" class="label">N/S Removido</label><br />
            <input class="input" type="text" title="" maxlength="" size="" name="txtNSRemovido" id="txtNSRemovido" value="" />
      </td>
  </tr>
  <tr>
    <td>
      <label for="txtPNInstalado" class="label">PN Instalado:</label><br />
            <input class="input" type="text" title="" maxlength="" size="" name="txtPNInstalado" id="txtPNInstalado" value="" />
      </td>
  </tr>
  <tr>
    <td>
      <label for="txtNSInstalado" class="label">N/S Instalado</label><br />
            <input class="input" type="text" title="" maxlength="" size="" name="txtNSInstalado" id="txtNSInstalado" value="" />
      </td>
  </tr>
  <tr>
    <td>
      <label for="txtQAssRS" class="label">Quem assinou o RS</label><br />
            <input class="input" type="text" title="" maxlength="" size="" name="txtQAssRS" id="txtQAssRS" value="" />
      </td>
  </tr>
  <tr>
    <td>
      <label for="txtRS" class="label">RS</label><br />
            <input class="input" type="text" title="" maxlength="" size="" name="txtRS" id="txtRS" value="" />
      </td>
  </tr>
  <tr>
    <td>
      <label for="txtDtInicio" class="label">Data Inicio</label><br />
      <input class="input" type="text" title="" maxlength="" size="" name="txtDtInicio" id="txtDtInicio" value="" />
      </td>
  </tr>
  <tr>
    <td>
      <label for="txtHrInicio" class="label">Hora Inicio</label><br />
      <input class="input" type="text" title="" maxlength="" size="" name="txtHrInicio" id="txtHrInicio" value="" /> 
      </td>
  </tr>
  <tr>
    <td>
      <label for="txtDtTermino" class="label">Data Término</label><br />
      <input class="input" type="text" title="" maxlength="" size="" name="txtDtTermino" id="txtDtTermino" value="" />
      </td>
  </tr>
  <tr>
    <td>
      <label for="txtDtTermino" class="label">Hora Término<br /></label>
      <input class="input" type="text" title="" maxlength="" size="" name="txtDtTermino" value="" />
      </td>
  </tr>
  <tr>
    <td>
      <label class="label" id="txtReembolso"><b>Reembolso</b></label>
      </td>
  </tr>
  <tr>
    <td>
      <label for="optTpDesp" class="label">Tipo de despesas</label><br />
      <select name="optTpDesp" id="optTpDesp">
        <option>... Selecione ...</option>
        <option value="Kilometragem">Kilometragem</option>
        <option value="Taxi">Taxi</option>
        <option value="Onibus">&Ocirc;nibus</option>
        <option value="Refeicao">Refei&ccedil;&atilde;o</option>
        <option value="Outros">Outros</option>
     </select> 
      </td>
  </tr>
  <tr>
    <td>
      <label for="txtDesc" class="label">Descrição</label><br />
      <input class="input" type="text" title="" maxlength="" size="" name="txtDesc" id="txtDesc" value="" />
      </td>
  </tr>
  <tr>
    <td>
      <label for="txtValor" class="label">Valor</label><br />
      <input class="input" type="text" title="" maxlength="" size="" name="txtValor" id="txtValor" value="" />
      </td>
  </tr>
  <tr>
    <td align="right">
      <input type=button value="Propriedades" onclick="textoCombo()">&nbsp;
      <input name="Enviar" type="submit" id="Enviar" value="Enviar" />
      </td>
  </tr>
</table>

</form>
<!--</div>-->
</div>
</body>
</html>

Martinsrj · Abril 16, 2010

Olá pessoal, bom dia!

No post anterior informei duas dúvidas. A primeira conforme o texto que está dentro dos parenteses em parte foi resolvido

( 1° Preciso criar no final da pagina um link onde o usuario ao clicar crie as linhas abaixo.

Existe caso que apenas com esses campos irá suprir a necessidade do usuario, porem depedendo do caso irá necessida na pagina de mais campo como esse. Por isso que pensei num link e criando dinamicamente os campos abaixo. )

Veja neste link como ficou: http://martinsrj.com/teste/index1.php

A minha segunda dúvida ainda não consegui fazer. No inicio do formulario poussuo uma combo com dois itens HP e NTL. Necessito que os campos abaixo não apareçam quando a pagina for carregada, mas apareça apenas quando o usuario selecionar a opção HP.

Os itens (labels) são esses: PN Removido, N/S Removido, PN Instalado, N/S Instalado e consequetemente mais os inputs.

Abraços.

Acabei de atualizar o código, segue o link:

Postado no site do pastebin: http://pastebin.com/ZnWucemv

Editado Abril 16, 2010 por Martinsrj

Entrar

Imprimir inputs após selecionar opção da combo

Pergunta

Martinsrj

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Martinsrj

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades