Ajuda com Javascript - recuperar valores gerados por loops

[Cláudio Rogério Jr 0]

Olá muito bom dia a todos, sou principiante com javascript se meu código estiver errado me corrijam por favor. Minha dúvida é o seguinte estou fazendo um sistema web que a pessoa escolhe através de um combobox a quantidade de campos que ela ira gerar, cujo campos são para a inserção de textos até aqui consegui fazer funcionar normalmente (não sei se fiz da forma correta, porém esta funcionando) minha dúvida é saber como posso pegar os textos que foram inseridos em cada textbox, sendo que os campos foram gerados por meio de um loop (for). Segue o código (javascript):

 

function gerar()
 
{
    var qntMaquinas = document.getElementById("qntdm").options[document.getElementById("qntdm").selectedIndex].text;
    var nodeElement = document.getElementById(''gerarM'');
 
    for (var i = 0; i < qntMaquinas-1; i++) {
          
        var clone = nodeElement.cloneNode(true); 
        var campo =  document.body.appendChild(clone)[i];
    }
 
                         
}
 
function limpar()
 
{
    window.location.reload()
                         
}

 

[tetsuo 0]

Olá!
Se quiser pegar os valores preenchidos nos inputs com uma linguagem server side, use array no name dos inputs assim:
 

<input type='text' name='entradas[]'>

 

[Cláudio Rogério Jr 0]

8 horas atrás, tetsuo disse:

Olá!
Se quiser pegar os valores preenchidos nos inputs com uma linguagem server side, use array no name dos inputs assim:
 

<input type='text' name='entradas[]'>

 

Obrigado amigo, um bom dia !!

[Cláudio Rogério Jr 0]

10 horas atrás, tetsuo disse:

Olá!
Se quiser pegar os valores preenchidos nos inputs com uma linguagem server side, use array no name dos inputs assim:
 

<input type='text' name='entradas[]'>

 

Se não for pedir muito, será que você poderia me dar um exemplo de como pegar este valor ?

[tetsuo 0]

Ex. com php, para quando submeter o form usando post method:
 

<?php

if(isset($_POST['entradas'])){
  echo '<pre>';
  print_r($_POST['entradas']);
  echo '</pre>';
}

 

[Cláudio Rogério Jr 0]

Eu tentei fazer um pouco diferente na verdade deixa eu te explicar o que quero fazer ai se você puder já me dar um norte pra onde seguir agradeço muito, porque estou bem perdido. Seguinte, eu tenho um campo no caso um combobox com as opções de 1 a 40 o usuario vai selecionar um numero por exemplo 10 na hora que ele clicar em gerar vai gerar 10 textbox um embaixo do outro pra ele colocar alguns textos, depois que ele inserir os textos nos 10 campos irá clicar em um botão concluir que ira gravar estes valores inseridos. Será que você pode me falar o que e como vou desenvolver isso usando Javascript ? Da maneira que fiz abaixo, no console gera tudo certinho os campos (textbox) porém na tela do navegador não exibe nada, porque? desde já meu muito obrigado !

function gerar()

{
	 var selectqntm = document.getElementById("qntdm");

	 for (var i = 0; i < selectqntm.value; i++) {
	 	var input = document.createElement("input");
		input.setAttribute('type', 'text');
		console.log (input)
	 }

}

 

[Omar~ 87]

Olá @Cláudio Rogério Jr tudo bem?

 

Eu havia visto seu tópico antes, mas não deu para sacar o que estava querendo fazer, uma vez que o primeiro código postado não tinha nada haver com o que tinha dito anteriormente.

Agora com as informações mais coesas posso responder...

Enfim, sobre a questão de gerar inputs através de um select group eu mesmo já ajudei numa questão dessa:

https://forum.imasters.com.br/topic/580084-abrir-novo-campo-ao-selecionar-opcao/?tab=comments#comment-2272163

 

 

5 horas atrás, Cláudio Rogério Jr disse:

porém na tela do navegador não exibe nada, porque?

No próprio post você vai achar a solução para isso, uma vez que você criou os elementos, mas não anexou eles (Eles existem só que pertencem só ao objeto document e não a algum elemento node):

 

 

5 horas atrás, Cláudio Rogério Jr disse:

depois que ele inserir os textos nos 10 campos irá clicar em um botão concluir que ira gravar estes valores inseridos

Deduzo, que você está falando de um formulário, então siga a lógica e coloque os elementos criados dentro de um form, ao qual você vai submeter os dados.

[Cláudio Rogério Jr 0]

Opa amigo muito obrigado pela ajuda, tendo seu código de base consegui desenvolver o meu. só estou com problemas no loop mesmo que está gerando apenas 1 textbox ao inves de gerar o valor que foi definido no combobox. Acredito que esse seja um problema menor. Mais uma vez meu muito obrigado! 

[Cláudio Rogério Jr 0]

Cara seguinte, a questão do loop e de gerar os campos já ta funcionando, tudo ok!

Minha outra dúvida,( só não crio em outro tópico pois se trata do mesmo assunto. ) como pego os valores dos campos que foram criados ? estou tentando pegar eles através de um loop porém só retorna o ultimo campo. Estou usando array pois futuramente se eu precisar me referir a um certo campo eu possa usar 'array_maquinas[indice] da maquina, espero que minha linha de raciocínio esteja correta. Enfim segue o código:

 

function concluir() {

		var array_maquinas = [];
		for (var i = 0; i < identificador; i++) {
		 	array_maquinas = novo.name;
		 	console.log(array_maquinas);
		 } 
	  	
		
	}

 

[Omar~ 87]

Aqui temos a criação de uma array

var array_maquinas = [];

Porém aqui "array_maquinas" é rescrita como variável

array_maquinas = novo.name;

O que acontece é que a cada volta do loop a variável é definida com novo valor, ao final só vai ser o último valor atribuído;

Na pática seria

array_maquinas = 'Primeiro valor';

array_maquinas = 'Segundo valor que substitui o primeiro'; // Além que isso é erro de código

 

3 horas atrás, Cláudio Rogério Jr disse:

como pego os valores dos campos que foram criados ?

Mas se são input text, eles não tem valores quando criados, terão somente depois que algo é inserido neles.

 

De qualquer forma não vejo motivo para obter-los/identificar-los quando são criados, mas sim é possível e simples executar essa ação.

Você deve isolar a responsabilidade de cada coisa no código, uma é criar outra é identificar.

Como assim?

De criar então nós já sabemos não é... Então o que deve-se ser feito é detectar quando o loop termina, nesse caso a melhor opção é o while. Então quando o loop parar chamamos outra função que irá capturar os elementos (DEPOIS QUE JÁ FORAM CRIADOS).

Aí entra o "X" da questão, o que fazer com esses dados? Qual seria a finalidade de ter-los agora?

 

Podemos obter elementos de diversas formas, se fosse eu optaria quando criar cada elemento adicionar uma class CSS ao elemento, assim sendo basta buscar por elementos que tenha essa class.

 

#EDIT:

Sobre o lance do array

var loop = 5;
var array_maquinas = [];
for (var i = 0; i < loop; i++) {
    array_maquinas[i] = 'Alguma coisa';
    console.log(array_maquinas);
}

 

Sobre detectar voltas de loop ou até mesmo manipular

var parar_no_tres = false; // Coloque "true" e o loop é parado na volta 3
    
var loop = 5;
while (loop != 0) {
    loop--; //Retimanos 1 da variável a cada volta do loop
    console.log('Volta atual:' + loop);
    if (parar_no_tres && loop == 3) {
        console.log('Ops! Paramos na volta 3');
        break;
    }
}
if (loop == 0) {
    console.log('Terminou');
}

 

[Cláudio Rogério Jr 0]

Deixa eu te dar mais detalhes sobre o sistema que eu estou a desenvolver. É o seguinte o usuário vai ter essa parte de selecionar a quantidade de campos que sera gerado e depois que gerar ele vai colocar nome das maquinas que estão em sua empresa exemplo Fiscal-1, Pessoal-3, Contábil-1 e depois que colocar esses nomes clicara em um botão para armazenar estes nomes, pode ser em variáveis mesmo não quero me envolver com banco de dados para que o sistema fique bem simples. Depois que armazenar estes nomes preciso que o sistema crie em uma outra página web, um combobox com todos os nomes das maquinas que foram cadastrados na primeira página. Nessa nova página terá uma lista com varias opções que no caso estou usando o checkbox, e o usuário selecionaria as opções que gostaria que fossem aplicadas em cada maquina, por exemplo seleciono 5 checkbox, e embaixo do checkbox vai ter um combobox que listaria os nomes das maquinas ai o usuario teria que clicar nas maquinas que ele queria indicar essas opções e conforme ele fosse clicando nas maquinas o nome delas seriam exibido em uma label do lado para ele saber em quais maquinas está aplicando. E no final de tudo isso gerar um relatório seja em pdf ou em docx tanto faz, exibindo quais opções (checkbox) foram selecionadas e quais maquinas (combobox) foram selecionadas, basicamente é isto espero que tenha entendido o meu projeto, sei que não é nada fácil porém já tenho um pouco de experiencia com programação só que estou tendo meu primeiro contato com javascript agora por isso estou tendo tantas dúvidas, espero que me compreenda e se puder me dar um norte fico muito agradecido. De qualquer forma obrigado pela atenção! Abraços.

[Omar~ 87]

Bem, como eu pensei, não havia necessidade de obter dados dos elementos gerados em sua criação.

Em 09/11/2018 at 10:34, Cláudio Rogério Jr disse:

não quero me envolver com banco de dados

Também seria desnecessário, uma vez que serão dados temporários sem utilidade a longo prazo.

 

Acontece aqui que temos de passar os valores de cada input para outra página, podemos usar um form, que ao submeter leva os dados para a próxima questão. Ao qual saímos de javascript e passamos para linguagem do servidor no caso do meu exemplo o PHP.

Efim, o conceito final da aplicação deixo a cargo de você, hora que só vou mostrar um coisa simples de criar os inputs, ao quais não sei quantos serão selecionados pelo usuário, ao ele enviar devo criar novos dados para para cada input que ele gerou.

De qualquer forma só conseguiria fazer se tivesse em mão ou pleno conhecimento do resultado final, por isso passo a bola para você e só vou mostrar o que fazer com os dados.

 

Nesse caso geramos os inputs e enviamos a outro arquivo e vemos o que chegou...

Spoiler

<select id="seletor">
    <option value="1">Criar 1 input</option>
    <option value="2">Criar 2 input</option>
    <option value="3">Criar 3 input</option>
</select>
<form id="formulario" method="post" action="outro_arquivo.php" target="_blank" style="display: none">
    <div class="colocar_input"></div>
    <button>Enviar</button>
</form>

<script>
    var seletor = document.getElementById('seletor');
    var form = document.getElementById('formulario');
    var colocar = form.getElementsByClassName('colocar_input')[0];
    var novo;
    var quantidade = 0;

    seletor.addEventListener('change', criarInputs, false);

    function criarInputs(e) {
        colocar.innerHTML = null; // Limpar os inputs caso o seletor seja alterado
        loop = (e.target).value;
        while (loop != 0) {
            loop--;
            novo = document.createElement('input');
            novo.type = 'text';
            novo.name = 'input_inserido[]';
            colocar.appendChild(novo);
        }
        form.style.display = 'block';
    }
</script>

 

 

Então esse é o arquivo PHP que enviei os dados

<?php
$post = filter_input_array(INPUT_POST, FILTER_DEFAULT);

echo ("Recebeu como POST <pre>");
var_dump($post);
echo ("</pre>");

$quantidade = count($post['input_inserido']);

echo ("A quantidade de índices na array \"input_inserido\" é  de {$quantidade} entradas<hr />");

foreach ($post['input_inserido'] as $value) {
    echo ("<p>{$value}</p>"); // Aqui você faz o que quiser com os valores
}

 

 

Veja o que consegue fazer aí, qualquer coisa crie um tópico na sessão de PHP, talvez mais alguém possa lhe orientar melhor.

[Cláudio Rogério Jr 0]

Em 11/11/2018 at 02:01, Omar~ disse:

Bem, como eu pensei, não havia necessidade de obter dados dos elementos gerados em sua criação.

Também seria desnecessário, uma vez que serão dados temporários sem utilidade a longo prazo.

 

Acontece aqui que temos de passar os valores de cada input para outra página, podemos usar um form, que ao submeter leva os dados para a próxima questão. Ao qual saímos de javascript e passamos para linguagem do servidor no caso do meu exemplo o PHP.

Efim, o conceito final da aplicação deixo a cargo de você, hora que só vou mostrar um coisa simples de criar os inputs, ao quais não sei quantos serão selecionados pelo usuário, ao ele enviar devo criar novos dados para para cada input que ele gerou.

De qualquer forma só conseguiria fazer se tivesse em mão ou pleno conhecimento do resultado final, por isso passo a bola para você e só vou mostrar o que fazer com os dados.

 

Nesse caso geramos os inputs e enviamos a outro arquivo e vemos o que chegou...

  Ocultar conteúdo

<select id="seletor">
    <option value="1">Criar 1 input</option>
    <option value="2">Criar 2 input</option>
    <option value="3">Criar 3 input</option>
</select>
<form id="formulario" method="post" action="outro_arquivo.php" target="_blank" style="display: none">
    <div class="colocar_input"></div>
    <button>Enviar</button>
</form>

<script>
    var seletor = document.getElementById('seletor');
    var form = document.getElementById('formulario');
    var colocar = form.getElementsByClassName('colocar_input')[0];
    var novo;
    var quantidade = 0;

    seletor.addEventListener('change', criarInputs, false);

    function criarInputs(e) {
        colocar.innerHTML = null; // Limpar os inputs caso o seletor seja alterado
        loop = (e.target).value;
        while (loop != 0) {
            loop--;
            novo = document.createElement('input');
            novo.type = 'text';
            novo.name = 'input_inserido[]';
            colocar.appendChild(novo);
        }
        form.style.display = 'block';
    }
</script>

 

 

Então esse é o arquivo PHP que enviei os dados

<?php
$post = filter_input_array(INPUT_POST, FILTER_DEFAULT);

echo ("Recebeu como POST <pre>");
var_dump($post);
echo ("</pre>");

$quantidade = count($post['input_inserido']);

echo ("A quantidade de índices na array \"input_inserido\" é  de {$quantidade} entradas<hr />");

foreach ($post['input_inserido'] as $value) {
    echo ("<p>{$value}</p>"); // Aqui você faz o que quiser com os valores
}

 

 

Veja o que consegue fazer aí, qualquer coisa crie um tópico na sessão de PHP, talvez mais alguém possa lhe orientar melhor.

 

Muito obrigado amigo, muito boa a explicação já deu pra ter uma boa noção do que vou precisar. Bom, vou ver o que consigo fazer, Abraços !!