[Javascript] Funzioni su input dinamici

vasomik

Nuovo Utente
14 Mar 2017
31
0
6
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, posta un po di codice magari si riesce a capire meglio
 

vasomik

Nuovo Utente
14 Mar 2017
31
0
6
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Nuovo Utente
14 Mar 2017
31
0
6
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

Nuovo Utente
14 Mar 2017
31
0
6
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Nuovo Utente
14 Mar 2017
31
0
6
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
come dicevo, se passi come parametro "this", nella funzione avrai a disposizione l'oggetto che si riferisce all'elemeto input
 

vasomik

Nuovo Utente
14 Mar 2017
31
0
6
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Nuovo Utente
14 Mar 2017
31
0
6
Provo a fare come dici, sperando di capirci qualcosa, in caso contrario ti disturberò nuovamente.
Per il momento ti ringrazio.

vasomik
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Nuovo Utente
14 Mar 2017
31
0
6
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Nuovo Utente
14 Mar 2017
31
0
6
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
a me funziona anche il tuo, hai solo dimenticato l'onhange nel campo importo
 

vasomik

Nuovo Utente
14 Mar 2017
31
0
6
Se posso approfittare della tua disponibilità, posso girarti, in qualche modo, il mio file?
 
Discussioni simili
Autore Titolo Forum Risposte Data
M [Javascript] Spiegazioni di due funzioni Javascript 10
M La bozza di un sito con alcune funzioni javascript non si apre correttamente su smartphone Javascript 1
epicbrozo [Javascript] Mi potreste spiegare passo passo i passaggi di due funzioni? Javascript 0
B [Javascript] funzioni non funzionanti in un form Javascript 8
T [Javascript] un form con select dinamica che funzioni da menù... Javascript 2
localhost.nicola [Javascript] JS non esegue funzioni su bottoni stampati da chiamata AJAX Javascript 1
Andrea Perrone [Javascript] QUESITO SU FUNZIONI Javascript 28
A la riga clonata non risponde alle funzioni javascript come la riga madre. Javascript 5
M lanciare due funzioni javascript dopo l'invio di un form Javascript 2
S Collegare 2 funzioni javascript Javascript 2
D Cambio funzioni mouse in calendario Javascript Javascript 1
L Semplice esercizio funzioni JavaScript Javascript 5
G Lanciare funzioni javascript da php PHP 4
L scrivere e richiamare funzioni javascript su file php PHP 2
R funzioni in javascript Javascript 1
A Funzioni javascript Javascript 4
I Javascript : un click due funzioni Javascript 3
V Ripristino funzioni javascript Javascript 1
L countdown multiplo javascript Javascript 1
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 0
F Creare elementi html con javascript Javascript 4
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4
A [Javascript] Scrittura su più campi contemporaneamente Javascript 19

Discussioni simili