2 input velden in een loop
Het oorspronkelijke script is er 1 waarbij je 1 input veld hebt en als je deze in heb gevuld wordt er automatisch een input veld toegevoegd.
Omdat ik 2 input velden wil laten invoeren en daarna nog 2 totdat de limiet is bereikt heb ik het aangepast maar het script vertoont kuren.
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
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
<html>
<head>
<script>
var counter = 1;
var limit = 5;
function addInput(divName){
if (counter > limit) {
alert("Je hebt de limit overschreden omdat de invoer meer dan " + counter + " is");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Naam " + (counter + 1) + " <br><input type='text' name='Naam[]'>";
newdiv.innerHTML = "Webadres " + (counter + 1) + " <br><input type='text' name='Webadres[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
</head>
<body>
<form method="POST">
<div id="dynamicInput">
Naam<br><input type="text" name="Naam[]"><br>
Webadres<br><input type="text" name="Webadres[]">
</div>
<input type="button" value="Verzenden" onClick="addInput('dynamicInput');">
</form>
</body>
</html>
<head>
<script>
var counter = 1;
var limit = 5;
function addInput(divName){
if (counter > limit) {
alert("Je hebt de limit overschreden omdat de invoer meer dan " + counter + " is");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Naam " + (counter + 1) + " <br><input type='text' name='Naam[]'>";
newdiv.innerHTML = "Webadres " + (counter + 1) + " <br><input type='text' name='Webadres[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
</head>
<body>
<form method="POST">
<div id="dynamicInput">
Naam<br><input type="text" name="Naam[]"><br>
Webadres<br><input type="text" name="Webadres[]">
</div>
<input type="button" value="Verzenden" onClick="addInput('dynamicInput');">
</form>
</body>
</html>
Hoe krijg ik n maal 2 input velden netjes onder elkaar?
Code (php)
1
2
2
newdiv.innerHTML = "Naam " + (counter + 1) + " <br><input type='text' name='Naam[]'>";
newdiv.innerHTML = "Webadres " + (counter + 1) + " <br><input type='text' name='Webadres[]'>";
newdiv.innerHTML = "Webadres " + (counter + 1) + " <br><input type='text' name='Webadres[]'>";
Code (php)
1
2
2
newdiv.innerHTML = "Naam " + (counter + 1) + " <br><input type='text' name='Naam[]'><br />" +
"Webadres " + (counter + 1) + " <br><input type='text' name='Webadres[]'>";
"Webadres " + (counter + 1) + " <br><input type='text' name='Webadres[]'>";
Demo: http://codepen.io/anon/pen/MaYPPo
Dat gaat dus fout.
Code (php)
1
newdiv.innerHTML = "Naam " + (counter + 1) + " <br><input type='text' name='Naam[]'><br>Webadres " + (counter + 1) + " <br><input type='text' name='Webadres[]'>";
Dus:
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
<style>
.hide{
display: none;
}
</style>
<script type="text/javascript">
function meh(id){
if(id==3){
return false; // submit form?
}
c[id].className ='';
}
</script>
<form id="dynform">
<div>
<label>naam</label>
<input type="text" onchange="meh(1)"></input>
</div>
<div>
<label>address</label>
<input type="text" onchange="meh(2)"></input>
</div>
<div>
<label>something</label>
<input type="text" onchange="meh(3)"></input>
</div>
</form>
<script type="text/javascript">
var f = document.getElementById('dynform');
var c = f.children;
for(i = 1; i < c.length; i++) {
c[i].className ='hide';
}
</script>
.hide{
display: none;
}
</style>
<script type="text/javascript">
function meh(id){
if(id==3){
return false; // submit form?
}
c[id].className ='';
}
</script>
<form id="dynform">
<div>
<label>naam</label>
<input type="text" onchange="meh(1)"></input>
</div>
<div>
<label>address</label>
<input type="text" onchange="meh(2)"></input>
</div>
<div>
<label>something</label>
<input type="text" onchange="meh(3)"></input>
</div>
</form>
<script type="text/javascript">
var f = document.getElementById('dynform');
var c = f.children;
for(i = 1; i < c.length; i++) {
c[i].className ='hide';
}
</script>
Daarmee maak je het ook minder "obtrusive" - de onclick-/onchange- etc. events kun je dan uit je HTML halen.
Gewijzigd op 05/09/2015 11:25:51 door Thomas van den Heuvel
bedankt mensen voor de hulp.