[Javascript] Funzioni su input dinamici

vasomik · 14 Mar 2017

Ciao,

ho il seguente problema.
Ho un form nel quale creo dinamicamente , alla pressione di un bottone, delle input text o select nelle quali devo mettere delle funzioni molto semplici, somme o moltiplicazioni, roba così.
Le righe posso essere in numero variabile, posso averne 1 come 3 o più, ed il loro nome è, ad esempio, nomeinput[].
Per fare un esempio sulla stessa riga ho una select dalla quale scegliendo una voce, in automatico, tramite una funzione nell'evento onchange, dovrebbe riportarmi un numero relativo alla voce scelta nella text a fianco.
Se le righe sono n ho la necessità di fare lo stesso per ogni riga aggiunta.

Sapete aiutarmi?

vasomik

criric · 15 Mar 2017

Ciao, posta un po di codice magari si riesce a capire meglio

vasomik · 15 Mar 2017

Con questo codice (che non ho scritto io) creo dinamicamente gli oggetti:

Codice:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var max_fields      = 200;
    var wrapper         = $(".container1");
    var add_button      = $(".add_form_field");
 
    var x = 1;
    $(add_button).click(function(e){
        e.preventDefault();
        if(x < max_fields){
            x++;
            $(wrapper).append('<div>DataPart. <input type="text" name="mydata[]" size="10" maxlength="10"> Km <input type="text" name="Km[]" size="5" maxlength="5"> Importo carburante<input type="text" name="carburante[]"> Totale<input type="text" name="totale[]"><a href="#" class="delete">Cancella</a></div>'); //add input box
        }
  else
  {
  alert('You Reached the limits')
  }
    });
 
    $(wrapper).on("click",".delete", function(e){
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
</script>

questo è il codice html che si trova all'interno del form:

Codice:

<div class="container1">
   <button class="add_form_field">Aggiungi Riga &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span></button>
   <div>Km <input type="text" name="Km[]" size="10" maxlength="10"> Importo carburante <input type="text" name="carburante[]" size="5" maxlength="5"> Totale <input type="text" name="totale[]"</div>
</div>

Spero sia sufficiente.
In pratica di default c'è una sola riga ed al click del pulsante si aggiungono righe. In ogni riga, inserendo il numero di km e il costo del carburante voglio ottenere, con una semplicissima funzione, il totale nell'apposita text.
Non sono pratico (ho limitate conoscenze) ne di javascript ne di jQuery, io speravo di poter inserire onchange="funzione()" nel codice di creazione delle text, invece non è così!!

vasomik

criric · 15 Mar 2017

si che puoi, onchange="funzione(this)" e passi alla funzione l'elemento. Posta anche l'onchange e la funzione così vediamo perchè non funziona.

vasomik · 15 Mar 2017

Nel messaggio sopra i nomi delle text della funzione sono differenti da quelli del codice html, ho solo dimenticato di cambiarli quando ho postato, sul mio file sono identici.

vasomik · 15 Mar 2017

Allora, questa è la funzione che calcola

Codice:

function IndennitaKm(){
    var Km = document.getElementById('Km').value;
    var CostoCarburante = document.getElementById('carburante').value;
   
    document.getElementById('totale').value = Km * (Carburante / 5);
   
}

questa è la funzione aggiunge le righe con le text (già postata prima ma corretta)

Codice:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
   var max_fields      = 200;
   var wrapper         = $(".container1");
   var add_button      = $(".add_form_field");

   var x = 1;
   $(add_button).click(function(e){
       e.preventDefault();
       if(x < max_fields){
           x++;
           $(wrapper).append('<div>Km. <input type="text" name="Km[]" Id="Km" size="10" maxlength="10" onchange="IndennitaKm"> Importo Carburante <input type="text" name="carburante[]" Id="carburante" size="5" maxlength="5"  onchange="indennitaKm">  Totale<input type="text" name="totale[]"><a href="#" class="delete">Cancella</a></div>'); //add input box
       }
  else
  {
  alert('You Reached the limits')
  }
   });

   $(wrapper).on("click",".delete", function(e){
       e.preventDefault(); $(this).parent('div').remove(); x--;
   })
});
</script>

Questo è il codice html (anche questo già postato)

Codice:

<div class="container1">
   <button class="add_form_field">Aggiungi Riga &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span></button>
   <div>Km <input type="text" name="Km[]" Id="Km" size="10" maxlength="10" onchange="Indennitakm"> Importo carburante <input type="text" name="carburante[]" Id="carburante" size="5" maxlength="5" onchange="Indennitakm"> Totale <input type="text" name="totale[]"</div>
</div>

criric · 15 Mar 2017

prima due osservazioni :
- non puoi dare lo stesso id a più di un elemento html quindi Id="carburante" non va bene perchè lo assegni per ogni riga creata ti conviene toglierlo direttamente
- per richiamare una funzione devi rispettare maiuscole e minuscole e usare le parentesi la sintassi corretta è onchange="IndennitaKm(this)"
this ti serve nella funzione per riferirti all'elemento, lo recuperi nel parametro

Codice:

function IndennitaKm(elemento) {
          alert(elemento.value)
}

vasomik · 15 Mar 2017

Giusto, sull'Id sono colpevole, sapevo questa cosa, d'altronde si chiama Identificativo, grazie per la puntualizzazione.
Ma all'interno della funzione IndennitaKm, uso getElementById per recuperare i valori contenuti nelle text , togliendo l'Id come recupero il valore delle varie text?

criric · 15 Mar 2017

come dicevo, se passi come parametro "this", nella funzione avrai a disposizione l'oggetto che si riferisce all'elemeto input

vasomik · 15 Mar 2017

Mi manca qualcosa, come recupero i valori degli altri elementi con i quali effettuare il calcolo (carburante e il totale nel quale devo scrivere)? This si riferisce solo all'oggetto in cui mi trovo (ad esempio se sto agendo nella text relativa ai Km this mi prende il suo valore)?

criric · 15 Mar 2017

questa è una bella domanda.
Potresti recuperare il div contenitore con la funzione .parent() o .closest() di jquery e con la funzione .children() sempre di jqeury recuperi tutti i suoi elementi.

vasomik · 15 Mar 2017

Provo a fare come dici, sperando di capirci qualcosa, in caso contrario ti disturberò nuovamente.
Per il momento ti ringrazio.

vasomik

criric · 15 Mar 2017

una bozza scritta al volo

HTML:

<script>
    function IndennitaKm(elemento) {
        var div = $(elemento).closest("div");
        var inputs = $(div).children("input");
        var Km = inputs[0].value;
        var CostoCarburante = inputs[1].value;
        inputs[2].value = Km * (CostoCarburante / 5);
    }
</script>
<div class="container1">
    <div>
        Km <input type="text" onchange="IndennitaKm(this)" name="Km[]" size="10" maxlength="10">
        Importo carburante <input type="text" onchange="IndennitaKm(this)" name="carburante[]" size="5" maxlength="5">
        Totale <input type="text" name="totale[]"/>
    </div>
</div>

vasomik · 15 Mar 2017

Leggendola cosi sembra chiarissima, provo ad applicarla!
Grazie

vasomik · 15 Mar 2017

Ciao, grazie del codice , l'ho provato e funziona soltanto sulla prima riga statica della pagina e appena provo ad aggiungere una seconda riga di input il codice non funziona più nemmeno sulla prima riga. Sembrerebbe che il codice, una volta aggiunta una riga, non riesca più ad individuare il div che contiene gli input passati tramite this.

Codice:

<script>
   function IndennitaKm(elemento) {
       var div = $(elemento).closest("div");
       var inputs = $(div).children("input");
       var Km = inputs[0].value;
       var CostoCarburante = inputs[1].value;
       inputs[2].value = Km * (CostoCarburante / 5);
   }
</script>
<div class="container1">
   <div>
       Km <input type="text" onchange="IndennitaKm(this)" name="Km[]" size="10" maxlength="10">
       Importo carburante <input type="text" onchange="IndennitaKm(this)" name="carburante[]" size="5" maxlength="5">
       Totale <input type="text" name="totale[]"/>
   </div>
</div>

criric · 15 Mar 2017

devi aver sbagliato qualcosa nella creazione della riga, posta con la modifica
il codice funziona anche su piu righe

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    function IndennitaKm(elemento) {
        var div = $(elemento).closest("div");
        var inputs = $(div).children("input");
        var Km = inputs[0].value;
        var CostoCarburante = inputs[1].value;
        inputs[2].value = Km * (CostoCarburante / 5);
    }
</script>
<div class="container1">
    <div>
        Km <input type="text" onchange="IndennitaKm(this)" name="Km[]" size="10" maxlength="10">
        Importo carburante <input type="text" onchange="IndennitaKm(this)" name="carburante[]" size="5" maxlength="5">
        Totale <input type="text" name="totale[]"/>
    </div>
    <div>
        Km <input type="text" onchange="IndennitaKm(this)" name="Km[]" size="10" maxlength="10">
        Importo carburante <input type="text" onchange="IndennitaKm(this)" name="carburante[]" size="5" maxlength="5">
        Totale <input type="text" name="totale[]"/>
    </div>
    <div>
        Km <input type="text" onchange="IndennitaKm(this)" name="Km[]" size="10" maxlength="10">
        Importo carburante <input type="text" onchange="IndennitaKm(this)" name="carburante[]" size="5" maxlength="5">
        Totale <input type="text" name="totale[]"/>
    </div>
</div>

criric · 15 Mar 2017

testato, ti confermo che funziona

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var max_fields = 200;
        var wrapper = $(".container1");
        var add_button = $(".add_form_field");
        var x = 1;
        $(add_button).click(function (e) {
            e.preventDefault();
            if (x < max_fields) {
                x++;
                var output = "<div>";
                output += "Km <input type='text' onchange='IndennitaKm(this)' name='mydata[]' size='10' maxlength='10'>";
                output += "Importo carburante <input type='text' onchange='IndennitaKm(this)' name='carburante[]'>";
                output += "Totale <input type='text' name='totale[]'>";
                output += " <a href='#' class='delete'>Cancella</a>";
                output += "</div>";
                $(wrapper).append(output); //add input box
            } else {
                alert('You Reached the limits')
            }
        });
        $(wrapper).on("click", ".delete", function (e) {
            e.preventDefault();
            $(this).parent('div').remove();
            x--;
        });
    });
    function IndennitaKm(elemento) {
        var div = $(elemento).closest("div");
        var inputs = $(div).children("input");
        var Km = inputs[0].value;
        var CostoCarburante = inputs[1].value;
        inputs[2].value = Km * (CostoCarburante / 5);
    }
</script>
<div class="container1">
    <button class="add_form_field">Aggiungi Riga &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span></button>
    <div>
        Km <input type="text" onchange="IndennitaKm(this)" name="Km[]" size="10" maxlength="10">
        Importo carburante <input type="text" onchange="IndennitaKm(this)" name="carburante[]" size="5" maxlength="5">
        Totale <input type="text" name="totale[]"/>
    </div>
</div>

vasomik · 15 Mar 2017

Ciao,

ecco qui la funzione che crea la riga (che come puoi notare ha nomi delle text differenti e ho aggiunto una select, che dovrei gestire)

Codice:

$(document).ready(function() {

    var max_fields      = 200;

    var wrapper         = $(".containerRimborsi");

    var add_button      = $(".add_form_field_rimborsi");

 

    var x = 1;

    $(add_button).click(function(e){

        e.preventDefault();

        if(x < max_fields){

            x++;

            $(wrapper).append('<div><select name="RimborsoBiglietti" onchange="RimborsoBiglietti(this)"><option value="Treno">Treno 10%</option><option value="Nave">Nave 10%</option><option value="Aereo">Aereo 5%</option><option value="Autolinea">Autolinea 0%</option><option value="Metro">Metro 0%</option><option value="Taxi">Taxi 0%</option><option value="MPA">Mezzo Proprio Aut.</option><option value="MPNA">Mezzo Proprio NA</option><option value="EccedenzaBagablio">Eccedenza bagaglio 0%</option><option value="Altro">Altro 0%</option></select>&nbsp;&nbsp;<input type="text" name="PercRimborso[]" size="3" maxlength="3" onchange="RimborsoBiglietti(this)"> % Importo <input type="text" name="ImportoBiglietto[]" size="7" > € Spettanza (Importo + %) <input type="text" name="RimborsoSpettante[]" size="7" > € <a href="#" class="delete">Cancella</a></div>'); //add input box

        }

  else

  {

  alert('You Reached the limits')

  }

    });

    $(wrapper).on("click",".delete", function(e){

        e.preventDefault(); $(this).parent('div').remove(); x--;

    })

});

questa è la function che mi ha passato

Codice:

function RimborsoBiglietti(elemento) {

        var div = $(elemento).closest("div");

        var inputs = $(div).children("input");

        var Km = inputs[0].value;

        var CostoCarburante = inputs[1].value;

        inputs[2].value = Km * (CostoCarburante / 5);

    }

e per finire il codice html (tutto questo è all'interno di un ulteriore div)

Codice:

<h2>Rimborso Biglietti</h2>

<div class="containerRimborsi">

<button class="add_form_field_rimborsi">Aggiungi Riga &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span></button>

<div>

<select name="MezzoDaRimborsare[]" onchange="RimborsoBiglietti(this)">

  <option value="Treno">Treno 10%</option>

  <option value="Nave">Nave 10%</option>

  <option value="Aereo">Aereo 5%</option>

  <option value="Autolinea">Autolinea 0%</option>

  <option value="Metro">Metro 0%</option>

  <option value="Taxi">Taxi 0%</option>

  <option value="MPA">Mezzo Proprio Aut.</option>

  <option value="MPNA">Mezzo Proprio NA</option>

  <option value="EccedenzaBagablio">Eccedenza bagaglio 0%</option>

  <option value="Altro">Altro 0%</option>

</select>&nbsp;

<input type="text" name="PercRimborso[]" size="3" maxlength="3" onchange="RimborsoBiglietti(this)" > % Importo <input type="text" name="ImportoBiglietto[]" size="7" > € Spettanza (Importo + %) <input type="text" name="RimborsoSpettante[]" size="7" > €

</div>

</div>

Non so se può servire ma sto facendo girare il codice su localhost.

criric · 15 Mar 2017

a me funziona anche il tuo, hai solo dimenticato l'onhange nel campo importo

vasomik · 15 Mar 2017

Se posso approfittare della tua disponibilità, posso girarti, in qualche modo, il mio file?

[Javascript] Funzioni su input dinamici

Nuovo Utente

Super Moderatore

Nuovo Utente

Super Moderatore

Nuovo Utente

Nuovo Utente

Super Moderatore

Nuovo Utente

Super Moderatore

Nuovo Utente

Super Moderatore

Nuovo Utente

Super Moderatore

Nuovo Utente

Nuovo Utente

Super Moderatore

Super Moderatore

Nuovo Utente

Super Moderatore

Nuovo Utente

Discussioni simili