met button gegevens invoeren in formulier

Door remco op 28-10-2008 22:34

566 views

hallo

ik zit even met het volgende;

ik heb een pagina gemaakt met daar op een formulier. op dat formulier komt een datumveld. de datum die in gevuld dient te worden is 6 van de 10 keer de datum van vandaag. om het de gebruiker wat makkelijker te maken wilde ik een button maken die "automatisch" de datum van vandaag invult...
hoe pak ik dit aan??
ik hoop dat mijn probleem stelling duidelijk is...

wie kan mij een zetje in de goede richting geven..

Jan Koehoorn

28-10-2008 22:42


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>
	<script type="text/javascript" src="mootools/mootools.js"></script>
	<script type="text/javascript">
		window.addEvent ('domready', function () {
			$('vandaag').addEvent ('click', function () {
				var vandaag = new Date ();
				var maandnummer = vandaag.getMonth ();
				if (maandnummer < 10) maandnummer = '0' + maandnummer;
				var dagnummer = vandaag.getDay ();
				if (dagnummer < 10) dagnummer = '0' + dagnummer;
				$('datum').set ('value', vandaag.getFullYear () + '-' + maandnummer + '-' + dagnummer);
			});
		});
	</script>
</head>

<body>
	<form method="post" action="">
		<label for="datum">datum:</label>
		<input id="datum" name="datum" type="text" value="" />
		<input id="vandaag" type="button" value="vandaag" />
	</form>
</body>
</html>

Werkend voorbeeld: http://www.jankoehoorn.nl/js_vandaag.php

Robert Deiman

28-10-2008 22:44

Dat is ook een optie, ik kies er zelf vaak voor dat een gebruiker het datumveld leeg kan laten, dan wordt de huidige datum gebruikt (via PHP dus) en wanneer er wel een datum wordt ingevuld wordt gekeken hoe die is opgebouwd en er een geldige SQL datum van gemaakt.

remco

28-10-2008 22:47

das precies wat ik bedoel!

ik was er met een beetje google-en al echter dat dit uit zou draaien op een javascriptje en das helaas niet mn sterkste punt, maar hiermee kom ik er wel uit...

mijn dank is groot!

Jan Koehoorn

28-10-2008 22:56

@ remco: let wel op; mijn script maakt gebruik van mootool.js
Dat bestand heb je dus ook nodig.

remco

28-10-2008 23:15

ah bedankt voor de tip!

ik ga er morgen eens mee aan de gang, voor vandaag stop ik er mee..

laat wel even weten of het lukt!

Jan Koehoorn

28-10-2008 23:18

Okee, graag gedaan tot zover ;-)

PHP Newbie

28-10-2008 23:42

@Jan,

Ik ben er meestal voor om een button waar een javascript actie aan hangt, ook te schrijven met javascript. Iemand die javascript uit heeft staan zal op die manier geen button te zien krijgen die niets doet.

Jan Koehoorn

28-10-2008 23:52

Het is een idee, maar dan krijg je natuurlijk wel veel overheadcode als je veel buttons hebt. Ik zou ze dan eerder een class geven en de display op none zetten. Via JavaScript kun je dan alle elementen met de goede class zichtbaar maken op het domready event.

Terence Hersbach

29-10-2008 00:35

@Jan, met mootools kan je ook heel makkelijk buttons maken en plaatsen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="mootools/mootools.js"></script>
    <script type="text/javascript">
        window.addEvent ('domready', function () {
        	new Element('input', {
        		'type' : 'button',
        		'events' : {
        			'click' : function () {
		                var vandaag = new Date ();
		                var maandnummer = vandaag.getMonth ();
		                if (maandnummer < 10) maandnummer = '0' + maandnummer;
		                var dagnummer = vandaag.getDay ();
		                if (dagnummer < 10) dagnummer = '0' + dagnummer;
		                $('datum').set ('value', vandaag.getFullYear () + '-' + maandnummer + '-' + dagnummer);
		            }
        		},
        		value : 'Vandaag'
        	}).inject('datum','after');
            
        });
    </script>
</head>

<body>
    <form method="post" action="">
        <label for="datum">datum:</label>
        <input id="datum" name="datum" type="text" value="" />
    </form>
</body>
</html>

edit: voorbeeldje

Reageren

Inloggen om te reageren