PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
P

waarde textvelden optellen met js

Door Peter van den Dungen op 15-05-2013 21:56 gewijzigd op 15-05-2013 21:57
3.795 views
Hallo,

Met onderstaande code lukt het om de totaalwaarde van de 3 tekstvelden weer te geven in het input_tot veld. Als ik de tekstvelden niet handmatig invul maar indirect d.m.v een js-functie (via een select bijvoorbeeld) dan wordt het totaal niet meer weergegeven. Hoe moet ik de subtotaal_OD functie aanpassen om dit wel voor elkaar te krijgen?


<script type="text/javascript">
function subtotaal_OD()
{
  var prijs_1     = parseInt(document.getElementById('input_1').value)||0;
  var prijs_2     = parseInt(document.getElementById('input_2').value)||0;
  var prijs_3     = parseInt(document.getElementById('input_3').value)||0;
  var prijs_totaal = prijs_1+prijs_2+prijs_3;
  document.getElementById('input_tot').value = prijs_totaal;
}
</script>


</head>

<body>
<form id="testje">

<input 
    type  = "text" 
    class = "" 
    name  = "input_1" 
    value = ""
    id = "input_1"
    onKeyUp="subtotaal_OD();"
    /> 
    <br/><br/>
<input 
    type  = "text" 
    class = "" 
    name  = "input_2" 
    value = ""
    id = "input_2"
    onKeyUp="subtotaal_OD();"
    /> 
    <br/><br/>
<input 
    type  = "text" 
    class = "" 
    name  = "input_3" 
    value = ""
    id = "input_3"
    onKeyUp="subtotaal_OD();"
    /> 
    <br/><br/>
<input 
    type  = "text" 
    class = "" 
    name  = "input_tot" 
    value = ""
    id = "input_tot"
    readonly
    /> 
</form>
K
Kevin Driessen
15-05-2013 22:56
Het probleem ligt niet in je 'subtotaal_OD' functie, maar de aanroep hiervan. Met de onKeyUp roep je deze functie aan. als je met javascript een waarde bewerkt, dan is er geen sprake van 'keyup' en wordt de functie dus ook niet aangeroepen.

Ik dacht dat dit met 'onchange' wel zou moeten lukken, maar na kort uitproberen bleek dit niet te werken. Het enige wat ik dan kan bedenken is dat je simpelweg 'subtotaal_OD' aanroept nadat je de waarde in je veld hebt bewerkt.
P
Peter van den Dungen
16-05-2013 19:58
Ik krijg het nog niet spits, hier heb ik de overige code om mijn wens wat duidelijker te maken.

<script type="text/javascript">
function subtotaal_OD()
{
  var prijs_1     = parseInt(document.getElementById('input_1').value)||0;
  var prijs_2     = parseInt(document.getElementById('input_2').value)||0;
  var prijs_3     = parseInt(document.getElementById('input_3').value)||0;
  var prijs_totaal = prijs_1+prijs_2+prijs_3;
  document.getElementById('input_tot').value = prijs_totaal;
}
</script>

<script type="text/javascript">
function test1()
{
  var prijs_1     = parseInt(document.getElementById('select_1').value);
  document.getElementById('input_1').value = prijs_1;
}
</script>
<script type="text/javascript">
function test2()
{
  var prijs_2     = parseInt(document.getElementById('select_2').value);
  document.getElementById('input_2').value = prijs_2;
}
</script>

<script type="text/javascript">
function test3()
{
  var prijs_3     = parseInt(document.getElementById('select_3').value);
  document.getElementById('input_3').value = prijs_3;
}
</script>



</head>

<body>
<form id="testje">

<select name="select_1" id="select_1" onChange="test1();"/>
<option value="10">10</option>
<option value="25">25</option>
<option value="40">40</option>
</select>

<input 
    type  = "text" 
    class = "" 
    name  = "input_1" 
    value = ""
    id = "input_1"
    onKeyUp="subtotaal_OD();"
    /> 
    <br/><br/>
    
<select name="select_2" id="select_2" onChange="test2();"/>
<option value="10">10</option>
<option value="25">25</option>
<option value="40">40</option>
</select>
    
<input 
    type  = "text" 
    class = "" 
    name  = "input_2" 
    value = ""
    id = "input_2"
    onKeyUp="subtotaal_OD();"
    /> 
    <br/><br/>


<select name="select_3" id="select_3" onChange="test3();"/>
<option value="10">10</option>
<option value="25">25</option>
<option value="40">40</option>
</select>
    
<input 
    type  = "text" 
    class = "" 
    name  = "input_3" 
    value = ""
    id = "input_3"
    onKeyUp="subtotaal_OD();"
    /> 
    <br/><br/>
<input 
    type  = "text" 
    class = "" 
    name  = "input_tot" 
    value = ""
    id = "input_tot"
    readonly
    /> 
</form>
P
Pieter R
16-05-2013 20:38 gewijzigd op 16-05-2013 20:39 

<script type="text/javascript">
  function test1()
  {
    var prijs_1     = parseInt(document.getElementById('select_1').value);
    document.getElementById('input_1').value = prijs_1;
    subtotaal_OD()
  }

  function test2()
  {
    var prijs_2     = parseInt(document.getElementById('select_2').value);
    document.getElementById('input_2').value = prijs_2;
    subtotaal_OD()
  }

  function test3()
  {
    var prijs_3     = parseInt(document.getElementById('select_3').value);
    document.getElementById('input_3').value = prijs_3;
    subtotaal_OD()
  }
</script>

Op deze manier word de functie subtotaal_OD() ook uitgevoerd bij test1/2/3
=> http://jsbin.com/itahow/1/edit

Reageren

Inloggen om te reageren