[Resolvido] Inserir campos dinamicamente e somar valores de uma c

[Linuxrs 0]

Opa salva colegas da comunidade,

 

minha duvida é a seguinte,

tenho este escript que gera novas linhas na tabela e envia por get para o arquivo php, onde irei inserir os dados no banco de dados.

estou desenvolvendo usando Codeigniter, mas não é a questão.

Gostaria de exibir a capacidade total da escola por exemplo, no campo em vermelho abaixo.

 

arquivo formulario.php

<div style="width: 800px; height: 600px;">
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
   <script type="text/javascript" src="<?php echo base_url(); ?>js/scriptaddcamposform.js"></script>
   <a id="conteudo" href="#">Cadastrar Salas</a>
   <div id="conteudo">
       <div id="titulo">
           <a href="#" id="enviar" style="color: red">Salvar Salas</a> | <a href="#" id="mais" style="color: red">Add Item</a>
       </div>
       <div style="clear:both"></div>
<!--        incio formulario-->
       <form method="get" action="<?php echo base_url(); ?>escolas/add/">
           <input type="hidden" name="id_escola" value="<?php $escola[0]->id_escola; ?>" />
           <table cellpadding="0" cellspacing="0" id="lista">
               <thead>
                   <tr>
                       <th class="cab-right">Sala</th>
                       <th class="cab-left">Complemento</th>
                       <th class="cab-left">Quantidade</th>
                   </tr>
               </thead>
               <tfoot>
                   <tr>
                       <td class="foot-left"></td>
                       <td class="foot-right">TOTAL:</td>
                       <td class="foot-right">aqui mostrar a soma da quantidade total de vagas em todas as salas</td>
                   </tr>
               </tfoot>
               <tbody>
                   <tr>
                       <td class="linha-left"><input type="text" name="item1" size="30" /></td>
                       <td class="linha-left"><input type="text" name="item1" size="30" /></td>
                       <td class="linha-right"><input type="text" name="quantidade1" size="10" /></td>
                   </tr>
               </tbody>
           </table>
           <input type="hidden" value="1" name="quantidade_itens" /> 
       </form>
<!--        formulario fim-->
       <div style="clear:both"></div>
   </div>

   <div id="resultado">
       <h3>Retorno da lista</h3>
   </div>
</div>

 

 

 

arquivo que adicona campos e envia e recebe dados via ajax.

// JavaScript Document
$(function(){

$('#mais').click(function(){

	var next = $('#lista tbody').children('tr').length + 1;

	$('#lista tbody').append('<tr>' + 
       	'<td class="linha-left"><input type="text" name="item' + next + '" size="30" /></td>' + 
           '<td class="linha-left"><input type="text" name="item' + next + '" size="30" /></td>' +
           '<td class="linha-right"><input type="text" name="quantidade' + next + '" size="10" /></td>' +
       '</tr>');

	$(':hidden').val(next);


	return false;
});

$('form').submit(function(){

	var parametros = $(this).serialize();

	$.get(
		$(this).attr('action'),
		parametros,
		function(data){
			$('#resultado').empty().append(data);
		},
		"html"
	)

	return false;

});

$('#enviar').click(function(){
	$('form').submit();
});

$(':text').live('focus',function(){
	$(this).closest('tr').addClass('input-focus');
}).live('blur',function(){
	$(this).closest('tr').removeClass();
});
});

 

 

arquivo que precessa as requisições

 

add.php

 

<?php
 $quantidade_itens = $_REQUEST['quantidade_itens'];
       //$quantidade_itens = $quantidade_itens;

       for ($x = 1; $x <= $quantidade_itens; $x++) {

           echo $item = $_REQUEST["item$x"] .'-';
           echo $quantidade = $_REQUEST["quantidade$x"].br();

           //aqui seu código com o uso dos valores capturados
       }
?>

 

se alguem puder ajudar agradeço desde ja.

[Linuxrs 0]

opa só para comunicar que resolvi o meu problema, postarei o código aqui logo mais

[Linuxrs 0]

Em Primeiro lugar, se alguém algum dia usar isso só agradecer a e demorei 2 dias pra arrumar isso e era tão ridículo mais aqui está a solução que eu encontrei, alterei um pouco o codigo html e o jquery, se alguem conseguir fazer diferente também esta valendo, compartilhe aqui.

 

aqui o fomrulario

<div style="width: 800px; height: 600px;">
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
   <script type="text/javascript" src="<?php echo base_url(); ?>js/scriptaddcamposform.js"></script>

   <a id="conteudo" href="#">Cadastrar Salas</a>
   <div id="conteudo">
       <div id="titulo">
           <a href="#" id="enviar" style="color: red">Salvar Salas</a> | <a href="#" id="add" style="color: red">Add Item</a>
       </div>
       <div style="clear:both"></div>
       <!--        incio formulario-->
       <form method="get" action="<?php echo base_url(); ?>escolas/add/">
           <fieldset>
               <input type="hidden" name="id_escola" value="<?php @$escola[0]->id_escola; ?>" />
               <label>Sala: <input type="text" name="item[]" size="30" /></label>
               <label>Complemento: <input type="text" name="complemento[]" size="30" /></label>
               <label>Qtd: <input type="text" name="quantidade[]" id="produto" size="10" /></label>
               <div id="campos"></div>
               <div id="resultado">
                   Capacidade total da escola
                   <span id="total"></span>
               </div>
               <input type="submit" name="salvar" value="Salvar" >
           </fieldset>
       </form>
       <!--        formulario fim-->
       <div style="clear:both"></div>
   </div>


</div>

 

 

aqui o jquery

$(function(){
   /**
    * Monto os campos que seram inseridos apos o campo inicio
    */
   $('#add').click(function(){
      var input =  '<div class="itens">'; 
      input += '<label>Sala: <input type="text" name="item[]" size="30" /></label>';
      input += '<label>Complemento: <input type="text" name="complemento[]" size="30" /></label>';
      input += '<label>Qtd: <input type="text" name="quantidade[]" id="produto" size="10"/></label>';
      input += '<a href="#" class="del">X</a>';
      input += '</div>';
       $('#campos').append(input);
       return false;
   });
   $('.del').live('click',function(){
      $(this).parent().remove();
      return false;
   });


   /**
    * realiza o envio e o retorno dos dados para o 
    * arquivo que calcula o valor total da capacidade 
    * da escola
    */
   $('form').live('blur', function(){		
       var parametros = $(this).serialize();		
       $.get(
           $(this).attr('action'),
           parametros,
           function(data){
               $('#total').empty().append(data);
           },
           "html"
           )		
       return false;		
   }); 
});

 

arquivo php

aqui vem o pulo do gato onde eu calculo o total

  
 public function add() {
       $total = 0;
       foreach ($_REQUEST['quantidade'] as $key => $value) {
           $total += $value;
       }
       echo $total;
       echo br();        
   }

 

 

Valeu Imasters.