Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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ódigocaramba, 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 }
6document 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](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/Aprender)
[https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide)
Simples não?