<?
$nome = $_POST['nome'];
$telefone = $_POST['telefone'];
$total = count($nome);
for($i = 0; $i < $total; $i++){
printf('Nome : %s <br />', $nome[$i]);
printf('Telefone : %s <br />', $telefone[$i]);
if(isset($_POST['telExtra'][$i])){
foreach($_POST['telExtra'][$i] as $value){
printf('Tel. Extra : %s <br />', $value);
}
}
echo '<br /><hr />';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function(){
//Cria uma função para Criar os campos Nome e Telefone
function createDivFields(){
/*
Criamos a variavel, e atribuimos os campos que serão criados;
Utilizamos o colchetes nos nomes do campos para informar que os dados
em forma de array;
Adiciona uma div, para que nela seja criado novos campos extras;
E um link para para chamar o evento de adicionar;
*/
var html = '<div class="items">';
html += '<label>Nome : <input type="text" name="nome[]" /></label>';
html += '<label>Telefone : <input type="text" name="telefone[]" /></label>';
html += '<a href="#" class="addTel">Add Telefone</a>';
html += '<div class="item"></div>';
html += '<div>';
return html;
}
//Cria a função para adicionar os campos extras de telefone
function createFieldTel(num){
/*
Repare que é informado que terá um parametro;
Será por ele iremos identificar de quem pertence esses campos;
*/
var tel = '<label> Telefone :';
tel += '<input type="text" name="telExtra['+num+'][]" />';
tel += '</label><br />';
return tel;
}
//cria uma função para conta os campos criados
function getTotalItems(){
//Contamos o total de campos, e diminuimos 1
//Porque o array é iniciado seu indice com 0
return $(".items".length - 1;
}
//Adiciona os nome e telefone
$("#add".click(function(){
//Adicionado no final do elemento ( #boxFields) os campos
$("#boxFields".append(createDivFields());
return false;
});
//Adiciona os campos extras
$(".addTel".live('click', function(){
/*
Utilizamos Live para atribui o evento click ao link addTel
Isso porque como criamos dinamicamente esse elemento
ele ainda não está no DOM, quando o jQuery vai executar
*/
//Chamamos o contador
var total = getTotalItems();
//Voltamos um elemento (parent);
//e depois buscamos .item, informando que precisa ser o primeiro encontrado
//Adiciona no final do elemento (.item) os novos campos
$(this).parent().children('.item:first'.append(createFieldTel(total));
return false;
});
});
});//]]>
</script>
</head>
<body>
<a href="#" id="add">Adicionar</a>
<form action="" method="post">
<div id="boxFields">
</div>
<br />
<input type="submit" value="Enviar" />
</form>
</body>
</html>
preciso que apareça o numero do campo extra na frente exemplo Tel. Extra 1 Tel. Extra 2
o erro: se eu pegar e clicar em adicionar umas 3 vezes ou 2 é so um exemplo, e depois clicar no primeiro campo que apareceu em Add Telefone umas 2 vezes tambem, depois no segundo campo em Add Telefone mais umas duas tambem, depois eu preencher todos os campos e enviar ele vai ficar com os telefones extras tudo no ultimo “adicionar”, ou seja só funciona se fizer na ordem se criar os campos antes e preencher depois os telefones extras fica tudo no final nao fica na ordem junto com os nomes e os telefones