Generazione dinamica righe form

di il
1 risposte

Generazione dinamica righe form

Un saluto a tutti gli utenti di programmatori.it, questo è il mio primo post e spero di essere degno utente del forum.

vi spiego brevemente il mio problema,
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.

<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

<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...

<!-- 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>


Mi dareste una mano a capire dove sbaglio ?

1 Risposte

  • Re: Generazione dinamica righe form

    Risolto cosi
    
    <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
    e non so come impostare il limite massimo di 15 righe,
    se l'utente prova a generare la 16^ deve essergli mostrato un alert "raggiunto limite massimo di righe"
Devi accedere o registrarti per scrivere nel forum
1 risposte