Adicionando campos em html esse campos não estão puxando dados do banco

[Jefferson Santos]

Olá,

Estou tendo muita dificuldade em dar continuidade nesse processo. Ao criar uma function para adicionar campos, os campos adicionados não estão puxando dados do banco de dados. O que preciso fazer para que traga essas informações? 

var controleCampo = 1;
function adicionarCampo(){
    controleCampo++;
    document.getElementById('formulario').insertAdjacentHTML('beforeend', '<br><br><div id="formulário"><Label>Tipo de Documento</Label><select name="tipos_documentos" id="tipos_documentos"><option value="">Selecione</option></select><label>Digitaliza:</label><label>SIM</label><input type="radio" name="1" id="sim'+ controleCampo +'"><label>NÃO</label><input type="radio" name="1" id="não'+ controleCampo +'"><label>Data do Documento:</label><input type="date" name="data_documento'+ controleCampo +'" id="data_documento"><br><label>Código Externo da Caixa:</label><input type="text" name="codigo_cx_externo" id="codigo_cx_externo'+
    controleCampo +'" placeholder="Código Externo"><form enctype="multipart/form-data" action=""><label for="">Upload dos Arquivos:</label><input type="file" name="imagem1" id="imagem'+ controleCampo +'"></form></div>')
}

[lowys]

Já experimentou usar template strings, passando as variáveis que vieram do database?

 

[Frank K Hosaka]

Eu ainda não sei como trabalhar com banco de dados no JavaScript, mas para testar o seu código, eu tive que mudar o id do primeiro elemento. Ao invés de "formulario", eu chamei de "form".

Essa função cria uma div com id=formulario, logo, não faz sentido ele procurar um elemento que ainda não existe. O meu código ficou assim:

<script>
var controleCampo = 1;
function adicionarCampo(){
    controleCampo++;
    document.getElementById('form').insertAdjacentHTML('beforeend', '<br><br>'+
    '<div id="formulário"><Label>Tipo de Documento</Label>'+
    '<select name="tipos_documentos" id="tipos_documentos">'+
    '<option value="">Selecione</option></select><label>Digitaliza:</label>'+
    '<label>SIM</label><input type="radio" name="1" id="sim'+ 
    controleCampo +
    '"><label>NÃO</label><input type="radio" name="1" id="não'+ 
    controleCampo +
    '"><label>Data do Documento:</label><input type="date" name="data_documento'+ 
    controleCampo +
    '" id="data_documento"><br><label>Código Externo da Caixa:</label>'+
    '<input type="text" name="codigo_cx_externo" id="codigo_cx_externo'+
    controleCampo +
    '" placeholder="Código Externo"><form enctype="multipart/form-data" action="">'+
    '<label for="">Upload dos Arquivos:</label>'+
    '<input type="file" name="imagem1" id="imagem'+ 
    controleCampo +
    '"></form></div>')
}
</script>
<spam id=form></spam>
<script>adicionarCampo()</script>

Editado Janeiro 4, 2023 por Frank K Hosaka

[Frank K Hosaka]

 

Agora, estudando o código JavaScript com mais calma, dá para perceber que a variável controleCampo foi intercalado em locais totalmente inesperados. Não é de admirar que o campo não aparece. Eu tirei o contador do controleCampo, eu defini como uma string ' ???? ', e coloquei nos locais mais adequados para ele ser visível:

<script>
var controleCampo = ' ???? ';
function adicionarCampo(){
    document.getElementById('form').insertAdjacentHTML('beforeend', '<p>'+
    '<div id="formulário"><Label>Tipo de Documento</Label>'+
    '<select name="tipos_documentos" id="tipos_documentos">'+
    '<option value="">Selecione</option></select><p>'+
    '<label>Digitaliza:</label>'+
    '<label>SIM</label><input type="radio" name="1" id="sim">' +
    controleCampo +
    '<label>NÃO</label><input type="radio" name="1" id="não">'+ 
    controleCampo +
    '<p><label>Data do Documento:</label>'+
    '<input type="date" name="data_documento" id="data_documento">'+
    controleCampo +
    '<p><label>Código Externo da Caixa:</label>'+
    '<input type="text" name="codigo_cx_externo" ' +
            'id="codigo_cx_externo" placeholder="Código Externo">'+
    controleCampo +
    '<form enctype="multipart/form-data" action="">'+
    '<label for="">Upload dos Arquivos:</label>'+
    '<input type="file" name="imagem1" id="imagem">'+
    controleCampo +
    '</form></div>')
}
</script>
<spam id=form></spam>
<script>adicionarCampo()</script>

Editado Janeiro 4, 2023 por Frank K Hosaka

[Frank K Hosaka]

O único jeito que eu encontrei de colocar o banco de dados no HTML foi através do PHP. Usando o seu código, consegui montar algo semelhante (note que não há nenhum código JavaScript):

<?php
if(isset($_GET['tipoDocumento'])){
    echo $tipoDoc=$_GET['tipoDocumento'];
    echo $dig=$_GET['digitaliza'] ?? null;
    echo $data=$_GET['data_documento'];
    echo $codigo=$_GET['codigo_externo'];
    echo $arquivo=$_GET['arquivo'];
    $mysqli=new mysqli("localhost","root","","astudy");
    $query=$mysqli("inserto into tbteste (tipoDoc,dig,data,codigo,arquivo)
        values ($tipoDoc,$dig,$data,$codigo,$arquivo)");}
?>

<!DOCTYPE html>
<html lang=en>
<meta charset=UTF-8>
<meta http-equiv=X-UA-Compatible content=IE=edge />
<meta name=viewport content="width=device-width, initial-scale=1.0">
<title>projeto php</title>
<form>
Tipo de Documento
<select name=tipoDocumento>
    <option value="">Selecione
    <option value=CNPJ>CNPJ
    <option value=CPF>CPF
</select>
<p>
Digitaliza:
SIM<input type=radio name=digitaliza value=digitaliza>
NÃO<input type=radio name=digitaliza value='não digitaliza'>
<p>
Data do Documento:
<input type=date name=data_documento>
<p>
Código Externo da Caixa:
<input name=codigo_externo>
<p>
Selecione arquivo:
<input type=file name=arquivo>
<p>
<input type=submit>
</form>

 

Editado Janeiro 4, 2023 por Frank K Hosaka