javascript - recherche plusieurs html #ID et passe à la fonction

Question

J'ai un formulaire de commande, auquel je peux ajouter des champs en cliquant sur un bouton. J'ai un backend javascript en cours d'exécution qui totalise le prix de la commande, mais le script total est éludé moi.

Mon problème est que j'ai besoin du script pour rechercher le DOM entier et trouver combien ont un ID qui correspond au modèle suivant.

totprice01 totprice02 totprice03 totprice (n)

Je joue avec cette expression régulière, mais pas beaucoup de chance j'ai peur:

matchStr = new RegExp("\\btotprice\\d{2}\\b", "gi"); 

Une fois que je l'ai J'ai obtenu un tableau de tous les identifiants HTML dont j'ai besoin pour les transmettre dans une fonction qui ressemble à ceci: notez que tout est codé en dur, pas du tout dynamique:

document.getElementById('totpricetot').value = Math.round((parseFloat(document.getElementById('totprice1').value)+parseFloat(document.getElementById('totprice2').value)+parseFloat(document.getElementById('totprice3').value)+parseFloat(document.getElementById('totprice4').value)+parseFloat(document.getElementById('totprice5').value)+parseFloat(document.getElementById('totprice6').value)+parseFloat(document.getElementById('totprice7').value)+parseFloat(document.getElementById('totprice8').value)+parseFloat(document.getElementById('totprice9').value)+parseFloat(document.getElementById('totprice10').value))*100)/100; 

Est-ce que quelqu'un est capable de m'aider à mettre cela en expression + fonction pour retourner la somme de toutes les valeurs?

Merci beaucoup!

EDIT

OK j'ai décidé de fossé juste en utilisant plaine ol » javascript - JQuery est! J'ai mis en place ce code en utilisant certains des exemples ci-dessous, mais quelqu'un peut-il m'aider à le déboguer? Je continue à obtenir des erreurs "non définies" du débogueur - il semble que cette fonction n'est pas disponible pour le reste du DOM?

<input id="totprice08" onChange="totChange()" class="total_field" /> 
<input id="totprice09" onChange="totChange()" class="total_field" /> 
<input id="totprice10" onChange="totChange()" class="total_field" /> 
etc... 
<input id="totpricetot" value="0.00" name="totpricetot" /> 

jQuery(function($) { 
    function totChange() { 
    var sum=0; 
    $('.total_field').each(function() { 
     sum += $(this).val() * 1; 
    }); 
    $('#totpricetot').val(sum); 
    } 
}); 

Answer 1

En utilisant jQuery, vous pouvez sélectionner et résumer les éléments comme celui-ci:

var sum = 0; 
$('[id^=totprice-]').each(function() 
{ 
    sum += $(this).val(); 
}); 

Answer 2

Vous pouvez donner tous vos éléments de prix au total de la même classe CSS et obtenir tous les éléments de cette classe (facile et agréable avec JQuery). Donnez à chaque élément une classe et utilisez jQuery.

Answer 3

Answer 4

Donnez les entrées dont vous avez besoin pour résumer une classe, puis obtenir ces entrées par ce nom de classe (jQuery ou un autre cadre serait être utile ici).

si vous utilisez jQuery, vous pouvez faire quelque chose comme ceci:

function calculateSum() { 
    var sum = 0; 
    $('.YourClass').each (function() { 
     sum += $(this).val() * 1; 
    }); 

    return sum; 
} 

Answer 5

Il y a beaucoup de solutions. En plus de donner à tous les éléments en question le même nom de classe et d'utiliser jQuery (ou quelque chose de similaire), vous pouvez aussi simplement vous rappeler le nombre total d'éléments dans une variable JavaScript. Serait-il possible? Je sais - c'est une sorte de solution old school. Vous n'avez pas indiqué que vous utilisiez jQuery ou toute autre bibliothèque JavaScript, donc cela pourrait vous convenir.

Edit: Pour être plus explicite:

// your variable, updated every time you add/remove a new field 
var fieldsCount; 

// whenever you need to do anything with all the fields: 
for (var i = 0; i < fieldsCount; i++) 
{ 
    var field = document.getElementById("totprice" + i); 
    // ... 
}  

Answer 6

je l'aime comment chaque javascript question sur SO est répondu par "utiliser jQuery" ...

... Quoi qu'il en soitvous pouvez le faire avec ol tout simplement » javascript aussi:

var inputs = document.getElementsByTagName("input"); 
var priceInputs = []; 
for (var i=0, len=inputs.length; i<len; i++) { 
    if (inputs[i].tagName.indexOf("totprice") > -1) { 
     priceInputs[priceInputs.length] = parseInt(inputs[i].value); 
    } 
} 
calcTotal(priceInputs); 

Ensuite, il suffit de créer une fonction de boucle dans le tableau et résumé (: