Javascript: waardes optellen uit formulier

Status
Niet open voor verdere reacties.
B

*Baia*

Gebruiker
Lid geworden
17 mei 2001
Berichten
438
Dag,

Met onderstaande functie kan ik waardes uit mijn formulier direct bij elkaar optellen.
Code: 
function telinzet() {
var sum = 0;
var valid = true;
var inputs = document.getElementsByName('inzet');
for(i =0; i < inputs.length; i++) {
if( inputs[i].value.match( /^[0]*(\d+)$/)) {
sum += parseInt(RegExp.$1);
}
else {valid=false;}
}
if(valid) {
document.getElementById('totaalinzet').value = sum;
}
else{
alert("U kunt alleen getallen invoeren!");
}
}
Als ik dit doe doet ie het goed:
HTML: 
<input type='text' name='inzet' value='0' onchange='telinzet()'>
<input type='text' name='inzet' value='0' onchange='telinzet()'>
<input type='text' name='inzet' value='0' onchange='telinzet()'>
Maar het moet dit worden (geen 'inzet' maar 'inzet[36'])
HTML: 
<input type='text[12]' name='inzet' value='0' onchange='telinzet()'>
<input type='text[43]' name='inzet' value='0' onchange='telinzet()'>
<input type='text[65]' name='inzet' value='0' onchange='telinzet()'>
Hoe kan ik er voor zorgen dat de functie de '[getal]' niet leest. Of is er een andere manier om dit te doen?

Gr. Jeroen
 
Laatst bewerkt door een moderator:
Hey,

Allereerst, kun je voortan
Code:
tags gebruiken voor je scripts? Dat maakt het een stuk makkelijker te lezen.

Maar het moet dit worden (geen 'inzet' maar 'inzet[36'])
Klik om te vergroten...
Mag ik even vragen waarom dat nodig is? Het enige nut van naamgeving als inzet[0] inzet[1] etc is als je een array door wilt geven naar bijvoorbeeld php. Is dat wat je wilt doen of probeer je iets anders te berijken?


<input type='text[12]' name='inzet' value='0' onchange='telinzet()'>
<input type='text[43]' name='inzet' value='0' onchange='telinzet()'>
<input type='text[65]' name='inzet' value='0' onchange='telinzet()'>
Klik om te vergroten...
Je hebt hier het type veranderd, dat mag natuurlijk niet. Er bestaat geen type "text[43]".

Maargoed, wat je kunt doen is bijvoorbeeld document.getElementsByTagName("input") en dan elk element controleren of het wel of niet opgeteld moet worden.

Je code zoals ie nu is kan trouwens net iets simpeler:
Code: 
function telinzet()
{
  var sum = 0;
  var inputs = document.getElementsByName("inzet");
  for (i =0; i < inputs.length; i++)
  {
    if( inputs[i].value.match( /^\d+$/))
    {
      sum += parseInt(inputs[i].value, 10);
    }
    else
    {
      document.getElementById("totaalinzet").value = "Voer alleen getallen in!";
      return;
    }
  }
  document.getElementById("totaalinzet").value = sum;
}
 
Dag Glest,

Ten eerste bedankt voor je reactie!

Maar het moet dit worden (geen 'inzet' maar 'inzet[36']) --> Ja, dit is inderdaad om aan php door te geven.

Het moet natuurlijk niet het type zijn maar de name:
<input type='text' name='inzet[12]' value='0' onchange='telinzet()'>

Kan je me een zetje in de goede richting geven door te werken met "document.getElementsByTagName"? Ik ben een php-er en geen javascripter, alhoewel het wel allemaal logischer voor me begint te worden.

Met vr. gr.
Jeroen
 
Ok, dan snap ik waarom je het wilt, in dat geval kun je iets als dit doen:

Code: 
<html>
<head>
<script type="text/javascript">
function telinzet()
{
  var sum = 0;
  var inputs = document.getElementsByTagName("input");
  for (i =0; i < inputs.length; i++)
  {
    if (!inputs[i].type || inputs[i].type != "text")
    {
      continue;  //negeer alle elementen zonder type attribuut of niet text inputs.
    }
    if (!inputs[i].name || !inputs[i].name.match(/^inzet\[\d+\]$/))
    {
      continue; //negeer alle elementen zonder name attribuut, de regex snap je wel neem ik aan.
    }
    if( inputs[i].value.match( /^\d+$/))
    {
      sum += parseInt(inputs[i].value, 10);
    }
    else
    {
      document.getElementById("totaalinzet").value = "Voer alleen getallen in!";
      return;
    }
  }
  document.getElementById("totaalinzet").value = sum;
}
</script>
</head>
<body>
<input type="text" name="inzet[0]" value="0" onchange="telinzet()"> +
<input type="text" name="inzet[1]" value="0" onchange="telinzet()"> +
<input type="text" name="inzet[2]" value="0" onchange="telinzet()"> =
<input type="text" id="totaalinzet" value="0" onchange="telinzet()"><br />
<input type="button" onclick="telinzet()" value="Bereken" />
</body>
</html>

/edit: was een haakje vergeten en had "!input.type ==" ipv "input.type !="
 
Laatst bewerkt:
if (!inputs.name || !inputs.name.match(/^inzet\[\d+\]$/) ) <-- moest nog een haakje sluiten!

Hij werkt helemaal top! Ik wil je hartelijk bedanken :thumb::thumb::thumb:

Nog een hele fijne avond!!
 
Ah dat heb je ook gezien merk ik, er stond nog een foutje in waarschijnlijk? Of misschien had ik die net al verbeterd toen je keek.

Dit kan natuurlijk niet:
Code: 
    if (!inputs[i].type || [COLOR="Red"]![/COLOR]inputs[i].type [COLOR="Red"]==[/COLOR] "text")
    {
      continue;  //negeer alle elementen zonder type attribuut of niet text inputs.
    }

Moet zo:
Code: 
    if (!inputs[i].type || inputs[i].type [COLOR="Red"]!=[/COLOR] "text")
    {
      continue;  //negeer alle elementen zonder type attribuut of niet text inputs.
    }

In ieder geval ook nog een fijna avond :)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan