Id toepassen bij vervolgkeuzelijst

Door Paul Groenewegen op 17-09-2018 09:03

4.375 views

Hallo,

Bij de checkbox staat het volgende:
<input type="checkbox" name="Diner" id="Diner_" value="Diner Satebuffet"onclick="javascript:calculateTotals();">

Hoe kan ik de "id" toepassen bij een vervolgkeuzelijst?

<select size="1" name="Activiteit">
<option selected value="Maak hier een keuze">Maak hier een keuze</option>
<option value="Alleen Diner">Alleen Diner</option>
<option value="Diner + feest ">Diner + feest</option>
<option value="Alleen feest">Alleen feest</option>
</select>

Alvast bedankt voor de reactie(s)

Paul Groenewegen

23-09-2018 13:05

Heb id en onchange="javascript:calculateTotals();"> toegevoegd en de waarden aangepast naar de bedragen bij het volgkeuzelijst maar zonder succes.
Ook heb ik andere variaties geprobeerd maar ook zonder succes.

Wil iemand mij A.U.B. de juiste waarden/info geven zodat ik dit aanmeldformulier af kan maken.
Dit kost mij momenteel veel te veel tijd. ben er al uren mee bezig geweest. (ja, echt meerdere uren)
Momenteel kan ik beter mijn aandacht richten op het organiseren van het feest zelf.
Als het feest achter de rug is heb ik weer meer tijd en zal dan het script bekijken hoe dit in elkaar zit voor een volgende keer/feest.

Alvast bedankt !!

Frank Nietbelangrijk

23-09-2018 20:52 gewijzigd op 23-09-2018 20:52

Maar wat heb je tot nu toe? (graag tussen [ c o d e ] en [ / c o d e ] tags plaatsen)

Paul Groenewegen

23-09-2018 21:10 gewijzigd op 23-09-2018 21:28


<script >
function calculateTotals ()
{
  nCost1 = 10; 
  nTotal = 0;
    
  if (document.getElementById("Activiteiten").checked )
  {
    nTotal = nTotal + nCost1;
  
  }
  //alert("Total=" + nTotal);
  document.getElementById("Totaal_bedrag").value = nTotal.toFixed(2);
}
</script>


select size="1"id="Activiteiten" name="Activiteiten" onchange="javascript:calculateTotals();">
		<option value="0" selected onclick="javascript:calculateTotals();">0</option>
	    <option value="10">Alleen Diner</option>
        <option value="15">Diner + feest</option> 
        <option value="5">Alleen feest</option>  
                  </select>

Ariën

23-09-2018 21:20

Zet het geheel even tussen code tags.

Maar die onclick lijkt me niet nodig.

Paul Groenewegen

23-09-2018 21:28

Bij deze, heb mijn vorig bericht aangepast.

Frank Nietbelangrijk

23-09-2018 22:06 gewijzigd op 23-09-2018 22:15

op regel zeven gebruik je nog steeds checked alsof je met een selectbox bezig bent. In plaats daarvan zul je moeten bepalen welke <option> er gekozen is in de selectbox. En dat werkt net even iets anders.


<select size="1"id="Activiteiten" name="Activiteiten" onchange="javascript:calculateTotals();">
        <option value selected>Kies iets..</option>
        <option value="10">Alleen Diner</option>
        <option value="15">Diner + feest</option> 
        <option value="5">Alleen feest</option>  
</select>

<script>
function calculateTotals ()
{
  var select = document.getElementById('Activiteiten');
  var selectedText = select.options[select.selectedIndex].text;
  var selectedValue = select.options[select.selectedIndex].value;
  
  alert(selectedText);
  alert(selectedValue);
  
  // en nu verder afmaken ...
}
</script>

select.selectedIndex geeft het volgnummer van de <option> dat geselecteerd is. dit is 0, 1, 2 of 3.
met select.options[x] verwijst naar <option> nummer x in de lijst.
select.options[x].text geeft de tekst waarde van <option> x.
select.options[x].value geeft de value waarde van <option> x.

(x is dus 0, 1, 2 of 3)

Paul Groenewegen

26-09-2018 12:33 gewijzigd op 26-09-2018 12:37

Bedankt!
zal het eens bekijken en proberen

Frank Nietbelangrijk

26-09-2018 13:06

Paul, het script in de <head> sectie zetten gaat mogelijk niet werken. Probeer het script eens helemaal onderin te zetten net boven de </body> tag.

[size=xsmall]Toevoeging op 26/09/2018 13:07:14:[/size]

Je hebt het weer verwijderd?

[size=xsmall]Toevoeging op 26/09/2018 13:09:00:[/size]

Ook mis ik een spatie in de <select ...>

Paul Groenewegen

26-09-2018 14:49

Ja, heb het verwijderd want had het iets te snel geplaatst.
Wil het wat completer plaatsten en zal je aanwijzingen gelijk mee nemen.

[size=xsmall]Toevoeging op 26/09/2018 15:19:44:[/size]

Bij deze het hele aanmeldformulier:
Hierbij heb ik het script van Frank en zijn aanwijzingen toegevoegd.
Klopt dit een beetje of zit ik er helemaal naast?
Waar genereert het script het Totaal_bedrag?


<html>

<head>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Aanmelden</title>
</head><script> function calculateTotals ()
{
  var select = document.getElementById('Activiteiten');
  var selectedText = select.options[select.selectedIndex].text;
  var selectedValue = select.options[select.selectedIndex].value;
  
  alert(selectedText);
  alert(selectedValue);
  
  select.options[10].text;
  select.options[1].value;

  select.options[15].text;
  select.options[2].value

  select.options[5].text;
  select.options[3].value;
  
}
</script>
</body>

</html>
<form method="POST" action="aanmelden.php">
	<p><font face="Verdana">Naam:&nbsp;&nbsp;&nbsp;&nbsp; <font size="3"> <input type="text" name="Naam" size="20"></font></font></p>
	<p><font face="Verdana">Telefoon: <font size="3"> <input type="text" name="Mail0" size="20"></font></font></p>
	<p><font face="Verdana">E-mail:&nbsp;&nbsp;&nbsp; <font size="3"> <input type="text" name="Mail" size="20"></font></font></p>
	<p><font face="Verdana">Aan welke activiteiten wil je deelnemen?</font></p>
	<p><font size="3" face="Verdana">
		<select size="1"id="Activiteiten" name="Activiteiten" onchange="javascript:calculateTotals();">
        <option value selected>Kies iets..</option>
        <option value="1">Alleen Diner</option>
        <option value="2">Diner + feest</option> 
        <option value="3">Alleen feest</option></font></p>
	<p>
		<font face="Verdana"><b>Totaal bedrag:</b>
		</font>
		<font face="Verdana" size="3"><span style="font-family: Verdana; font-size: 12pt">
		<font size="3"><span style="font-size: 11pt">
	<font size="3" face="Verdana">
		<input type="text" name="Totaal_bedrag" id="Totaal_bedrag" size="12"></font></span></font></span></font><font face="Verdana"><span style="font-family: Verdana; ">&nbsp; </span></font></p>
	<p><span style="font-family: Verdana">Vragen/opmerkingen</span></p>
	<p>
		<font face="Verdana" size="3"><span style="font-family: Verdana; font-size: 12pt">
		<font size="3">
		<textarea rows="4" name="Opmerking" cols="56" style="font-family: Verdana; "></textarea></font></span></font></p>
	<p>
		<font color="#FF0000" face="Verdana">*</font><font face="Verdana"><b>Veiligheidscode:&nbsp;</b> <b><font color="#CC0000">6b7F</font></b>
		<b>&gt;</b> </font><font face="Verdana" size="3">
		<span style="font-family: Verdana; font-size: 12pt">
		<font size="3"><span style="font-size: 11pt">
		<font size="3" face="Verdana">
		<input type="text" name="code" size="20"></font></span></font></span></font><font face="Verdana">
		</font></p>
	<p><font size="3" face="Verdana"><input type="submit" value="Verzenden" name="B1"></font></p>
</form>

Frank Nietbelangrijk

26-09-2018 22:08

Ik heb je javascriptje dan maar even afgemaakt en de HTML weer kloppend gemaakt.

(Waarom al die inline css?)


<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <title>Aanmelden</title>
    </head>

    <body>
        <form method="POST" action="aanmelden.php">
            <p><font face="Verdana">Naam:&nbsp;&nbsp;&nbsp;&nbsp; <font size="3"> <input type="text" name="Naam" size="20"></font></font></p>
            <p><font face="Verdana">Telefoon: <font size="3"> <input type="text" name="Mail0" size="20"></font></font></p>
            <p><font face="Verdana">E-mail:&nbsp;&nbsp;&nbsp; <font size="3"> <input type="text" name="Mail" size="20"></font></font></p>
            <p><font face="Verdana">Aan welke activiteiten wil je deelnemen?</font></p>
            <p><font size="3" face="Verdana">
                    <select size="1"id="Activiteiten" name="Activiteiten" onchange="javascript:calculateTotals();">
                        <option value selected>Kies iets..</option>
                        <option value="1">Alleen Diner</option>
                        <option value="2">Diner + feest</option>
                        <option value="3">Alleen feest</option></font></p>
            <p>
                <font face="Verdana"><b>Totaal bedrag:</b>
                </font>
                <font face="Verdana" size="3"><span style="font-family: Verdana; font-size: 12pt">
                <font size="3"><span style="font-size: 11pt">
            <font size="3" face="Verdana">
                <input type="text" name="Totaal_bedrag" id="Totaal_bedrag" size="12"></font></span></font></span></font><font face="Verdana"><span style="font-family: Verdana; ">&nbsp; </span></font></p>
            <p><span style="font-family: Verdana">Vragen/opmerkingen</span></p>
            <p>
                <font face="Verdana" size="3"><span style="font-family: Verdana; font-size: 12pt">
                <font size="3">
                <textarea rows="4" name="Opmerking" cols="56" style="font-family: Verdana; "></textarea></font></span></font></p>
            <p>
                <font color="#FF0000" face="Verdana">*</font><font face="Verdana"><b>Veiligheidscode:&nbsp;</b> <b><font color="#CC0000">6b7F</font></b>
                    <b>&gt;</b> </font><font face="Verdana" size="3">
                <span style="font-family: Verdana; font-size: 12pt">
                <font size="3"><span style="font-size: 11pt">
                <font size="3" face="Verdana">
                <input type="text" name="code" size="20"></font></span></font></span></font><font face="Verdana">
                </font></p>
            <p><font size="3" face="Verdana"><input type="submit" value="Verzenden" name="B1"></font></p>
        </form>

        <script> function calculateTotals ()
            {
                var select = document.getElementById('Activiteiten');
                // var selectedText = select.options[select.selectedIndex].text;
                var selectedValue = select.options[select.selectedIndex].value;

                // alert(selectedText);
                // alert(selectedValue);

                var price = 10.00; // de prijs voor enkel diner

                if(selectedValue == 2) {
                    price = 30.00; // de prijs voor diner + feest
                } else if(selectedValue == 3) {
                    price = 20.00; // de prijs voor enkel feest
                }

                document.getElementById('Totaal_bedrag').value = price.toFixed(2);

            }
        </script>
    </body>

</html>

Reageren

Inloggen om te reageren