Jump to content
diogoglobaltec

Input usando createElement DOM

Recommended Posts

 

 

copiei esse código do w3schooll, a dúvida é, qual nome devo usar para receber o conteúdo do input em um arquivo php ?

 

<!DOCTYPE html>
<html>
<body>

<p>Click the button to create a Text Field.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "text");
    x.setAttribute("value", "Hello World!");
    document.body.appendChild(x);
}
</script>

</body>
</html>

 

 

 

 código

Share this post


Link to post
Share on other sites

Simples não?

x.setAttribute("name", "NomeQueVoceQuiser");

 

Eu particularmente daria assim:

function myFunction() {
    var x = document.createElement('input');
    x.type = 'text';
    x.value = 'Olá mundo';
    x.name = 'name_do_input';
    document.body.appendChild(x);
}

Indiferente de como fazer o resultado da no mesmo.

Share this post


Link to post
Share on other sites

caramba, eu testei várias coisas , mas ainda não consegui entender isso... o que está errado ?

quero mandar o conteúdo do input que o usuário cria ao clicar no botão para o arquivo: "rec.php"

Obrigado, novamente !!!

 

 

 

 

 

 

<!DOCTYPE html>
  2 <html>
  3         <body>
  4 
  5                 <p>Click the button to create a Text Field.</p>
  6 
  7                 <button onclick="myFunction()">criar formulario</button>
  8 
  9 
 10                 <button onclick="enviar()">enviar</button>
 11         <script>
 12 function myFunction() {
 13             var x = document.createElement("INPUT");
 14             x.setAttribute("type", "text");
 15             x.setAttribute("value", "Hello World!");
 16             document.body.appendChild(x);
 17 
 18         
 19         
 20               
 21         var y = document.createElement("FORM");
 22 
 23         y.setAttribute("action", "rec.php");
 24         y.setAttribute("method", "post");
 25         y.setAttribute("name", "t");        
 26 
 27         document.body.appendChild(y);
 28 
 29 }
 30  
 31           function enviar(){ 
 32                    y.submit();
 33                     
 34                     
 35                     }
                                                                                

 

 

rec.php (arquivo)

 

<?php
  2 
  3 foreach ($_POST['t[]'] as $key => $value) {
  4             echo $value . "<br />";
  5 }
  6 
 


 

Share this post


Link to post
Share on other sites

document você está se referenciando ao arquivo

document.body você está se referenciado ao NodeList <body> do documento

appendChild você está inserindo dentro

 

A orientação correta seria: ELEMENTO_PAI.appendChild(ELEMENTO_FILHO)

No caso o input é filho do form

 

Em tese seria mais ou menos isso, pois fiquei no básico criando cada coisa em funções separadas para melhor entendimento:

Spoiler

<button onclick="criarFormulário();">
    Clique e crie um formulário dinâmico com javascript
</button>

<script>
    function criarFormulário() {
        var form = document.createElement('form'); // Aqui criamos um elemento DOM "form"
        form.id = 'id_do_formulario'; // Aqui digo que o elemento criado tem o #ID "id_do_formulario"
        form.method = 'POST'; // Aqui digo que o método será "post"
        form.action = 'rec.php'; // Aqui digo que a ação será executada no arquivo "rec.php"
        document.body.appendChild(form); // Aqui coloco o elemento criado na tag "<body>" do documento

        criarInput(); // Chamo a função para criar o input
    }

    function criarInput() {
        var input = document.createElement('input'); // Aqui criamos outro elemento DOM "input"
        input.type = 'text'; // Aqui digo que o elemento criado será do tipo "texto"
        input.name = 'nome_do_input'; // Aqui informo que o atributo name do input será "nome_do_input"
        input.value = 'Olá Mundo!!'; // Aqui digo que o elemento criado terá o valor de "Olá Mundo!!" (Na verdade nem precisa disso)
        document.getElementById('id_do_formulario').appendChild(input); // Aqui busco pelo #ID form criado antes e adiciono o input dentro dele

        criarSubmit(); // Chamo a função para criar um botão para validar
    }
    
    function criarSubmit() {
        var button = document.createElement('button');
        button.innerHTML = 'Salvar Formulário';
        document.getElementById('id_do_formulario').appendChild(button); 
    }
</script>

 

 

Leia a respeito de criação de elementos aqui: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

 

Não deixe de dar uma conferida nisso aqui também:

https://developer.mozilla.org/pt-BR/docs/Aprender

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Mauricio Molina
      Ola pessoal,
       
      Alguém pode me orientar?
       
      Estou com um campo textarea que esta chamando o editor CKEDITOR, pelo name="txtArtigo"
       
      Meu problema é que para enviar os dados para o banco, também usa o name="desc_imc"
       
      Deve ser algo fácil, mas sou iniciante e me perco em algumas coisas.
       
      <div role="tabpanel" class="tab-pane active" id="descricao_imc"> <div style="padding-top:20px;"> <form method="post" action="cadastrar_descricao.php"> <textarea id="desc_imc" type="text" name="txtArtigo"></textarea><br> <input class="btn btn-outline-success" type="submit" value="Cadastrar" name="button" /> <script src="ckeditor/ckeditor.js"></script> <script>CKEDITOR.replace( 'txtArtigo' );</script> </div> </div>  
    • By SilverFV
      Bom dia,
      Gostaria de pedir ajuda pois não acho nada que me ajude no que estou querendo fazer.
      Eu quero que o usuario insira um valor em um input e ao clicar em um botão ira sera inserido no formulario a quantidade de input Text igual ao valor digitado e então ele colocaria um valor em cada um desses inputs e somaria e retornaria o valor em um popup ou em uma outra parte do formulario, mas só somaria se nenhum deles estivesse vazio(essa parte da soma é a mais fácil) e caso ele coloque o valor 0 ou aperte um botão limpar os inputs inseridos seriam deletados.
       
      - Att
    • By guilhermewebber
      Olá, eu to com uma duvida para conseguir trazer um dado do banco pra uma input. Tenho o seguinte código
       
       <input class="form-control" type="text" readonly>                 <?php                 $sql2 = "select Codigo, SaldoAtual from saldo";                 $conexao2 = new Conexao2();                 $saldos = $conexao2 -> execute($sql2);                   while($saldo = $saldos ->fetch_array()) {                   echo '<option value="'.$saldo['Codigo'].'"> '.$saldo['SaldoAtual'].' </option>';                 }                 ?>                 </select>
    • By Pitag346
      Pessoal, alguem me ajuda...
       
      Como consigo fazer com que um SELECT, adicione campos ao meu formulário....
       
      Tenho um SELECT onde existe a quantidade, esse select tem de 1 a 3 .... Por padrão ele é definido como 1 ou seja 1 campo...
      Gostaria de adicionar campos conforme essa quantidade, se o select estiver com o NUMERO 2... Adiciona 2 campos, se tiver 3 ele adiciona 3 campos e se tiver 1, apenas 1 campo.
       
       
      Alguem conseguiria me ajudar ? tentei fazer com a propriedade FOR porem... ela me retorna sempre mais campos do que eu preciso realmente. Obrigado.
    • By Kefatif
      Prezados, boa tarde.
       
      Sou novo no fórum, peço desculpas caso esteja postando no local errado.
       
      Estou precisando que o edit abaixo receba apenas valores numéricos e no máximo 15 caracteres, poderiam me ajudar, por gentileza?
       
      <label style="width:14.4%">TESTE<br><input type="text" step="0.1" name="teste" class="form-control" style="width:100%"></label>  
      Já tentei diversas formas e não consegui.
       
      Obs.: Sou iniciante em programação web.
       
      Agradecido desde já pelas ajudas que estão por vir.
       
      Muito obrigado!!!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.