Ir para conteúdo
tairone.real7

Abrir NOVO campo ao SELECIONAR OPCAO

Recommended Posts

Oi fiz um formulario, ficou bom para meu site, bom não julguem pela imagem que fiz porque foi na pressa,

O que quero e que ao clicar na quantidade de cursos abra o mesmo numero de campos para a pessoa poder escrever;

Exemplo ela clica em 3 CURSOS, abre 3 CAMPOS,. Alguem pode me dar uma direção apenas, ? sei fazer os campos so n a função.

Aguardo obg, meu formulario esta otimo, nao julguem pela imagem, ja ate coloquei o site no ar. Obg

DadosFORUM.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

Muito simples, fiz algo bem básico, veja:

Spoiler

<select id="id_do_seletor">
    <option value="1">Adicionar 1 input text</option>
    <option value="2">Adicionar 2 input's text</option>
    <option value="3">Adicionar 3 input's text</option>
    <option value="4">Adicionar 4 input's text</option>
    <option value="5">Adicionar 5 input's text</option>
</select>

<div id="onde_inserir"></div>

<script>
    var seletor = document.getElementById('id_do_seletor');
    var inserir = document.getElementById('onde_inserir');
    var alvo, novo;
    var quantidade = 0;
    var identificador = 0;
    seletor.addEventListener('change', criarInputs, false);

    function criarInputs(e) {
        alvo = e.target;
        quantidade = alvo.value;
        while (quantidade != 0) {
            quantidade--;
            identificador++;
            novo = document.createElement('input');
            novo.type = 'text';
            novo.name = 'input_inserido_' + identificador;
            inserir.appendChild(novo);
        }
    }
</script>

 

 

E se por acaso quiser limpar os inputs que tenham sido inseridos toda vez que o select é alterado basta adicionar isso antes do loop do while

inserir.innerHTML = null; // < Isso vai limpar o elemento pai onde os inputs são colocados

E lembre-se de controlar a variável identificador pois é ela quem vai fazer com que cada input possua um name diferente.

 

Qualquer coisa abra o console do navegador e veja como a manipulação é feita pelo script

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado caraa vlw mesmooo, estou criando meu site obg

15 horas atrás, Omar~ disse:

Muito simples, fiz algo bem básico, veja:

  Mostrar conteúdo oculto


<select id="id_do_seletor">
    <option value="1">Adicionar 1 input text</option>
    <option value="2">Adicionar 2 input's text</option>
    <option value="3">Adicionar 3 input's text</option>
    <option value="4">Adicionar 4 input's text</option>
    <option value="5">Adicionar 5 input's text</option>
</select>

<div id="onde_inserir"></div>

<script>
    var seletor = document.getElementById('id_do_seletor');
    var inserir = document.getElementById('onde_inserir');
    var alvo, novo;
    var quantidade = 0;
    var identificador = 0;
    seletor.addEventListener('change', criarInputs, false);

    function criarInputs(e) {
        alvo = e.target;
        quantidade = alvo.value;
        while (quantidade != 0) {
            quantidade--;
            identificador++;
            novo = document.createElement('input');
            novo.type = 'text';
            novo.name = 'input_inserido_' + identificador;
            inserir.appendChild(novo);
        }
    }
</script>

 

 

E se por acaso quiser limpar os inputs que tenham sido inseridos toda vez que o select é alterado basta adicionar isso antes do loop do while

inserir.innerHTML = null; // < Isso vai limpar o elemento pai onde os inputs são colocados

E lembre-se de controlar a variável identificador pois é ela quem vai fazer com que cada input possua um name diferente.

 

Qualquer coisa abra o console do navegador e veja como a manipulação é feita pelo script

Obg mesmooooo vlw veiioo

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por santans
      estou desenvolvendo uma tela de login, mas quando tento selecionar um script de redirecionamento de pagina que me leve de volta para a tela de login ou para o painel de controle caso consiga logar ocorre o seguinte erro:
       
      ( ! ) Parse error: syntax error, unexpected 'echo' (T_ECHO), expecting ',' or ';' in C:\wamp64\www\cadastro\laguna\userauthentication.php on line 43
       
       
       
      Abaixo esta o código o programa de autenticação de dados a partir do banco de dados (Lembrando que o erro ocorre na hora em que o redirecionamento para a tela inicial caso não estejam autenticados os dados ou caso os dados sejam verdadeiros e o redirecionamento falha na hora de encaminhar a tela inicial do site)...
      <?php $host = "localhost"; $user = "root"; $pass = ""; $banco = "cadastro"; $mysqli_connection = new MySQLi('localhost', 'root', '', 'cadastro'); if($mysqli_connection->connect_error){ echo "Desconectado! Erro: " . $mysqli_connection->connect_error; }else{ echo "Conectado!"; } ?> <html> <head> <meta charset="utf-8"> <title>Autenticando...</title> <script type="text/javascript"> function loginsuccessfully(){ setTimeout("window.location='painel.php'", 5000); } function loginfailed() { setTimeout("window.location='login.php'", 2000); } </script> </head> <body> <?php $email=$_POST['email']; $senha=$_POST['senha']; $sql = mysqli_query("SELECT * FROM usuarios WHERE email = '$email' and '$senha'") or die(mysqli_error()); $row = mysqli_num_rows($sql); if ($row > 0) { session_start(); $_SESSION['email']=$_POST['email']; $_SESSION['senha']=$_POST['email']; echo "<center>Você foi logado com sucesso! Aguarde um momento!</center>" echo "<script>loginsuccessfully()</script>"; }else{ echo "<center>senha ou email invalidos!</center>" echo "<script>loginfailed()</script>" } ?> </body> </html>  
       
      Abaixo esta o código do formulário:
       
      <html> <head> <title></title> </head> <body> <form name="loginform" method="post" action="userauthentication.php"> E-mail:<input type="text" name="email"><br/><br/> Senha:<input type="password" name="senha"><br/><br/> <input type="submit" value="entrar"></button> </form> </body> </html> fiquem a vontade ...
      quem puder ajudar 
       
       
    • Por Jovelan Sena
      E ai galera!
      Rapaz, to com um probleminha aqui, espera que vcs possam me ajudar. As imagens recebidas via upload do meu site estão ultrapassando as margens, como posso resolver isso?? To mandando foto do script e da interface.


    • Por diogosilva_frontend
      Boa tarde,
      Estou precisando de uma ajuda, sou novo em Javascript, Jquery, etc. Estou desenvolvendo um projeto e criei uma parte com Owl Carousel 2 onde o Slider muda conforme eu clico nos links do alfabeto. Ao clicar no link do alfabeto, o slider muda conforme o nome da pessoa e insere mais um link com o nome da pessoa abaixo do alfabeto, pois o alfabeto irá trazer o nome das pessoas conforme a primeira inicial de seu nome.
       
      Preciso fazer o comportamento inverso, ou seja, que eu possa mudar o slide através das setas e o slider selecionado apareça selecionado no link do alfabeto e o nome da pessoa apareça abaixo dele.
       
      Outra dúvida, eu fiz um Javascript grande para que quando eu clicasse em outro link, ele removesse os demais. Gostaria de saber se existe outra alternativa para simplificar esse código, pois acho que ficou muito repetitivo e grande.
      Poderiam me ajudar?
       
      Link do meu código: https://bit.ly/2J4CRJ5
       
      Obrigado
    • Por rtavix
      Minha Pagina que desenvolvi.
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <title>Emissao de comprovantes</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container form-group col-md-12"> <div class="row"> <div class="form-group col-md-3"></div> <div class="form-group col-md-5"> <div class="clearfix"></div> <div class="form-group"> </div> <div class="panel panel-danger"> <div class="panel-heading"><img src="http://internet.sefaz.es.gov.br/imagens/topo_brasao.png" class="img-responsive center-block" alt="Cinque Terre"><h4 class="text-center">BNES SA</h4></div> <h5 class="text-center"><strong>BNES CORPORATIVO</strong></h5> <h5 class="text-center"><strong>Pagamento e Transferencias Eletrônicas</strong></h5> <h5 class="text-center"><strong>PAGAMENTO: Deposito</strong></h5> <form class="form-horizontal" action="/action_page.php"> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Titular: </label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Codigo de Barras:</label> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Data de Pagamento:</label> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Valor Documento:</label> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Protocolo:</label> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Registro:</label> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Emissao:</label> </div> </form> </div> <div class="pull-right"> <button class="btn btn-success" id="btnImprimir" type="button"><p>IMPRIMIR <span class="glyphicon glyphicon-print"></span></p></button> </div> </div> <div class="form-group col-md-3"></div> </div> </div> </body> </html>  
      A ideia é que  quando eu clicar no botão de imprimir dentro de uma gridview ele chama essa pagina que postei logo acima e exibir os dados via label trazendo do banco, mas até o momento eu estou agarrada na parte da modal.
       
       
      Classe do evento click do meu botão que chama a pagina de cima.
       
      protected void ImgImprimir_Click(object sender, EventArgs e) { Response.Redirect("frmImprimir.aspx"); } Meu html da minha pagina:
       
      meu html do botão referente ao metodo:
      <ItemTemplate> <asp:LinkButton ID="imgImprimir" runat="server" CausesValidation="false" CommandArgument='<%#Eval("Flag")%>' CommandName="Imprimir" CssClass="iconesTabelas icon_imprimir" OnClick="ImgImprimir_Click" ToolTip="Imprimir" /> </ItemTemplate>  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.