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 MarioQ
      Preciso passar em uma variavel o path do arquivo local a ser analisado; segue exemplo do código:
       
      $file = 'c:\temp\ScopeLogSRV.txt';
       
      Existe alguma maneira de coletar essa informação? Um input file, por exemplo?
    • By kleberaugus
      Vi na internet que para pegar o src de uma imagem se coloca o seguinte código: 
      <form action="/action_page.php">
        <input type="file" name="pic" accept="image/*">
        <input type="submit">
      </form>  
      e isso vai retornar pic="nome do arquivo", o problema é que eu não sei como usar isso com a tag <img> para escolher esse local de arquivo... como eu posso implementar isso? Eu só quero colocar uma imagem qualquer no site através do input file mas não sei como faço...
    • By Maikson
      Olá pessoal, sou novo em javascript e Jquery, podem me ajudar com o seguinte problema?
      Tenho um select com algumas opções.
      Umas dessas opções possui o valor "outro".
      Quando o usuário selecionar esta opção, preciso que apareça um campo de texto para que ele especifique e um botão "+"
      Ao preencher o campo e clicar em "+" O valor precisa ser inserido no select como uma nova option e selected.

      Segue o código:
       
      <!DOCTYPE html> <html lang="pt-Br"> <head> <meta charset="UTF-8"> <title>Select com opção de novo valor</title> <script> // Toda vez que uma opção for selecionada, teste se é "outro" // Se for, mostre o campo para que o usuário informe o novo valor // O novo valor deve ser enviado ao servidor como se fosse uma option selected neste select </script> </head> <body> <select name="grupo" id="gruposSelect" onchange="novoValor(gruposSelect, divOculta);"> <option value="">Todos</option> // Código PHP que gera opções <option value="outro">Outro</option> </select> <div id="divOculta" style="display:none;"> <input type="text" name="grupo" id="novoGrupo" /> </div> </body> </html>

      Desculpem se eu estiver violando alguma regra ou falta de clareza, este é o primeiro fórum que participo e meu primeiro post
      Obrigado
       
    • By Michael Costa
      Olá. Eu gostaria de saber se é possível passar variáveis de php para css sendo que foi colocado como nome de class as variaveis do php
    • By Remilton Silva
      <script> $(document).ready(function() { $("button").click(function(){ if ($(this).val() == '' ) { $("button").disabled=true; }else { $("button").disabled=false; } }); }); </script> Olá prezados,
       
      Estou pesquisando mas ainda não achei algo que me ajude com o cod.
      se alguém puder ajudar, será de grande valia.
       
      preciso que o button só seja ativado quando todos os inputs forem preenchidos, como faço isso em JavaScript?
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="corpo-form"> <h2>Cadastrar</h2> <input type="text" class="form-control" name="nome" placeholder="Nome Completo" maxlength="30"><br><br> <select class="form-control" name="gerencia"> <option value="Selecione uma Opção" selected>Selecione uma Opção.</option> <option value="GECOR">Vendas</option> <option value="GECON">Almoxarifado</option> <option value="GECIN">RH</option> <option value="DIRETORIA">DIRETORIA</option> </select><br><br> <input type="text" class="form-control" name="telefone" placeholder="Telefone"maxlength="30"><br><br> <input type="email" class="form-control" name="email" placeholder="E-mail" maxlength="40"><br><br> <input type="password" class="form-control" name="senha" placeholder="Senha" maxlength="15"><br><br> <input type="password" class="form-control" name="confsenha" placeholder="Confirmar Senha" maxlength="15"><br><br> <input type="button" class="btn btn-danger btn-outline-light btn-block" value="Entrar" maxlength="" required="required"> <br> </div> </body> </html>  
×

Important Information

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