Verfraaien van script

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Johan Goezinnen

Johan Goezinnen

08/11/2012 18:28:32
Quote Anchor link
Ik heb een script gemaakt, wat goed werkt, echter is wel bewerkelijk. Het moet makkelijker kunnen. Kan iemand mijn een tip geven om dit anders aan te pakken, of kan iemand mijn script zo aanpassen dat het qua werking identiek is. Alsvast enorm bedankt.

<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
 
PHP hulp

PHP hulp

22/12/2024 09:30:34
 
Roy -

Roy -

08/11/2012 19:25:48
Quote Anchor link
Zet je code even tussen code tags.
Om een setje de juiste richting op te geven:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
 
Eddy E

Eddy E

08/11/2012 20:53:45
Quote Anchor link
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:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<?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="&raquo;">

            <?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.
 
Johan Goezinnen

Johan Goezinnen

09/11/2012 09:47:44
Quote Anchor link
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:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<?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="&raquo;">

            <?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
 
Kris Peeters

Kris Peeters

09/11/2012 11:29:37
Quote Anchor link
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?
 
Eddy E

Eddy E

09/11/2012 19:55:02
Quote Anchor link
Dat heb ik ook inderdaad.
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)
PHP script in nieuw venster Selecteer het PHP script
1
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();
        });


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
 
Johan Goezinnen

Johan Goezinnen

09/11/2012 20:28:13
Quote Anchor link
Ik heb mijn formulier op 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
 
Eddy E

Eddy E

09/11/2012 21:19:28
Quote Anchor link
Als je wilt limiteren tot 9 bijlagen, waarom dan niet gewoon (heel statisch) 9 input-velden weergeven? Mensen gaan ze echt niet allemaal aanvullen tot ze allemaal vol zijn hoor.

Zet eens dit neer (op de plek waar je inputvelden net geweest zijn):

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>

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
 
Johan Goezinnen

Johan Goezinnen

10/11/2012 08:19:58
Quote Anchor link
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?


JA, dat is wat ik bedoel, kan je voor mij een opzetje maken, alvast bedankt.
 
Eddy E

Eddy E

10/11/2012 08:51:29
Quote Anchor link
Kijk even naar mijn vorige post.... Dat doet exact wat je wilt. Alleen even inbouwen.
Omdat je geen duidelijke structuur hebt in je formulier kon ik het niet 1-2-3 voor je erin zetten.
 
Johan Goezinnen

Johan Goezinnen

10/11/2012 09:43:48
Quote Anchor link
Eddy, ik krijg een symtaxisfoutmelding in regel 10
 
Bo Ter Ham

Bo Ter Ham

10/11/2012 09:58:09
Quote Anchor link
Johan Goezinnen op 10/11/2012 09:43:48:
Eddy, ik krijg een symtaxisfoutmelding in regel 10

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


je moet ff dubbele quotes veranderen in enkele quotes:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
 
Johan Goezinnen

Johan Goezinnen

10/11/2012 10:09:03
Quote Anchor link
Thanks, foutmelding is weg, maar ik krijg geen nieuwe file indien ik op de button klik
 
Bo Ter Ham

Bo Ter Ham

10/11/2012 10:11:43
Quote Anchor link
Heb je jQuery ingeladen?
 
Johan Goezinnen

Johan Goezinnen

10/11/2012 11:15:45
Quote Anchor link
Oeps, vergeten.

Het werkt en ik benr er zeer blij mee. Nu kan ik het formulier aanpassen.
Ik wil een ieder enorm bedanken.
 
Eddy E

Eddy E

10/11/2012 11:37:59
Quote Anchor link
Graag gedaan.
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.
 
Johan Goezinnen

Johan Goezinnen

10/11/2012 13:50:12
Quote Anchor link
Eddy, zoals je wel hebt gemerkt ben ik een beginneling op het gebied van programmeren. Ik ben heel blij met de tips welke door jullie gegeven worden en sta altijd open voor commentaar.
Je geeft aan dat het logischer/eenvoudiger kan, kan je aangeven hoe en wat?

Alvast bedankt,
 
Eddy E

Eddy E

10/11/2012 13:56:29
Quote Anchor link
Tabel eruit gooien en dan maar alles onder elkaar.
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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>


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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.