Ir para conteúdo

Arquivado

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

Matheus P.

Duplicar div com informações em PHP

Por , em Javascript

Recommended Posts

Matheus P.    1

Matheus P.
Postado

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Matheus P.    1

Matheus P.
Postado

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++);
    });

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito