Publicado em 27 de mai.

Duplicar div com informações em PHP

Eu estou fazendo uma tela de venda de produtos, preciso fazer um botão que duplica uma div com todas informações, mas com um detalhe, adicione +1 ao número que ela representará na array.

<div class="col-md-12 item">

 <?php echo $this->Form->input('', array('type' => 'hidden', 'value' => md5('v'.date('Y-m-d H:i:s').$this->Session->read('Auth.User.id')), 'name' => 'data[Item][0][sale_hash]')); ?>

 <div class="form-group">
 <label class="col-md-2 control-label">Produto *</label>
 <div class="col-md-5 col-xs-12">
 <div class="input-group">
 <span class="input-group-addon"><span class="fa fa-folder-open"></span></span>
 <?php
 echo $this->Form->input('', array(
 'type' => 'select',
 'label' => false, 'div' => false,
 'div' => false,
 'empty' => true,
 'options' => $products,
 'class' => 'select2 form-control',
 'name' => 'data[Item][0][product_id]'
 ));
 ?>
 </div>
 </div>

 <label class="col-md-2 control-label text-right">Valor (R$) *</label>
 <div class="col-md-3 col-xs-12">
 <div class="input-group">
 <span class="input-group-addon"><span class="fa fa-folder-open"></span></span>
 <?php echo $this->Form->input('', array('placeholder' => '0,00', 'label' => false, 'div' => false, 'class' => 'form-control', 'name' => 'data[Item][0][amount]')); ?>
 </div>
 </div>

 </div>
 </div>

Todos os 3 campos, hidden, select e text contém informações com PHP, e eu preciso que a cada div adicionada, ela acrescente +1 no número do name, ficando data['Item'][0]['campo'], data['Item'][1]['campo'], data['Item'][2]['campo'].

Existe a possibilidade de realizar isso somente com JavaScript?

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

L. Henrique· 27 de mai.

Se você já está utilizando o PHP, pra que usar o JS nesse feito?

Bem... A solução é um counter de valor 0 que deve ser somado +1 (++) para cada classe/elemento dele que existir. Segue um exemplo:

var count = 0;

$('.element').each(function() {
 count++;
});

É só usar esse exemplo, somar o count e exibí-lo com o método innerHTML, html(), text()... Vai do seu critério e necessidade.

Matheus P.· 27 de mai.

Eu não consegui pensar em um modo que ao duplicar a div no js, o próprio php fizesse algo como $i++, pois eu preciso que isso seja feito já no próprio HTML para o Controller rodar cada elemento da array ao adicionar a venda.

Eu precisava de algo nesse estilo:

Onde eu pego todos o [0] e substituo por [1] e assim por diante, pois cada classe .item tem 3 campos para serem trocados por um número acima. Estou conseguindo duplicar normalmente, mas não fica com o novo número.

 var count = 0;
 $('#duplicar').click(function(){
 var item = $( ".item" ).last();

 c = $(item).clone(true,true).appendTo(item);
 c.insertAfter(item);

 str = "[" + count + "]";
 item.replaceAll(str, count, count++);
 });

gabrieldarezzo· 29 de mai.

Cara ainda ta confuso.

Segue um exemplo de php/JQuery, seguindo sua necessidade.

<!DOCTYPE HTML>

<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<h1>Exemplos:</h1>
	<button id="btn-duplicate">Add Field</button>

	<div id="fields-php">
 <?php foreach(array(1,2,3) as $row):?>
 <input type="text" name="php_nome[<?php echo $row;?>]" /><br />
 <?php endforeach;?>
	</div>
	<br />

	<div id="fields">

	</div>

	<script src="jquery-1.10.2.js"></script>
	<script type="text/javascript">
 var count = 0;
 $( "#btn-duplicate" ).bind( "click", function() {
 $( "#fields" ).append('<input type="text" name="nome['+ count +']" />');
 count++;
 });
	</script>
</body>
</html>

William Bruno· 31 de mai.

o count é desnecessário. basta colocar name="nome[]" com os colchetes, sem nenhum número dentro.