Formulierkeuze geeft extra weergave op pagina

[Falcon10]

Ik zit met volgend probleem :

Voor onze vereniging werken we een pagina waar je kan inschrijven voor de komende bijeenkomsten.
Momenteel werkt dat vlotjes met een formulier op een html pagina, die een php pagina oproept en automatisch zo een mail verstuurd.
Als je vastlegd voor een bijeekomst heb je een knop waar je ingeeft met hoeveel personen, en als je op de knop drukt, toont ie hoeveel je moet betalen.
Dit wordt allemaal in de mail ook doorgestuurd.

Nu in de toekomst zouden we dit willen uitbreiden naar voorreserveren.
Dit heeft voor ons voordeel dat we weten hoeveel drank, eten etc we bij oa brouwer etc moeten bestellen.
Maar bij voorreserveren is geen berekening nodig, omdat je dan nog niet moet betalen om naar de bijeenkomst te komen, is tenslotte dan nog niet zeker.
De knop en berekening van hoeveel je gaat moeten betalen moet dan dus niet zichtbaar zijn.

Momenteel gebeurd het allemaal via volgende code :

code:

<div class="descr">TESTInschrijven</div>
            
            <form name="contactform" method="post" action="send_form_email_test.php" accept-charset="ISO-8859-1" onsubmit="var originalCharset = document.charset; document.charset='ISO-8859-1'; window.onbeforeunload = function () {document.charset=originalCharset;};">
            
            <p>Type bestelling :<br /><SELECT NAME="bestelling">
                                <OPTION>Voorreservatie</OPTION>
                                <OPTION>Bestelling</OPTION>
                                <OPTION>Extra bestelling</OPTION>
                                </SELECT><br /><br>
            
            <script type="text/javascript">
            function bereken() {
            var toon = document.getElementById('uitkomst');
            var lid = (document.getElementById('lid').value-0);
            var uitkomst = ((lid*15.00)).toFixed(2);
            toon.innerHTML="Gelieve " + uitkomst + " euro te betalen binnen de 5 dagen aan de vereniging met vermelding evenement + naam.";
            document.getElementById("totaal").value = uitkomst;
            }
            </script>

        
            
            <input id="lid" type="text" name="lid"></input> Aantal leden
            <br>
            <input type="button" value="Bereken!" onclick="bereken();"></input>
            
            <input id="totaal" type="hidden" name="totaal"></input>
            
            <br><br>
            <div id="uitkomst">
            </div>
            <br>
            
            <div class="descr">Vul hier je gegevens in:</div>
            <p>Voornaam:<br /><input type="text" name="voornaam" size="40" ><br />
            Naam: <br /><input type="text" name="naam" size="40" ><br />
            E-mail: <br /><input type="text" name="email" size="40" ><br /><br />
            Extra info :<br>
            <textarea name="extra_info" rows="3" cols="50" background="#000" color="white"></textarea><br /><br />
            
            <input type="submit" value="Verzenden" >
            <input type="reset" value="Wissen" >
            </p>

            Mocht het verzenden via dit formulier niet lukken, mag je alles altijd doormailen.
            </form>
            
            <br><br>
            

        </div>

Bedoeling is dus dat als je in de dropdown de keuze "Voorreservatie" kiest, het script dat eronder staat dat de berekening doet niet ziet, enkel als je 1 van de 2 andere keuzes neemt, moet deze berekening zichtbaar worden.

Heb al wat zitten googelen op mogelijkheden om dit voor elkaar te krijgen, maar ik loop vast.
Ik vermoed dat het probleem misschien het feit is dat de berekening via javascript verloopt, en dat het hierdoor niet onzichtbaar gemaakt kan worden afhankelijk van je dropdownkeuze ?

Iemand die me verder op weg kan helpen ?

[Room42]

Je wilt met Javascript checken of element 'bestelling' de waarde van 'Voorreservatie' heeft. Als dat zo is, wil je dat 'bereken()' niet uitgevoerd wordt of een ander resultaat toont.

Dus wat je moet doen is in bereken() de waarde van 'bestelling' checken en dan beslissen wat je voor resultaat stuurt.

Ik denk dat je hier wel wat aan hebt: http://www.w3schools.com/js/js_validation.asp

[Falcon10]

Nee, misschien dat ik het slecht uitgelegd heb.

Bedoeling is eigenlijk dat de input id : lid en input type : button standaard hidden zijn, behalve als in de dropdownbox bestelling de option "bestelling" of "extra bestelling" wordt gekozen.

Dus ik zou een soort van conditionele formatting nodig hebben die afhankelijk van de keuze in het dropdownmenu enkele andere formelementen hidden of zichtbaar maakt.

[jasbroek]

Dat kan je ook met javascript (eventueel jQuery) voor elkaar krijgen.
Wat Evanescent ook zegt, je zult een soort validatie moeten doen in JS die de waarde van het veld checkt.

Als deze de waarde heeft die je aangeeft (bestelling of extra bestelling), dan kun je vrij simpel (vooral in jQuery) de nieuwe velden laten zien.

[Room42]

Falcon10 schreef op maandag 26 december 2016 @ 15:04:
Nee, misschien dat ik het slecht uitgelegd heb.

Bedoeling is eigenlijk dat de input id : lid en input type : button standaard hidden zijn, behalve als in de dropdownbox bestelling de option "bestelling" of "extra bestelling" wordt gekozen.

Dus ik zou een soort van conditionele formatting nodig hebben die afhankelijk van de keuze in het dropdownmenu enkele andere formelementen hidden of zichtbaar maakt.

Ok, dan doe je het 'onchange' op de select in plaats van in bereken()

Overigens kan het ook wel met CSS (als je het over formatting hebt) maar dat is dan enkel cosmetisch. Het formulier wordt nog steeds volledig verzonden.

Dus ik denk niet dat je het slecht uitlegt, ik denk dat je het antwoord (niet gehinderd door de benonigde kennis) verkeerd interpreteert.

Ik vermoed dat het probleem misschien het feit is dat de berekening via javascript verloopt, en dat het hierdoor niet onzichtbaar gemaakt kan worden afhankelijk van je dropdownkeuze ?

Dat slaat namelijk ook echt als een tang op een varken. NOFI

[ Voor 31% gewijzigd door Room42 op 26-12-2016 20:31 ]

[Falcon10]

Ik ben min of meer op de goede weg denk ik, heb het op deze manier in de goede richting gekregen door de berekening volledig in java te laten gaan :

code:

var type_prices= new Array();
 type_prices["None"]=0;
 type_prices["Voorreservatie"]=0;
 type_prices["Bestelling"]=15;
 type_prices["Extra"]=10;

function calculateTotal()
{
    //Here we get the total price by calling our function
    //Each function returns a number so by calling them we add the values they return together
    var Price = getPrice() * getQuantity();
    
    //display the result
    var divobj = document.getElementById('totalPrice');
    
    //bijgedaan :
    if (var type_prices = "Voorreservatie") {
            divobj.style.display='none';
            }
            else {
    
            divobj.style.display='block';
            divobj.innerHTML = "Totaal prijs bestelling : " +Price + " euro";
            }

}

function hideTotal()
{
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='none';
}

Vermoed dat de echte programmeurs al zien waar het misloopt.

Bedoeling is dus als er een voorreservatie wordt gedaan, dat de tekst : 'totaal prijs bestellling Price euro" niet wordt weergegeven.
Ik heb hiervoor de if else ingevoegd om te controleren of bij de variabele filling_prices de waarde "Voorreservatie" gekozen is, echter loopt het daar mis denk ik, want nu doet hij zijn berekening niet meer.

Iemand die me kan zeggen hoe ik die if else moet aanpassen om de controle op de variabele type_prices te laten controleren of er gekozen is voor Voorreservatie of iets anders ?

[Caelorum]

je initialiseert nu een variabele in een if statement. Het initialiseren van een variabele, geeft als resultaat de variabele en dat evalueert naar true.
Wat je waarschijnlijk wilde doen was is checken of iets gelijk is met == of === en niet assignen =. Daarnaast heb je type_prices als een array gedefinieerd, maar daar wil je niet tegenaan checken. Je wilt het door de gebruiker gekozen type prijs hebben uit het select-input-element. Die zal je dus eerst moeten opzoeken, dan daar de waarde uithalen, dan checken of dit gelijk is aan "voorreservatie" met ==.

[Falcon10]

OK, snap ongeveer wat je bedoeld.

Hoe ziet dat er dan uit naar code toe ?

Men programmeerkennis is eigenlijk nihil, en had dit stuk code via google gevonden en wat aangepast.

[Room42]

JavaScript:

if (var type_prices == "Voorreservatie") {

Dus met ==, i.p.v. =.