Creazione dinamica righe form

  • Creatore Discussione Creatore Discussione elpirata
  • Data di inizio Data di inizio

elpirata

Utente Attivo
18 Mar 2009
264
7
18
Buonasera raga,
ho implementato nel mio piccolo programmino php una funzione javascript che all'atto del clic sul pulsante "+" genera dinamicamente una nuova riga nel mio form.

Questo il codice javascript:
Codice:
<script>
$(document).ready(function(){
var regex = /^(.*)(\d)+$/i;
var cindex = 1;
    
	$('body').on('click', '.add', function() {
	var $tr    = $(this).closest('.righe');
    var $clone = $tr.clone();
    cindex++;
    $clone.find(':text').val('');
    $clone.attr('id', 'id'+(cindex) ); 
	$clone.attr('name', 'name'+(cindex) );
    $clone.find("*").each(function() {
            var id = this.id || "";
			var name = this.name || "";
            var match = id.match(regex) || [];
            if (match.length == 3) {
                this.id = match[1] + (cindex);
				this.name = match[1] + (cindex);
            }
		if($("img .add").length < cindex){
			$('.add').addClass( 'addisable' ).removeClass( 'add' )
		}
	 		
   });
    $tr.after($clone);
    })
});

</script>

Questo l'html della riga che viene duplicata

Codice:
<tr class="righe">
<td><input name="itr1" id="itr1" class="uppercase" size="35"></td>
<td><input name="for1" id="for1" class="uppercase" size="13"></td>
<td align="center"><input name="q1" class="uppercase factor" id="q1" size="1" value=""></td>
<td align="center"><input name="iu1" class="uppercase factor" id="iu1" size="1" value=""></td>
<td><input name="imp_1" id="imp_1"class="uppercase factor" size="4" value=""></td>
<td align="center"><img src="css/img/add.png" name="add1" width="16" height="16" id="add1" class="add"></td>
</tr>

Il mio problema è che in fase di creazione della riga aggiuntiva non viene duplicata la classe factor presente nelle righe "id=q1" -"id=iu1" -"id=imp_1"

questa classe serve per richiamare lo script javascript che si occupa di effettuare il calcolo quantità*importo pertanto il calcolo funziona solo sulla prima riga e non su quelle generate dinamicamente...

Codice:
<!-- SCRIPT JS PER CALCOLO Q.TA * IMPORTO UNITARIO -->

<script type="text/javascript">
$(function(){
    $('.factor').keyup(function(){
   var t=$(this).parents('tr')
        var factors=$('.factor',t);
    $('input[name^="imp_"]',t).val(Number(factors.eq(0).val())*Number(factors.eq(1).val()));
    });
});
</script>


Calcolo_no.png

Mi dareste una mano ?
 
risolto cosi,
Codice:
<script>
$(document).ready(function(){
var regex = /^(.*)(\d)+$/i;
var cindex = 1;
    
	$('body').on('click', '.add', function() {
	var $tr    = $(this).closest('.righe');
    var $clone = $tr.clone();
    cindex++;
    $clone.find(':text').val('');
    $clone.attr('id', 'id'+(cindex) ); 
	$clone.attr('name', 'name'+(cindex) );
    $clone.find("*").each(function() {
            var id = this.id || "";
	    var name = this.name || "";
            var match = id.match(regex) || [];
            if (match.length == 3) {
                this.id = match[1] + (cindex);
				this.name = match[1] + (cindex);
            }
		if($("img .add").length < cindex){
			$('.add').addClass( 'addisable' ).removeClass( 'add' )
		}
	
   });
    $tr.after($clone);
 }).on('keyup','.somma', function(){
		SommaRiga(cindex)
	}).on('blur','.somma', function(){
		var punit = $("#iu"+cindex).val()
		if(punit!=""){ 
		$("#iu"+cindex).val((punit*1).toFixed(2))  
		}
		else{$("#iu"+cindex).val('')}
	})
});
function SommaTotale(){
}
function SommaRiga(num){
var tot =0
	var qt = $("#q"+num).val()
	var unitario = $("#iu"+num).val()
	var somma = (qt*1*unitario*1)
	if(somma>0){
		$("#imp_"+num).val(somma.toFixed(2))
	}else{
		$("#imp_"+num).val('')
		$("#iu"+num).val('')
	}
	var elem = $('input[name^="imp_"]')
	for(i=0; i<elem.length;i++) {
	tot += (elem.eq(i).val()*1)
    };
	$("#totale").val(tot.toFixed(2))
	//alert(num)
}
</script>

il problema adesso dopo la riga 10 non effettua più i calcoli :(
 

Discussioni simili