Clonar + Transferir dados para outro Form

Front-end JavaScript
,
#1

Tenho um formulário onde preencho alguns dados e quero transferir esses dados para outro formulário após preenchimento por JS. Mas ele clona tudo direito mas não transfere os dados que eu insiro. Alguém poderia dar uma luz?

Resumo 
<div id='hidden'>
  <div class='espaco'></div>
  <div id='lista' class='row'>
    <div id='clone' class="col-md-3">
      <div class="card">
        <img src="https://www.leirispumas.com/wp-content/uploads/2021/01/Capturar-4.jpg" alt="amostra" style="width:100%">
        <div class="card-body">
          <div class='nossaRef1'>
            <h6><strong>Ref forn: </strong></h6>
            <div>
              <div class='nossaRef1'>
                <h6><strong>Ref: </strong></h6>
                <div>
                  <div class='copyLoc1'>
                    <h6><strong>Localização: </strong></h6>
                  </div>
                </div>
                <div>
                  <input class='verMais' type="button" id="verMais" value="Ver mais">
                </div>
              </div>
              <div class='espaco'></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

const copialoc = document.getElementById('copyLoc');
const copiaRefForn = document.getElementById('copyRefForn');
const copiaRefInt = document.getElementsByClassName('copyRef');

/**
 * clique no botão  +
 */
function create1() {
  duplicar('copyRefForn1', 'nossaRef1', 'copyLoc1');
}
  
let i = 0;
  
function duplicar(copyRefForn1, nossaRef1, copyLoc1) {
  const original = document.getElementById('clone');
  const clone = original.cloneNode(true); 
  clone.id = "clone" + ++i;

  clone.getElementsByClassName('copyRefForn1')[0].innertext;
  clone.getElementsByClassName('nossaRef1')[0].innertext;
  clone.getElementsByClassName('copyLoc1')[0].innertext;

  lista.appendChild(clone);
}
#2

Encontrei 2 erros:

  • Em vez de innertext, o certo é innerText
  • Nessa linha clone.getElementsByClassName('copyRefForn1')[0].innerText;, a classe css copyRefForn1 não é usada em lugar nenhum, o que causa erro na execução ao tentar acessar o índice 0 de algo que não foi encontrado.

Comentando a linha clone.getElementsByClassName('copyRefForn1')[0].innerText; e corrigindo os innerText, funcionou aqui pra mim.

1 curtida
#3

Olá @Lucas_Camara, obrigado pela sua resposta, tentei aqui e não deu certo :s

comentei essas linhas no JS para ver

// clone.getElementsByClassName(‘copyRefForn’)[0].innerText;
// clone.getElementsByClassName(‘nossaRef’)[0].innerText;
// lone.getElementsByClassName(‘copyLoc’)[0].innerText;

Coloco dados no campo Localização: / Ref. Fornecedor: / Ref. Interna: faço gravar, clona a card completa mas não transfere os dados.

Coloquei o link do codepen para ser mais fácil visualizar e trabalhar, espero que não seja contra as regras do fórum:
https://codepen.io/micke01/pen/MWvQBVx

Desde já agradeço a sua ajuda.

#6

Oi, você tem que passar o atributo value do input original para a cópia:

copiaInput.value = originalInput.value

Sendo estes dois elementos input de texto, select ou textarea.