Tijden veranderen
Meer formulier velden toevoegen dmv javascript
Ik ben bezig met een formulier waarmee een bedrijf projecten toe kan voegen aan hun database en dat willen zei zo:
http://www.party-vision.nl/AddProject.png
Nu krijg ik het natuurlijk wel voor elkaar om een input veld en textarea te maken, maar ik heb geen idee hoe ik dat laatste gedeelte voor elkaar krijg, dus dat de velden er bij komen met 1 druk op de knop.
Gr, milo
Gewijzigd op 05/08/2010 11:44:35 door Milo S
Gewijzigd op 05/08/2010 11:50:38 door Milo S
met jquery er element aan toevoegen
kort voorbeeldje ( niet getest dus kunnen fouten inzitten )
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<a href="#" id="add">Voeg meer toe</a>
<br />
<div id="placeholder"></div>
<script type="text/javascript">
var idx = 0;
$(function(){
$("#add").click(function(e){
$("#placeholder").append ( "<input type='text' name='extra_" + idx + "' />" );
idx++;
e.preventDefault();
});
});
</script>
<br />
<div id="placeholder"></div>
<script type="text/javascript">
var idx = 0;
$(function(){
$("#add").click(function(e){
$("#placeholder").append ( "<input type='text' name='extra_" + idx + "' />" );
idx++;
e.preventDefault();
});
});
</script>
Conclusie hij zou het moeten doen maar er gebeurt niks...
Je moet natuurlijk wel de jquery library downloaden en includen in je headers.. en wat ik al zei.. ik heb het even uit het hoofd geklopt dus kunnen anzich best syntax errors inzitten..
Ik ben best goed.. maar blijf wel een mens :P
dreamweaver zegt dat er geen fouten inzitten, maar ik weet niet hoe ik dit moet noemen dus ik kan ook niet zomaar gaan googlen op vergelijkbare scripts...
Toevoeging op 05/08/2010 12:29:08:
ow en installeer firebug ff( firefox add on )
dan is het wat makkelijker debuggen.. dan kan je eventueel ook de syntax error hier droppen
Gedaan, maar die zegt ook niet echt iets...
Hartelijk bedankt hiervoor, ik ga nog even kijken of er een trucje is dat het script 5 keer uitgevoerd word bij 1 druk op de knop, en hoe ik het moet afhandelen in php.
5 keer uitvoeren heb ik met for lus opgelost, nu kijken hoe ik dit makkelijk afhandel...
Gewijzigd op 05/08/2010 12:45:05 door Milo S
for ( i = idx; i <= ( idx + 5 ); i++ ) {
// append stukje
idx++;
}
en in php kan je dan gewoon je post values afvangen
Dit is nu mijn gehele code:
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<script type="text/javascript">
for(idx = 1; idx <= 5; idx++)
{
$(function()
{
$("#add").click(function(e)
{
$("#placeholder").append ("<label>Ornament</label<select class='ornamenten' name='ornament" + idx + "'><option>a</option><option>b</option><option>c</option><option>d</option></select><label for='3' class='aantal'>Aantal</label><input id='3' class='aantal' name='aantal' type='text' />");
idx++;
e.preventDefault();
});
});
}
</script>
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
$qry = "INSERT INTO
evenementen
(
titel,
begindatum,
einddatum,
algemeneinformatie
)
VALUES
(
'".mysqli_real_escape_string($conn, $_POST['titel'])."',
'".mysqli_real_escape_string($conn, $_POST['begindatum'])."',
'".mysqli_real_escape_string($conn, $_POST['einddatum'])."',
'".mysqli_real_escape_string($conn, $_POST['algemeneinformatie'])."'
)";
if($sql = mysqli_query($conn, $qry))
{
# Laatste gebruikte id ophalen
$lastid = mysqli_insert_id($conn);
# Alle $_POST vars oppakken
foreach($_POST as $key => $value)
{
# Alle ornamenten splitsen
for($i = 0; $i <= $_POST['aantal']; $i++)
{
if(stristr($key, 'ornament_0'))
{
list($onnodig, $ornamentid) = split('_', $key);
$qry = "INSERT INTO
voorraad
(
event_id
ornament_id
)
VALUES
(
'".mysqli_real_escape_string($conn, $lastid)."',
'".mysqli_real_escape_string($conn, $ornamentid)."'
)";
if($sql = mysqli_query($conn, $qry))
{
echo 'Uw project is succesvol geplaatst.';
}
else
{
echo 'Er zit een fout in de query.<br />';
echo mysqli_error($sql);
}
}
else
{
echo 'fout bij stristr.<br />';
}
}
}
}
else
{
echo 'Er is een fout opgetreden tijdens het plaatsen van dit project.';
}
}
else
{
?>
<form action="" method="post">
<label id="1">Titel project</label>
<input id="1" name="titel" type="text" />
<br />
<label id="2">Algemene informatie</label>
<textarea id="2" name="algemeneinformatie"></textarea>
<br />
<label id="3">Begin datum</label>
<input id="3" name="begindatum" type="text" value="yyyy-mm-dd" />
<br />
<label id="4">Eind datum</label>
<input id="4" name="einddatum" type="text" value="yyyy-mm-dd" />
<br />
<label>Ornament</label>
<select class="ornamenten" name="ornament">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>
<label for="5" class="aantal">Aantal</label>
<input id="5" class="aantal" name="aantal" type="text" />
<br />
<div id="placeholder"></div>
<a class="addornamenten" href="#" id="add">Meer ornamenten</a>
<input class="submit" type="submit" value="Plaats project" />
</form>
<?php
}
?>
for(idx = 1; idx <= 5; idx++)
{
$(function()
{
$("#add").click(function(e)
{
$("#placeholder").append ("<label>Ornament</label<select class='ornamenten' name='ornament" + idx + "'><option>a</option><option>b</option><option>c</option><option>d</option></select><label for='3' class='aantal'>Aantal</label><input id='3' class='aantal' name='aantal' type='text' />");
idx++;
e.preventDefault();
});
});
}
</script>
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
$qry = "INSERT INTO
evenementen
(
titel,
begindatum,
einddatum,
algemeneinformatie
)
VALUES
(
'".mysqli_real_escape_string($conn, $_POST['titel'])."',
'".mysqli_real_escape_string($conn, $_POST['begindatum'])."',
'".mysqli_real_escape_string($conn, $_POST['einddatum'])."',
'".mysqli_real_escape_string($conn, $_POST['algemeneinformatie'])."'
)";
if($sql = mysqli_query($conn, $qry))
{
# Laatste gebruikte id ophalen
$lastid = mysqli_insert_id($conn);
# Alle $_POST vars oppakken
foreach($_POST as $key => $value)
{
# Alle ornamenten splitsen
for($i = 0; $i <= $_POST['aantal']; $i++)
{
if(stristr($key, 'ornament_0'))
{
list($onnodig, $ornamentid) = split('_', $key);
$qry = "INSERT INTO
voorraad
(
event_id
ornament_id
)
VALUES
(
'".mysqli_real_escape_string($conn, $lastid)."',
'".mysqli_real_escape_string($conn, $ornamentid)."'
)";
if($sql = mysqli_query($conn, $qry))
{
echo 'Uw project is succesvol geplaatst.';
}
else
{
echo 'Er zit een fout in de query.<br />';
echo mysqli_error($sql);
}
}
else
{
echo 'fout bij stristr.<br />';
}
}
}
}
else
{
echo 'Er is een fout opgetreden tijdens het plaatsen van dit project.';
}
}
else
{
?>
<form action="" method="post">
<label id="1">Titel project</label>
<input id="1" name="titel" type="text" />
<br />
<label id="2">Algemene informatie</label>
<textarea id="2" name="algemeneinformatie"></textarea>
<br />
<label id="3">Begin datum</label>
<input id="3" name="begindatum" type="text" value="yyyy-mm-dd" />
<br />
<label id="4">Eind datum</label>
<input id="4" name="einddatum" type="text" value="yyyy-mm-dd" />
<br />
<label>Ornament</label>
<select class="ornamenten" name="ornament">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>
<label for="5" class="aantal">Aantal</label>
<input id="5" class="aantal" name="aantal" type="text" />
<br />
<div id="placeholder"></div>
<a class="addornamenten" href="#" id="add">Meer ornamenten</a>
<input class="submit" type="submit" value="Plaats project" />
</form>
<?php
}
?>
Wat zou er moeten gebeuren:
- Je vult alle gegevens in incl. een aantal ornamenten
--- Dan word het evenement geplaatst en laatst gebruikte id onthouden om die bij event_id te zetten bij volgende stap
--- Alle ornamenten moeten in de database, hiervoor heb ik: id, event_id en ornament_id nodig.
Bij het javascript gedeelte zit dus 1 selectbox, hier moeten alle ornamenten komen die de gebruiker in de database heeft, een php mysql verhouding dus... hier kom ik niet echt uit.
Gewijzigd op 05/08/2010 17:03:48 door Milo S