Formulier ontwerpen met formules. Hulp nodig...

sandyvaneldonk · 1 aug 2012

Zou iemand mij kunnen helpen?

Ik wil graag een formulier ontwerpen met formules en skip velden. Dit houdt het volgende in.

De invuller ziet vraag 1. Hij of zij kan kiezen tussen antwoord a,b of c. Bij antwoord a gaat hij door naar vraag 2. Bij antwoord b gaat hij door naar vraag 7 en bij antwoord c gaat hij door naar vraag 15.

Is zoiets mogelijk?

Daarnaast wil ik bij bijvoorbeeld vraag 4 de mogelijkheid hebben tot een formule. Ik wil hier graag automatisch km bereken. Stel hij vult hier 180 zakelijke km's, dan moet die automatisch worden vermendigvuldigd met 0,16. Maar stel dat hij invult 90 prive km's, dan moet dit worden vermendigvuldigd worden met 0,40. Dit mag uiteraard in tabel vorm of net wat.

Om zo'n formulier te hebben, is het denk het beste om een javascript of html script te schrijven, toch?

grumbkow · 1 aug 2012

Dit is zeer goed mogelijk.
De opbouw van het formulier (het uiterlijk, de plaatsing etc.) schrijf je inderdaad in HTML/CSS

Makkelijk vind ik zelf om de controles te doen in jQuery.
Dit is een javascript library die javascript code makkelijker te schrijven maakt en meer mogelijkheden biedt, althans meer makkelijke mogelijkheden.

Indien je de resultaten ook wilt opslaan e.d. zul je er ook nog PHP bij moeten gebruiken.

Als ik jou was zou ik beginnen met de HTML om een formulier te maken.
Gebruikt aub geen online form builder ofzo, maar zoek het even uit en maak het, zo gedaan

Hier een prima plek om te beginnen
http://www.w3schools.com/html/html_forms.asp
Als je dat hebt gedaan moet je nadenken hoe je wilt dat het formulier werkt.
Je kunt de gebruiker bijvoorbeeld elke keer doorsturen naar een andere pagina,
of je kunt elke vraag onzichtbaar maken en de correcte vraag op het juiste moment zichtbaar maken.

Misschien een beetje wazig zo, maar we horen het wel

sandyvaneldonk · 1 aug 2012

Bedankt voor de link. Ik denk dat ik hiermee wel kan proberen om een formulier te schrijven. De vraag is alleen hoe ik hierin de formules kan verwerken. Moet ik daarvoor een javascript zoeken online? of begrijp ik het nu helemaal verkeerd,

grumbkow · 1 aug 2012

sandyvaneldonk zei:
Bedankt voor de link. Ik denk dat ik hiermee wel kan proberen om een formulier te schrijven. De vraag is alleen hoe ik hierin de formules kan verwerken. Moet ik daarvoor een javascript zoeken online? of begrijp ik het nu helemaal verkeerd,

Dat kan inderdaad met Javascript, maar dat is voor latere zorg.
Niet te veel tegelijk doen.

Als het formulier er staat, dus alle vragen met antwoordmogelijkheden etc. gaan we DAARNA zorgen dat het ook daadwerkelijk een functie heeft

P.s. Bij het maken van het formulier zorg dat alle elementen (dus de antwoorden) goed van elkaar gescheiden zijn met het name attribuut en geef de elementen ook een id mee die hetzelfde is als de name.

Op die manier kun je later in de javascript makkelijk de elementen van elkaar scheiden dus een tekstveld bij vraag 3 zou als volgt kunnen zijn.

Code:

<input type="text" name="antwoordVraag3" id="antwoordVraag3">

sandyvaneldonk · 1 aug 2012

Geweldig. Ik ga er vanavond gelijk mee aan de slag. Bedankt alvast

sandyvaneldonk · 2 aug 2012

Ik ben aan de slag gegaan, maar het is lastiger dan ik dacht. Ik ben namelijk gewend om formulieren te ontwerpen in RSform.
Ik ben nu begonnen met een opzetje, maar weet helemaal niet of ik goed op weg ben.

Dit is wat ik nu heb:

<form sizcache="38" sizset="0">
<p>Voornaam:    <input name="Voornaam" type="text" /><br />Achternaam: <input name="achternaam" form="" type="text" /></p>
<table border="1" sizcache="38" sizset="0">
<tbody sizcache="38" sizset="0">
<tr>
<td>Datum            </td>
<td>Omschrijving           </td>
<td>Hotel & Brandstof</td>
<td>Brandstof          </td>
<td>Openbaar vervoer</td>
<td>Diversen</td>
<td>Totaal</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
<p><input value="Verzenden" type="submit" /></p>
</form>

grumbkow · 2 aug 2012

Je hebt nergens tabellen voor nodig.
Kun je in excel of paint e.d. uitschetsen wat je wilt hebben?

Dan zal ik een voorbeeldje voor je maken.

sandyvaneldonk · 3 aug 2012

Bekijk bijlage Formulier onkosten.XLS

Kun je het zo openen?

Bedankt dat je me op gang wilt helpen, ik weet echt niet hoe ik moet beginnen

grumbkow · 4 aug 2012

Hier is een klein voorbeeld van hoe het zou kunnen zijn.
Als je op de knop klikt wordt een een stukje jQuery aangeroepen die een veld toevoegt om in te vullen.

Ik hoop dat je hiermee verder uit de voeten komt.
Nadat het formulier geheel staat moeten we uiteraard gaan kijken naar de formules en het versturen van het formulier via PHP

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Formulier onkosten</title>
	<style type="text/css">
		* { margin: 0; padding: 0; }
			#wrapper { posistion: relative; width: 800px; margin: 50px auto; }
				p { position: relative; margin: 30px; font-size: 14px; }
				form { position: relative; line-height: 40px; font-size: 14px; margin: 30px; }
					label { display: inline-block; position: relative; width: 120px; }
					input[type="text"] { position: relative; height: 25px; padding-left: 5px; }
					input.large { width: 195px; }
					input.small { width: 95px; margin-right: 10px; }
					.kostenPost label { width: auto!important; margin-right: 10px; }
					.kostenPost input { margin-right: 10px; }
				a { position: relative; display: inline-block; width: 230px; height: 30px; background: #333333; color: #ffffff; text-decoration: none; line-height: 30px; text-align: center; top: 30px; }
	</style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
		$(document).ready(function()
		{
			$('#newKosten').click(function()
			{
				$('#kostenPosten').append('<div class="kostenPost"><label for="kpDatum[]">Datum:</label><input type="text" name="kpDatum[]" id="kpDatum[]" /><label for="kpOmschrijving[]">Omschrijving:</label><input type="text" name="kpOmschrijving[]" id="kpOmschrijving[]" /></div>');
				return false;
			});
		});
	</script>
</head>

<body>
	<div id="wrapper">
        <p>
            Voor kilometerdeclaratie dient u het formulier "KILOMETERDECLARATIE" te gebruiken<br />
            Bij overige declaraties (Hotel & maaltijden t/m diversen) bedrag + valuta vermelden: 
        </p>
        <form action="" method="post">
            <label for="foNaam">Naam:</label><input type="text" id="foNaam" name="foNaam" class="large" /><br />
            <label for="foWoonplaats">Woonplaats:</label><input type="text" id="foWoonplaats" name="foWoonplaats" class="large" /><br />
            <label for="foAfdeling">Afdeling:</label><input type="text" id="foAfdeling" class="large" /><br />
            <label for="foPeriode">Periode</label><label for="foJaar">Jaar</label><br />
            <input type="text" id="foPeriode" name="foPeriode" class="small" /><input type="text" id="foJaar" name="foJaar" class="small" />
            <div id="kostenPosten">
				Kostenposten
            </div>
            <a href="#" id="newKosten">Nieuwe kostenpot toevoegen</a><br />
            <br />
            <input type="submit" name="foSubmit" value="Verstuur" />
        </form>
	</div>
</body>
</html>

sandyvaneldonk · 6 aug 2012

Wat je hebt gemaakt ziet er echt wel gaaf uit.

Begrijp ik goed dat dit gedeelte alleen nog maar html is?

(misschien toch een goed idee om eens een html studie te gaan volgen).

Maar nu komt het moeilijke gedeelte...hoe moet ik dit omzetten naar php?

(het is alleen wel jammer, dat de hele pagina verspring. Ik moet nog wel even kijken hoe ik dit aan doe passen in de oorspronkelijke 500px)

grumbkow · 6 aug 2012

Dat doe je met de css.
Dit is slechts HTML ja.
HTML geeft aan je browser aan welke elementen er op de pagina staan, CSS geeft de browser door hoe deze er uit moeten zien en waar ze moeten komen te staan.
Javascript geeft je interactie met de browser en PHP geeft je interactie met de server.

Je hoeft het formulier niet om te zetten een formulier blijft gewoon HTML.
Je moet een PHP bestand aanmaken welke opvangt of het formulier verzonden is en zo ja de gegevens verwerkt.

Ik kan dit alles in een uurtje voor je bouwen, maar het is boeiender als je er zelf ook wat mee doet.
Het is tenslotte een helpmij forum en geen freelance forum

sandyvaneldonk · 6 aug 2012

Dat klopt, daarom lijkt het mij ook verstandiger om een cursus te gaan volgen, want ik kan je nu al bijna niet volgen

Ik ga gewoon op zoek naar een training html, css, javascript en php. Als ik dat allemaal heb gevolgd, dan kom ik een beetje bij jouw in de buurt

Bedankt in ieder geval voor al je hulp

Formulier ontwerpen met formules. Hulp nodig...

sandyvaneldonk

Gebruiker

grumbkow

Gebruiker

sandyvaneldonk

Gebruiker

grumbkow

Gebruiker

sandyvaneldonk

Gebruiker

sandyvaneldonk

Gebruiker

grumbkow

Gebruiker

sandyvaneldonk

Gebruiker

grumbkow

Gebruiker

sandyvaneldonk

Gebruiker

grumbkow

Gebruiker

sandyvaneldonk

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy