Verfraaien van script
<script>
<!--
function install () {
var selectWat = ['bijlage1', 'bijlage2', 'bijlage3', 'bijlage4', 'bijlage5', 'bijlage6', 'bijlage7', 'bijlage8', 'bijlage9']; // id's+values van de elementen die in de select staan.
var selectCur;
for (x in selectWat) { // eerst allemaal hiden d.m.v. JS (als je dat via CSS doet, kunnen mensen die geen JS aanhebben je formulier niet invullen.
document.getElementById(selectWat[x]).style.display = 'none';
}
document.getElementById('wat').onchange = function (evt) {
if (selectCur !== undefined) { // als een element al word 'ge-showd', deze dan weer 'hiden'
document.getElementById(selectCur).style.display = 'none';
}
try {
document.getElementById(this.value).style.display = 'block'; // show een element
selectCur = this.value; // onthoud dat dit element geshowd word, zodat deze weer word ge-hide bij een andere keuze.
}
catch (e) { } // Stel dit element bestond niet, dan krijgen we nu geen error ;)
}
document.getElementById('wat').onchange(); // voor het geval er al één staat geselecteerd.
}
-->
</script>
<tr>Hoeveel bijlages toevoegen</tr>
<body onLoad="install();">
<select id="wat">
<option value="NULL"></option>
<option value="bijlage1">1x bijlage</option>
<option value="bijlage2">2x bijlage</option>
<option value="bijlage3">3x bijlage</option>
<option value="bijlage4">4x bijlage</option>
<option value="bijlage5">5x bijlage</option>
<option value="bijlage6">6x bijlage</option>
<option value="bijlage7">7x bijlage</option>
<option value="bijlage8">8x bijlage</option>
<option value="bijlage9">9x bijlage</option>
</select>
<div id="bijlage1">
<noscript>Vul dit in, als je wilt dansen:<br /></noscript>
<table><tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
</table>
</div>
<div id="bijlage2">
<noscript>Vul dit in, als je wilt zingen:<br /></noscript>
<table><tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
</table>
</div>
<div id="bijlage3">
<noscript>Vul dit in, als je iets anders wilt:<br /></noscript>
<table><tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
</table></div>
<div id="bijlage4">
<noscript>Vul dit in, als je iets anders wilt:<br /></noscript>
<table><tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
</table></div>
<div id="bijlage5">
<noscript>Vul dit in, als je iets anders wilt:<br /></noscript>
<table><tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
</table></div>
<div id="bijlage6">
<noscript>Vul dit in, als je iets anders wilt:<br /></noscript>
<table><tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
</table></div>
<div id="bijlage7">
<noscript>Vul dit in, als je iets anders wilt:<br /></noscript>
<table><tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
</table></div>
<div id="bijlage8">
<noscript>Vul dit in, als je iets anders wilt:<br /></noscript>
<table><tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
</table></div>
<div id="bijlage9">
<noscript>Vul dit in, als je iets anders wilt:<br /></noscript>
<table><tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
</table></div>
</body>
Met vriendelijke groet,
Johan
Om een setje de juiste richting op te geven:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<select id="wat">
<option value="NULL"></option>
<?php
$aantal_bijlages = 9;
for ($i = 1; $i <= $aantal_bijlages; $i++) { ?>
<option value="bijlage<?=$i;?>"><?=$i;?>x bijlage</option>
<? } ?>
</select>
<option value="NULL"></option>
<?php
$aantal_bijlages = 9;
for ($i = 1; $i <= $aantal_bijlages; $i++) { ?>
<option value="bijlage<?=$i;?>"><?=$i;?>x bijlage</option>
<? } ?>
</select>
2: verwijder de overbodige dingen
3: gebruik nieuwe elementen als <input type="number"> en correct html-elementen als <label>
4: gebruik PHP om dit te tonen (zoals Roy ook zegt).
Nu nog 3 regels Javascript erbij die automatisch een bepaalde tag kopieert als die erboven niet meer leg is:
(tag <fieldset> of zo?)
En dan krijg je ongeveer dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php
// define default
$aantal = 1;
if(isset($_POST['wat']) AND is_int($_POST['wat']))
{
$aantal = intval($_POST['wat']);
}
?>
<!doctype html>
<html>
<head>
<title>Testpagina, met refresh</title>
</head>
<body>
<form action="" method="POST">
<label for="wat">Hoeveel bijlages toevoegen</label>
<input type="number" name="wat" min="1" max="9" value="<?php echo $aantal; ?>">
<input type="submit" name="wijzig_aantal" value="»">
<?php
// make the input-fields
for($i = 1; $i <= $aantal; $i++)
{
echo '<fieldset>
<label for="attachment_' . $i . '[]">Bijlage #' . $i . ':</label>
<input name="attachment' . $i . '[]" type="file" size="30">
</fieldset>';
}
?>
<input type="submit" name="start_upload">
</form>
</body>
</html>
// define default
$aantal = 1;
if(isset($_POST['wat']) AND is_int($_POST['wat']))
{
$aantal = intval($_POST['wat']);
}
?>
<!doctype html>
<html>
<head>
<title>Testpagina, met refresh</title>
</head>
<body>
<form action="" method="POST">
<label for="wat">Hoeveel bijlages toevoegen</label>
<input type="number" name="wat" min="1" max="9" value="<?php echo $aantal; ?>">
<input type="submit" name="wijzig_aantal" value="»">
<?php
// make the input-fields
for($i = 1; $i <= $aantal; $i++)
{
echo '<fieldset>
<label for="attachment_' . $i . '[]">Bijlage #' . $i . ':</label>
<input name="attachment' . $i . '[]" type="file" size="30">
</fieldset>';
}
?>
<input type="submit" name="start_upload">
</form>
</body>
</html>
Let wel dat dit dus een goede pagina is, inclusief alles wat je nodig hebt.
Enige wat nog mist is een link naar je CSS.
Eddy Erkelens op 08/11/2012 20:53:45:
1: verwijder die tabel
2: verwijder de overbodige dingen
3: gebruik nieuwe elementen als <input type="number"> en correct html-elementen als <label>
4: gebruik PHP om dit te tonen (zoals Roy ook zegt).
Nu nog 3 regels Javascript erbij die automatisch een bepaalde tag kopieert als die erboven niet meer leg is:
(tag <fieldset> of zo?)
En dan krijg je ongeveer dit:
Let wel dat dit dus een goede pagina is, inclusief alles wat je nodig hebt.
Enige wat nog mist is een link naar je CSS.
2: verwijder de overbodige dingen
3: gebruik nieuwe elementen als <input type="number"> en correct html-elementen als <label>
4: gebruik PHP om dit te tonen (zoals Roy ook zegt).
Nu nog 3 regels Javascript erbij die automatisch een bepaalde tag kopieert als die erboven niet meer leg is:
(tag <fieldset> of zo?)
En dan krijg je ongeveer dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php
// define default
$aantal = 1;
if(isset($_POST['wat']) AND is_int($_POST['wat']))
{
$aantal = intval($_POST['wat']);
}
?>
<!doctype html>
<html>
<head>
<title>Testpagina, met refresh</title>
</head>
<body>
<form action="" method="POST">
<label for="wat">Hoeveel bijlages toevoegen</label>
<input type="number" name="wat" min="1" max="9" value="<?php echo $aantal; ?>">
<input type="submit" name="wijzig_aantal" value="»">
<?php
// make the input-fields
for($i = 1; $i <= $aantal; $i++)
{
echo '<fieldset>
<label for="attachment_' . $i . '[]">Bijlage #' . $i . ':</label>
<input name="attachment' . $i . '[]" type="file" size="30">
</fieldset>';
}
?>
<input type="submit" name="start_upload">
</form>
</body>
</html>
// define default
$aantal = 1;
if(isset($_POST['wat']) AND is_int($_POST['wat']))
{
$aantal = intval($_POST['wat']);
}
?>
<!doctype html>
<html>
<head>
<title>Testpagina, met refresh</title>
</head>
<body>
<form action="" method="POST">
<label for="wat">Hoeveel bijlages toevoegen</label>
<input type="number" name="wat" min="1" max="9" value="<?php echo $aantal; ?>">
<input type="submit" name="wijzig_aantal" value="»">
<?php
// make the input-fields
for($i = 1; $i <= $aantal; $i++)
{
echo '<fieldset>
<label for="attachment_' . $i . '[]">Bijlage #' . $i . ':</label>
<input name="attachment' . $i . '[]" type="file" size="30">
</fieldset>';
}
?>
<input type="submit" name="start_upload">
</form>
</body>
</html>
Let wel dat dit dus een goede pagina is, inclusief alles wat je nodig hebt.
Enige wat nog mist is een link naar je CSS.
Bedankt voor het meedenken, misschien was ik niet duidelijk genoeg geweest?
Het aantal bijlages mag niet wijzigen op basis van "Post". Het probleem is dat de reeds ingevulde waarde verdwijnen, vandaar dat ik het in JS wil. Misschien een nieuwe uitdaging?
Johan
Ik denk, wat traditioneel is, is om 1 zo'n element te hebben. Daaronder een knop/link "nog een bijlage toevoegen".
Een klik daarop voegt een nieuwe <input type="file"> toe, van onder. De gebruiker kan er zoveel bijmaken als gewenst.
Interesseert dit je?
Maar dat is iets heel anders inderdaad.
Je zou ook altijd een lege kunnen toevoegen: dus zodra er eentje in gebruik wordt genomen, maak je er eentje extra aan.
Uiteraard start je standaard met 3 (of 5) input-velden.
Ergens een knopje maken:
Code (php)
1
2
3
4
5
2
3
4
5
// voeg rij toe EN voeg daarna (voor alle inputs) nogmaals de datepicker toe
$(".add_datum").live("click", function() {
$("#tabel").append("<input type=\"text\" name=\"datum[]\" value=\"\" class=\"datepicker\"><input type=\"button\" class=\"add_datum\" value=\"+\">");
add_datepickers();
});
$(".add_datum").live("click", function() {
$("#tabel").append("<input type=\"text\" name=\"datum[]\" value=\"\" class=\"datepicker\"><input type=\"button\" class=\"add_datum\" value=\"+\">");
add_datepickers();
});
Is jQuery, maar wellicht gebruik je dat al. Zo niet, is dit aardig goed te herschrijven naar plain-js.
Gewijzigd op 09/11/2012 20:23:44 door Eddy E
http://goezinnen.eu/nuontest04.php staan, bovenstaand script is een deel hiervan.
Waar het mij om gaat is dat ik mijn formulier zo eenvoudig en zo kort mogelijk opbouw, wat resulteert in een overzichtelijk geheel. Ik ben niet zo thuis met JS, vandaar jullie hulp.
Ik sta open voor elke suggestie, alvast enorm bedankt
Ik heb mijn formulier op Waar het mij om gaat is dat ik mijn formulier zo eenvoudig en zo kort mogelijk opbouw, wat resulteert in een overzichtelijk geheel. Ik ben niet zo thuis met JS, vandaar jullie hulp.
Ik sta open voor elke suggestie, alvast enorm bedankt
Zet eens dit neer (op de plek waar je inputvelden net geweest zijn):
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<div id="bijlagen">
<input name="attachment[]" type="file" size="30">
<input name="attachment[]" type="file" size="30">
<input name="attachment[]" type="file" size="30">
</div>
<input type="button" id="extra_bijlage">
<script>
$("#extra_bijlage").live("click", function() {
$("#bijlagen").append("<input name="attachment[]" type="file" size="30">");
});
</script>
<input name="attachment[]" type="file" size="30">
<input name="attachment[]" type="file" size="30">
<input name="attachment[]" type="file" size="30">
</div>
<input type="button" id="extra_bijlage">
<script>
$("#extra_bijlage").live("click", function() {
$("#bijlagen").append("<input name="attachment[]" type="file" size="30">");
});
</script>
Let wel: jQuery nodig.
Ik zie nu dat je vaak tabellen in tabellen zet: dat is niet de manier. Probeer dat te voorkomen.
Gewijzigd op 10/11/2012 08:52:50 door Eddy E
Kris Peeters op 09/11/2012 11:29:37:
Je wil met javascript het aantal <input type="file"> kunnen aanpassen. Ja?
Ik denk, wat traditioneel is, is om 1 zo'n element te hebben. Daaronder een knop/link "nog een bijlage toevoegen".
Een klik daarop voegt een nieuwe <input type="file"> toe, van onder. De gebruiker kan er zoveel bijmaken als gewenst.
Interesseert dit je?
Ik denk, wat traditioneel is, is om 1 zo'n element te hebben. Daaronder een knop/link "nog een bijlage toevoegen".
Een klik daarop voegt een nieuwe <input type="file"> toe, van onder. De gebruiker kan er zoveel bijmaken als gewenst.
Interesseert dit je?
JA, dat is wat ik bedoel, kan je voor mij een opzetje maken, alvast bedankt.
Omdat je geen duidelijke structuur hebt in je formulier kon ik het niet 1-2-3 voor je erin zetten.
Eddy, ik krijg een symtaxisfoutmelding in regel 10
Johan Goezinnen op 10/11/2012 09:43:48:
Eddy, ik krijg een symtaxisfoutmelding in regel 10
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<div id="bijlagen">
<input name="attachment[]" type="file" size="30">
<input name="attachment[]" type="file" size="30">
<input name="attachment[]" type="file" size="30">
</div>
<input type="button" id="extra_bijlage">
<script>
$("#extra_bijlage").live("click", function() {
$("#bijlagen").append("<input name="attachment[]" type="file" size="30">");
});
</script>
<input name="attachment[]" type="file" size="30">
<input name="attachment[]" type="file" size="30">
<input name="attachment[]" type="file" size="30">
</div>
<input type="button" id="extra_bijlage">
<script>
$("#extra_bijlage").live("click", function() {
$("#bijlagen").append("<input name="attachment[]" type="file" size="30">");
});
</script>
je moet ff dubbele quotes veranderen in enkele quotes:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<div id="bijlagen">
<input name="attachment[]" type="file" size="30">
<input name="attachment[]" type="file" size="30">
<input name="attachment[]" type="file" size="30">
</div>
<input type="button" id="extra_bijlage">
<script>
$("#extra_bijlage").live("click", function() {
$("#bijlagen").append('<input name="attachment[]" type="file" size="30">');
});
</script>
<input name="attachment[]" type="file" size="30">
<input name="attachment[]" type="file" size="30">
<input name="attachment[]" type="file" size="30">
</div>
<input type="button" id="extra_bijlage">
<script>
$("#extra_bijlage").live("click", function() {
$("#bijlagen").append('<input name="attachment[]" type="file" size="30">');
});
</script>
Thanks, foutmelding is weg, maar ik krijg geen nieuwe file indien ik op de button klik
Heb je jQuery ingeladen?
Het werkt en ik benr er zeer blij mee. Nu kan ik het formulier aanpassen.
Ik wil een ieder enorm bedanken.
Excuses voor de enkele haakjes. Ik echo deze PHP-code, dus had de " geëscaped met \.
Mooi dat het nu wel werkt.
Nog wel 1 tip: je formulier is wel heel ingewikkeld. Dat kan logischer/eenvoudiger. Wie gaat dit invullen? Als het mensen zijn, kan het wel wat eenvoudiger hoor. Kost je wel meer ruimte.
Je geeft aan dat het logischer/eenvoudiger kan, kan je aangeven hoe en wat?
Alvast bedankt,
Maak stukken (met <section>) en geef die een redelijke omschrijving. Liefst nog een <h2> of <h3> bovenaan.
En dan steeds links het label (met <label for=""> dus) en rechts de input (<input type="....">) steeds.
Wel zo overzichtelijk. En voor het snel invullen hoef je het niet te doen, want daarvoor is dit te veel informatie.
Toevoeging op 10/11/2012 14:23:25:
Dus zoiets:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<charset="iso-8859-1">
<title>Nuonrichtlijninformatie formulier</title>
<link rel="stylesheet" href="nuontest04.css">
<script src="nuontest04.js"></script>
</head>
<body>
<h1>Richtlijn informatievoorziening Nuon Warmte</h1>
<form method="post" action="nuontest04.php" enctype="multipart/form-data" name="phmailer" onsubmit="return Checkit(this);">
<section class="aanvrager">
<h2>Gegevens Aanvrager</h2>
<!-- emailadres -->
<label for="yourEmail">E-mailadres:</label>
<input type="text" name="yourEmail">
<!-- adres -->
<label for="perceel_adres">Straatnaam:</label>
<input type="text" name="perceel_adres">
<!-- huisnummer -->
<label for="perceel_huisnummer">Huisnummer:</label>
<input type="text" name="perceel_huisnummer" maxlength="5">
<!-- bedrijfsnaam -->
<label for="bedrijfsnaam">Bedrijfsnaam:</label>
<input type="text" name="bedrijfsnaam" maxlength="100">
<!-- hier de rest van je aanvrager-gegevens
en hier
en hier
en hier
-->
</section>
<section class="opdracht">
<h2>Opdracht</h2>
<!-- projectomschrijving -->
<label for="projectomschrijving">Projectomschrijving:</label>
<input type="text" name="projectomschrijving" maxlength="50">
<!-- projectnummer -->
<label for="projectnummer">Projectnummer:</label>
<input type="text" name="projectnummer" maxlength="50">
<!-- meer hier
en hier
en hier
en hier
-->
</section>
<section class="berekening">
<h2>Warmte- en Leidingverliesberekening</h2>
<!-- transmissieverlies -->
<label for="transmissieverlies">Transmissieverlies Phi T [Watt]:</label>
<input type="text" name="transmissieverlies" maxlength="50">
<!-- meer hier
en hier
en hier
en hier
-->
</section>
<section class="attachments">
<h2>Eventuele bijlagen</h2>
<label for="attachment">Uw bijlagen
<br>
<b>Toegestane file types:</b> zip, rar, txt, doc, jpg, png, gif, odt, xml, pdf, xls, dwg, docx, xlsx
<br>
<b>Max grote per file:</b> 8192kb.
<br>
<b>Max totale grote van de bijlages:</b> 8192kb.</label>
<fieldset id="attachment_placing">
<input name="attachment[]" type="file">
<input name="attachment[]" type="file">
<input name="attachment[]" type="file">
</fieldset>
<input type="button" id="add_attachments" value="Voeg meer bijlagen toe...">
</section>
<section class="submitting">
<h2>Verzenden van formulier</h2>
<input type="hidden" name="submit" value="true">
<input type="submit" value="Verzenden">
</section>
</form>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<charset="iso-8859-1">
<title>Nuonrichtlijninformatie formulier</title>
<link rel="stylesheet" href="nuontest04.css">
<script src="nuontest04.js"></script>
</head>
<body>
<h1>Richtlijn informatievoorziening Nuon Warmte</h1>
<form method="post" action="nuontest04.php" enctype="multipart/form-data" name="phmailer" onsubmit="return Checkit(this);">
<section class="aanvrager">
<h2>Gegevens Aanvrager</h2>
<!-- emailadres -->
<label for="yourEmail">E-mailadres:</label>
<input type="text" name="yourEmail">
<!-- adres -->
<label for="perceel_adres">Straatnaam:</label>
<input type="text" name="perceel_adres">
<!-- huisnummer -->
<label for="perceel_huisnummer">Huisnummer:</label>
<input type="text" name="perceel_huisnummer" maxlength="5">
<!-- bedrijfsnaam -->
<label for="bedrijfsnaam">Bedrijfsnaam:</label>
<input type="text" name="bedrijfsnaam" maxlength="100">
<!-- hier de rest van je aanvrager-gegevens
en hier
en hier
en hier
-->
</section>
<section class="opdracht">
<h2>Opdracht</h2>
<!-- projectomschrijving -->
<label for="projectomschrijving">Projectomschrijving:</label>
<input type="text" name="projectomschrijving" maxlength="50">
<!-- projectnummer -->
<label for="projectnummer">Projectnummer:</label>
<input type="text" name="projectnummer" maxlength="50">
<!-- meer hier
en hier
en hier
en hier
-->
</section>
<section class="berekening">
<h2>Warmte- en Leidingverliesberekening</h2>
<!-- transmissieverlies -->
<label for="transmissieverlies">Transmissieverlies Phi T [Watt]:</label>
<input type="text" name="transmissieverlies" maxlength="50">
<!-- meer hier
en hier
en hier
en hier
-->
</section>
<section class="attachments">
<h2>Eventuele bijlagen</h2>
<label for="attachment">Uw bijlagen
<br>
<b>Toegestane file types:</b> zip, rar, txt, doc, jpg, png, gif, odt, xml, pdf, xls, dwg, docx, xlsx
<br>
<b>Max grote per file:</b> 8192kb.
<br>
<b>Max totale grote van de bijlages:</b> 8192kb.</label>
<fieldset id="attachment_placing">
<input name="attachment[]" type="file">
<input name="attachment[]" type="file">
<input name="attachment[]" type="file">
</fieldset>
<input type="button" id="add_attachments" value="Voeg meer bijlagen toe...">
</section>
<section class="submitting">
<h2>Verzenden van formulier</h2>
<input type="hidden" name="submit" value="true">
<input type="submit" value="Verzenden">
</section>
</form>
</body>
</html>
Let wel dat ik niet alle velden erin heb gezet.
Uiteraard de Javascript in een los bestand (kijk even naar de <head>).
En de opmaak (de CSS) ook.
De <span>*</span> zet je steeds na elke <input>.
Prima, maar aangezien je die toch met Javascript gaat bewerken, zet die dan ook neer via Javascript.
Gewoon iedere <input> een <span class="errormessage">*</span> aan appenden.
Zie de jQuery-code die ik je gaf.