offertemodule

Status
Niet open voor verdere reacties.
F

furtice

Gebruiker
Lid geworden
22 jan 2010
Berichten
12
Ik ben bezig met het maken van een offertemodule. Hierbij is het de bedoeling dat er een prijs rolt uit een aantal te kiezen opties. Ik ben begonnen aan het script maar krijg het niet werkend. Wat doe ik fout!

Code: 
<script type="text/javascript">
function reken(){ 

  var a = document.getElementById("aantal");
  var b = 4;
  var c = a * b;
 
return c; 
}
</script>

<select id="aantal">
<option value="0">maak uw keuze</option>
<option value="12">4 personen</option>
<option value="11">5 personen</option>
<option value="10">6 personen</option>
<option value="9">7 personen</option>
<option value="8">8 personen</option>
<option value="7">9 personen</option>
<option value="6">10 personen</option>
<option value="5">11 personen</option>
<option value="4">12 personen</option>

    </select><br>

<button onclick="reken()">Calculate</button><br><div id="c"></div>
 
De volgende regel:[JS] var a = document.getElementById("aantal");[/JS]haalt het referentie-handle van het element op. Echter, dit element is van het type HTMLSelectionElement; geen getal!
hoe los ik dit op​
gelukkig is er een 'selectedIndex'-property die de index van de geselecteerde optie uit de select haalt. Zoiets:
[JS] var ref = document.getElementById("aantal");
var a = ref[ref.selectedIndex].value; /* .value haalt de 'value' op */[/JS]daarnaast doe je niets met je uitkomst, je 'gooit' m simpelweg in het niets.

Dit is de code die bij mij werkt:[JS]function reken()
{
var ref, waarde, uitkomst;

ref = document.getElementById("aantal");
waarde = parseInt(ref[ref.selectedIndex].value);
/* parseInt maakt er een getal van, want het is nog 'text' */

uitkomst = waarde * 4;

/* doe iets met de uikomst */
alert(uitkomst);
//return uitkomst;
}[/JS]:thumb:
 
Laatst bewerkt:
offerteformulier

Bedankt voor de snelle reactie. Hier had ik echt wat aan. Ik heb het formulier verder uitgewerkt met extra opties. Ik heb nog een probleem, waar ook al aan werd gerefereerd

/* doe iets met de uikomst */
alert(uitkomst);
//return uitkomst;
Klik om te vergroten...

Nu is het de bedoeling dat er onder de button een tekst verschijnt met "De kosten bedragen €<uitkomst> per persoon.

Ik kom er echter niet uit :o

de totale code is nu als volgt;

Code: 
<script type="text/javascript">
function reken()
{ 
   var ref, waarde1, waarde2, waarde3, waarde4, uitkomst;
 
   ref     = document.getElementById("select_1");
   waarde1 = parseInt(ref[ref.selectedIndex].value);

   ref     = document.getElementById("select_2");
   waarde2 = parseInt(ref[ref.selectedIndex].value);

   ref     = document.getElementById("select_3");
   waarde3 = parseInt(ref[ref.selectedIndex].value);

   ref     = document.getElementById("select_4");
   waarde4 = parseInt(ref[ref.selectedIndex].value);

   /* parseInt maakt er een getal van, want het is nog 'text' */
 
   uitkomst = waarde1 * waarde2 + waarde3 + waarde4;
 
   /* doe iets met de uikomst */
   alert(uitkomst);
   //return uitkomst;
}
</script>

<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">bereken hier uw arrangement</span> 

</div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">wij willen varen met</label>
    <select class="cf_inputbox validate-selection" id="select_1" size="1" title="maak uw keuze" 

 name="select_1">
    <option value="">maak uw keuze</option>
      <option value="12">4 personen</option>
<option value="11">5 personen</option>
<option value="10">6 personen</option>
<option value="9">7 personen</option>
<option value="8">8 personen</option>
<option value="7">9 personen</option>
<option value="6">10 personen</option>
<option value="5">11 personen</option>
<option value="4">12 personen</option>

    </select>
    
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">gedurende een</label>
    <select class="cf_inputbox validate-selection" id="select_2" size="1" title="maak uw keuze" 

 name="select_2">
    <option value="">maak uw keuze</option>
      <option value="5">ochtend</option>
<option value="5">middag</option>
<option value="8">gehele dag</option>

    </select>
    
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">vooraf willen wij</label>
    <select class="cf_inputbox validate-selection" id="select_3" size="1" title="maak uw keuze" 

 name="select_3">
    <option value="">maak uw keuze</option>
      <option value="5">koffie bij Sluiszicht</option>
<option value="10">lunch bij Sluiszicht</option>
<option value="0">geen</option>

    </select>
    
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">en afsluiten met</label>
    <select class="cf_inputbox validate-selection" id="select_4" size="1" title="maak uw keuze" 

 name="select_4">
    <option value="">maak uw keuze</option>
      <option value="10">lunch bij Sluizicht</option>
<option value="20">diner bij Sluizicht</option>
<option value="0">geen</option>

    </select>
    
  </div>
  <div class="cfclear">&nbsp;</div>
</div>


<button onclick="reken()">berekenen</button><br><div id="uitkomst"></div>

<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">heeft u geen keuze kunnen maken? 

neem dan contact met ons op</span> </div>
  <div class="cfclear">&nbsp;</div>
</div>
 
een element-referentie heeft in sommige gevallen een innerHTML property (lees + schrijf). Bijvoorbeeld span, div, eigenlijk alles wat een losse sluit-tag heeft. Zoiets:
HTML: 
<div id='iets'></div>
<span id='test'>text</span>
[JS]
document.getElementById('iets').innerHTML = "woot!"; /* schrijf */
alert(document.getElementById('test').innerHTML); /* lees (alert 'text') */[/JS]:thumb:
 
Ik zie nog niet waar ik wat in mijn huidige code moet plaatsen. Heb geprobeerd het te snappen ook aan de hand van bestaande voorbeelden, maar kom er nog niet uit...:o
 
[JS]function reken()
{
var ref, waarde1, waarde2, waarde3, waarde4, uitkomst;

ref = document.getElementById("select_1");
waarde1 = parseInt(ref[ref.selectedIndex].value);

ref = document.getElementById("select_2");
waarde2 = parseInt(ref[ref.selectedIndex].value);

ref = document.getElementById("select_3");
waarde3 = parseInt(ref[ref.selectedIndex].value);

ref = document.getElementById("select_4");
waarde4 = parseInt(ref[ref.selectedIndex].value);

/* parseInt maakt er een getal van, want het is nog 'text' */

uitkomst = waarde1 * waarde2 + waarde3 + waarde4;

/* doe iets met de uikomst */
/* hier stuur je t naar de innerHTML van je resultaat! */

document.getElementById('resultaatspan').innerHTML = uitkomst;
}
[/JS]je moet dan uiteraard wel een tag met als id 'resultaatspan' hebben, zoiets:
HTML: 
<span id='resultaatspan'></span>
 
opgelost

Na wat dingen te hebben uitgeprobeerd heb ik er het volgende van gemaakt;

Code: 
<script type="text/javascript">
function reken()
{ 
   var ref, waarde1, waarde2, waarde3, waarde4, uitkomst;
 
   ref     = document.getElementById("select_1");
   waarde1 = parseInt(ref[ref.selectedIndex].value);

   ref     = document.getElementById("select_2");
   waarde2 = parseInt(ref[ref.selectedIndex].value);

   ref     = document.getElementById("select_3");
   waarde3 = parseInt(ref[ref.selectedIndex].value);

   ref     = document.getElementById("select_4");
   waarde4 = parseInt(ref[ref.selectedIndex].value);

   /* parseInt maakt er een getal van, want het is nog 'text' */
 
   uitkomst = waarde1 * waarde2 + waarde3 + waarde4;

document.getElementById('antwoord').innerHTML = uitkomst;

}
</script>

<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">bereken hier uw arrangement</span> 

</div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">wij willen varen met</label>
    <select class="cf_inputbox validate-selection" id="select_1" size="1" title="maak uw keuze" 

 name="select_1">
    <option value="">maak uw keuze</option>
      <option value="12">4 personen</option>
<option value="11">5 personen</option>
<option value="10">6 personen</option>
<option value="9">7 personen</option>
<option value="8">8 personen</option>
<option value="7">9 personen</option>
<option value="6">10 personen</option>
<option value="5">11 personen</option>
<option value="4">12 personen</option>

    </select>
    
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">gedurende een</label>
    <select class="cf_inputbox validate-selection" id="select_2" size="1" title="maak uw keuze" 

 name="select_2">
    <option value="">maak uw keuze</option>
      <option value="5,00">ochtend</option>
<option value="5,00">middag</option>
<option value="8,00">gehele dag</option>

    </select>
    
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">vooraf willen wij</label>
    <select class="cf_inputbox validate-selection" id="select_3" size="1" title="maak uw keuze" 

 name="select_3">
    <option value="">maak uw keuze</option>
      <option value="5">koffie bij Sluiszicht</option>
<option value="10">lunch bij Sluiszicht</option>
<option value="0">geen</option>

    </select>
    
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">en afsluiten met</label>
    <select class="cf_inputbox validate-selection" id="select_4" size="1" title="maak uw keuze" 

 name="select_4">
    <option value="">maak uw keuze</option>
      <option value="10">lunch bij Sluizicht</option>
<option value="20">diner bij Sluizicht</option>
<option value="0">geen</option>

    </select>
    
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<p>Uw arrangement kost <b id='antwoord'> click op bereken</b> euro per persoon</p> 
<input type='button' onclick='reken()' value= bereken>

  </div>
  <div class="cfclear">&nbsp;</div>
</div>


<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">heeft u geen keuze kunnen maken? 

neem dan contact met ons op</span> </div>
  <div class="cfclear">&nbsp;</div>
</div>

De module doet nu wat ik wil. Superbedankt!!! :thumb:
 
veder uitwerken?

kan je bijvoorbeeld dit script ook veder uitwerken dat ie word opgenomen in een mail form?
 
uitbreiding rekenmodule

De reken module rekent goed de prijs per persoon. Er moet echter nog één ding toegevoegd worden. Bij "hele dag" moet er een standaard toeslag worden toegevoeg die niet wordt berekend bij een ochtend of middag. Hoe kan ik dat toevoegen?
 
toeslag

kan je het bedrag niet gewoon wat hoger maken bij de hele dag
en dan er bij zetten dat het toeslag is ?
 
Nee, dit is geen optie... het moet in de formule worden opgenomen...
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan