[js] bestel formulier.

[Verwijderd]

Dag mensen ik zit met een probleem.

Voor een opdrachtgever moet ik voor de zoveelste keer het bestel formulier aanpassen en dat is opzich natuurlijk niet zo'n probleem maar mijn opdrachtgever wil steeds meer hehe.

Ik zal eens uitleggen wat ik nu heb.

De opbouw van het bestel formulier op dit moment is eingelijk heel simpel, ik heb alleemaal divjes die ik op hidden heb, wanneer de user op een bepaalde item klikt verschijnt het bijpassende divje omdat ik die dan weer op visable zet.

voorbeeld

code:

<form method="post" name="frm">
<table border="0">
    <tr>
        <td>Maak uw keuze uit een van de volgende producten<br>
        <select name="stap1" onChange="xx(this.options[this.selectedIndex].value); set(this.options[this.selectedIndex].text);" style="width: 150px">
            <option>Kies een product</option>
            <option value="p">Pantalon</option>
            <option value="c">Colbert</option>
            <option value="v">Vest</option>
            <option value="o">Overhemd</option>
        </select><input type="hidden" name="stap1temp" value="">&nbsp;<input type="button" value="Herstel" onClick="location.href='producten.php';">
        </td>
    </tr>
    <tr>
        <td><div id="p_step2" style="width:100%;display:none;"><br>
            <strong>Model</strong>:<br>
            <input type="radio" name="stap2" value="bandplooi" onclick="x('p_step3');"> bandplooi<br>
            <input type="radio" name="stap2" value="recht model" onclick="xxx('p_step4', 'p_step3');"> recht model
        </div></td>
    </tr>
    <tr>
        <td><div id="p_step3" style="width:100%;display:none;">
            <strong>Bandplooien</strong>:<br>
            <input type="radio" name="stap3" value="1 plooi" onclick="x('p_step4');">1 plooi<br>
            <input type="radio" name="stap3" value="2 plooien" onclick="x('p_step4');">2 plooien<br>
            <input type="radio" name="stap3" value="3 plooien" onclick="x('p_step4');">3 plooien 
        </div></td>
    </tr>
    <tr>
        <td><div id="p_step4" style="width:100%;display:none;">
            <strong>Omslag</strong>:<br>
            <input type="radio" name="stap4" value="met omslag" onclick="xPic('p_step6', 'bandl omslag');"> met omslag<br>
            <input type="radio" name="stap4" value="zonder omslag" onclick="xPic('p_step6', 'bandl zonder omslag');"> zonder omslag
        </div></td>
    </tr>
    <tr>
        <td><div id="p_step6" style="width:100%;display:none;">
            <strong>Voering</strong>:<br>
            <input type="radio" name="stap6" value="voering standaard" onclick="x('final_step');"> standaard voering<br> 
            <input type="radio" name="stap6" value="satijnen voering" onclick="x('voering_step');"> satijnen voering 
        </div></td>
    </tr>
</form>

zoals je ziet heb ik meerdere kleine subroutines die of het divje laten zien en of het divje en een plaatje laten zien...

x('voering_step') moet zorgen dat voering_step visable wordt en dat de user dat kan invoeren.
xPic('p_step6', 'bandl omslag') laat de div p_step6 zien en het plaatje bandl omslag.jpg

en ga zo maar door, maar nu wil mijn opdrachtgever het volgende.

Hij wil bij alle onderdelen prijzen hebben, dat valt met deze optie niet te verwerken dus zit ik te denken aan een array gestuurd formulier maar hier heb ik echter nog geen echte ervaring mee en wil dus graag wat tips van jullie.

Heeft dus iemand een idee hoe ik dit bestel formulier dynamisch kan maken zodat wanneer ik producten wil toevoegen met de 'specificaties', dit gewoon door een simpele toevoeging aan een array te verwezelijken is en dat het mogelijk is per 'onderdeel' een prijs er aan vast te knopen.

Alvast bedankt voor het lezen van dit topic, mochten er vragen zijn stel deze dan want in het algemeen ben ik niet zo goed in het schrijven van lange texten..

[Verwijderd]

ik snap niet helemaal wat je probleem nou is, maar kijk even wat dhtml resources na zou ik zeggen, alles is mogelijk

en verder: verdiep je eens wat meer in html, met name, fieldset, legend, en label elementen, gooi die tabel eruit, dan wordt de boel meteen al een heel stuk netter

[JayVee]

offtopic:
Volgende keer dus een betere specificatie schrijven en de opdrachtgever laten ondertekenen. En in het contract schrijf je dat alle wijzigingen tegen uurloon gemaakt worden. Anders blijf je maar van die kleine wijzigingen doorvoeren (ook als het product klaar is om opgelevert te worden of zelfs nog na oplevering).

Dan denken opdrachtgevers ineens eerder mee bij het ontwerpprocess en hoef je niet constant dingen uit te breiden, aan te passen of zelfs te schrappen! Werkt stuk makkelijker! Suc6!

[Verwijderd]

Gelukkig is dit bedrijf van een vriend en doe ik dit gewoon kosteloos (half) maar wil nu gewoon eens een goede opzet voor een bestel formulier in javascript, ik ben geen echte database nodig zoals mysql maar gewoon een simpel aan te passen iets.

Zoals jullie mischien wel zien trigert de ene optie (van meerdere opties) weer andere mogelijke optie(s), enzovoorts. nu wil ik dit vastleggen op een andere manier.

mophor; hoe bedoel je met het tabel verwijderen? heb je mischien een wat diepere uitleg m.b.t de mogelijke te gebruiken elementen?.... en mischien heb je zelfs een voorbeeldje...

[Verwijderd]

voorbeeldje van een (heel simpel) form zonder tabellen, die wat semantisch correcter in elaar zit: http://www.rikkertkoppes.com/brain/login.asp

(let niet op die cancel knop )

[Verwijderd]

ziet er goed uit mophor; maar wat kan dat betekenen voor mijn toekomstige interactive bestel formulier?

[Verwijderd]

nou, dat het allemaal heel wat simpeler en gestructureerder kan dan wat jij nu doet. En het is allemaal wat corrcter html.

De code kan je wel eventueel door een asp / php laten genereren of met wat dhtml als je echt heel generiek bezig wil gaan zijn

[Verwijderd]

klopt, daarin heb je helemaal gelijk maar ik zie niet hoe ik dmv het toevoegen van nettere html het verbeteren van mijn script kan realiseren. Heeft iemand mischien een idee hoe het werkt met geneste array's?.....

[Cavorka]

www.autotrader.nl > zoeken > uitgebreid zoeken

Is dat niet wat je bedoelt? Je selecteert een bepaalde groep (Merk) en alles sub-groepen (types) worden beschikbaar. Ik heb het script een paar dagen geleden eruit gesloopt en het werkt zeer eenvoudig als je je lijsten (javascript array's) op laat bouwen door PHP / ASP.

PS: Ik kan die link van Mophor niet checken op het moment (internet restricties op werk), dus misschien lijkt dit een dubbelpost.

[ Voor 3% gewijzigd door Cavorka op 03-07-2004 10:47 ]

[Verwijderd]

Cavorka; wat je laat zien is niet geheel wat ik bedoel. Ik bedoel dat wanneer je een antwoord triggert (bv 1 dat je dan bv de opties van antwoord 3 te zien krijgt ipv antwoord2).. klinkt vaag maar weet niet hoe ik het anders moet uitleggen..

[djluc]

Verwijderd schreef op 03 juli 2004 @ 11:35:
Cavorka; wat je laat zien is niet geheel wat ik bedoel. Ik bedoel dat wanneer je een antwoord triggert (bv 1 dat je dan bv de opties van antwoord 3 te zien krijgt ipv antwoord2).. klinkt vaag maar weet niet hoe ik het anders moet uitleggen..

Ik zie je probleem niet echt. Je maakt gewoon een array van de antwoorden in de select. Je vangt het onchange event af en kijkt welke volgende vraag hoort bij het geselecteerde antwoord. Meer is het toch niet?

[Verwijderd]

ja gewoon voor jou is buitengewoon voor mij; heb je mischien materiaal waaruit ik die informatie kan halen of waarmee ik mijn begin kan ontwikkelen.

[djluc]

Verwijderd schreef op 03 juli 2004 @ 14:20:
ja gewoon voor jou is buitengewoon voor mij; heb je mischien materiaal waaruit ik die informatie kan halen of waarmee ik mijn begin kan ontwikkelen.

Heel simpel voorbeeldje om het idee duidelijk te maken:
//geen correcte code!

JavaScript:

var items=new Array();
//array met alle waarden en de volgende vraag id's
items[0]=5;

//functie aanroepen in de onchange van de select
function selectchanged(){
  //neem het geselecteerde antwoord
  var id=selectbox.options[selectbox.selectedIndex];
  var next=items[id];
  //laat de juiste vraag zien
  document.getElementById('vraag'+next).style.visible=true;
}

[Verwijderd]

hmmm... ziet er op zich wel weer logisch uit maar omvat niet geheel wat ik in mijn gedachten heb.

Heb meer iets in gedachten dat ik in een array in javascript de producten met elkaar verbind, maar dan ook dat alle onderdelen in array's staan... al lijkt me dat nu ik er wat dieper overnadenk wel iets pittiger dan dat ik voorheen had gedacht... maar ik ga eens kijken wat gaat lukken.

Bedankt.