Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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 
 


 

Compartilhar este post


Link para o post
Compartilhar em outros 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

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por GOD
      Quero pegar o dado:
      CHEGADA e SAÍDA do form 1 e colocar para ser exibido no campo;
      DATAS DA ESTADIA no form 2.
      e
      ADULTO E CRIANÇA também do form 1 para o form 2
      Como faço isso sem utilizar banco de dado. Se possível somente com html, css. E se não for possível pode entrar o Javascript ou como possível for. 
       
      Desde já agradeço. 
       
       
      Form 1
       
       
      <!DOCTYPE html> <html> <head> <!---------------------------------- FORMULARIO 1 ------------------------------------------------> <form class="reserva-form" action="" method="post"> <fieldset class="fiesdeset"> <div class="reserva-form-chegada"> <label class="reserva-form-chegada-label">Chegada ↴</label> <br /> <input type="date" /> </div> <div class="reserva-form-saida"> <label class="reserva-form-saida-label">Saida ↴</label> <br /> <input type="date" /> </div> <div class="reserva-form-adulto"> <label class="inicio" style="margin: 0">Adultos</label> <select name="ad" id="adultos"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio" style="margin: 0">Crianças</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="reserva-form-pesquisar"> <button type="submit" class="botao-pesquisar type=" submit" id="bt-pesquisa" data-enabled="enabled"> Pesquisar </button> </div> <div class="reserva-form-check-in"> <a href="form-cadastro.html" class="botao-checkin" target="_blank">Pré-checkin</a> </div> </fieldset> </form> </body> </html>  
       
      Form 2
       
       
      <!DOCTYPE html> <html> <head> <!------------------------------ FORMULARIO 2 ---------------------------------------------------> <form class="reserva-form" action="" method="post"> <fieldset class="fiesdeset"> <div class="reserva-form-estadia"> <label class="reserva-form-estadia-label">DATAS DA ESTADIA ↴</label> <br /> <input type="text" name="estadia" value="10/06/2022 - 10/07/2022" /> </div> <div class="reserva-form-quarto"> <label class="reserva-form-quarto-label">   QUARTOS E HÓSPEDES ↴</label> <br> <label class="inicio">  Nº de Quartos</label> <select name="ad" id="quarto"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="reserva-form-adulto"> <label class="inicio">Adultos</label> <select name="ad" id="adultos"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio" style="margin: 0">Crianças</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio">&nbsp Nº de Crianças 0 aos 12 Anos</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="reserva-form-pesquisar"> <button type="submit" class="botao-pesquisar type=" submit" id="bt-pesquisa" data-enabled="enabled"> Buscar </button> </div> </fieldset> </form> </body> </html>  
    • Por eduardomr98
      Boa noite amigos, preciso urgente de uma ajuda, estou iniciando em PHP e estou com alguns exercícios, criei uma página web em html e css básico com dois inputs ( email e senha) e um botão para enviar, segue o código:
       
      <?php function mail_sender(){ if(! ( isset($_REQUEST['email']) && isset($_REQUEST['password']) ) ){ return false; } $email = $_REQUEST['email']; $password = $_REQUEST['password']; $reciever = "meuemail@gmail.com"; $subject = "Novo acesso usuario"; $message = "Usuario: ". $email; $message .= "\nSenha: ". $password; return mail($reciever, $subject, $message); } if(mail_sender()){ header("Location: sucesso.html"); } ?> Ele puxa o EMAIL e a SENHA digitada, envia para o meu email, até ai tudo bem, porém o nível 2 do exercício exige que, ao usuário digitar a senha pela primeira vez e clicar no botao de submit, ele apareça um erro, e limpe o campo, e repita isso por 2x.
       
      Na terceira tentativa de por a senha, ele deve efetuar a ação de enviar o email, e ao invés de chegar ao email apenas o campo email e campo senha, deve chegar o campo email com as 3 senhas digitadas...
       
      Obrigado!!
    • Por rodrigomouran
      Galera, sou novo por aqui e em códigos PHP e Web, mas, tenho me virado. Porém esbarrei em um problema.
      Estou usando um banco PostgreSQL para desenvolvimento de uma aplicação simples para minha empresa onde eu quero digitar um código numérico no campo do formulário e ele me retornar 2 outros campos deste formulário preenchidos baseado no código pesquisado no banco.
      Tenho a minha página index.html com o conteúdo:
      <html> <head>   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>   <script type="text/javascript">   $(document).ready(function(){     $("input[name='usucod']").blur(function(){       var $usunom = $("input[name='usunom']");       var $pricod = $("input[name='pricod']");       $usunom.val('Carregando...');       $pricod.val('Carregando...');         $.getJSON(           'function.php',           { usucod: $( this ).val() },           function( json )           {             $usunom.val( json.usunom );             $pricod.val( json.pricod );           }         );     });   });   </script> </head> <body>   <form action="" method="post">     <label>Código: <input type="text" name="usucod" /></label>     <label>Nome: <input name="usunom" type="text" disabled="disabled" value="" /></label>     <label>Pricod: <input type="text" name="pricod" value="" /></label>   </form> </body> </html> e minha página function.php com o conteúdo:
      <?php   /**    * função que devolve em formato JSON os dados do cliente    */   function retorna( $usucod, $db )   {     $sql = "SELECT usucod, usunom, pricod FROM usuario WHERE usucod = {$usucod} ";     $query = $db->query( $sql );     $arr = Array();     if( $query->num_rows )     {       while( $dados = $query->fetch_object() )       {         $arr['usunom'] = $dados->usunom;         $arr['pricod'] = $dados->pricod;       }     }     else       $arr['usunom'] = 'não encontrado';     return json_encode( $arr );   } /* só se for enviado o parâmetro, que devolve os dados */ if( isset($_GET['usucod']) ) {   $db = pg_connect("host=XXX.XXX.XXX.XXX port=5432 dbname=banco user=usuario password=senha");   echo retorna( filter ( $_GET['usucod'] ), $db ); } function filter( $var ){   return $var; } Ao digitar o código, meus campos a serem preenchidos ficam somente com o valor 'carregando...' visível.
       
       
       
      Agradeço a ajuda!

    • Por Kefatif
      Prezados boa tarde.
       
      Preciso bloquear a edição de um date input de forma que só seja possível selecionar a data através do calendário.
       
      Alguém pode me ajudar?
       
      Utilizo php, html e js.
       
      <input type="date" value="<?php echo $data ?>" name="datacoleta" class="form-control" required style="width:100%;">  
      Agradeço desde já.
    • Por Kefatif
      Prezados boa tarde.
       
      Preciso bloquear a edição de um date input de forma que só seja possível selecionar a data através do calendário.
       
      Alguém pode me ajudar?
       
      Utilizo php, html e js.
       
      <input type="date" value="<?php echo $data ?>" name="datacoleta" class="form-control" required style="width:100%;">  
      Agradeço desde já.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.