functie wel en niet
als ik op button add2 klik wordt de html toegevoegd in <form id="paul_form>. als ik echter button add1 klik wordt de functie wel opgeroepen, maar wordt de htm niet toegevoegd! Wat zie ik over het hoofd. waarom werkt het niet als de button zich in een form bevindt?
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
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
<html>
<body>
<form id="paul_form">
</form>
<form>
<input type="text" name="a" id="a"><br>
<input type="text" name="b" id="b"><br>
<button onclick="add_textfield();">Add 1</button>
</form>
<button onclick="add_textfield();">
Add 2
</button>
<div style="display:none;" id="textfield">
<div id="rij-3">
<label for="fname">Volledige naam:</label><br>
<input type="text" size="50" id="lname" name="lname" value="Doe">
</div>
</div>
<script>
function add_textfield() {
alert("functie add_texztfield opgeroepen opgeroepen");
var a = document.getElementById('a').value;
var b = document.getElementById('b').value;
alert(a);
alert(b);
let formfield = document.getElementById("textfield").innerHTML;
document.getElementById("paul_form").innerHTML += formfield;
}
</script>
</body>
</html>
<body>
<form id="paul_form">
</form>
<form>
<input type="text" name="a" id="a"><br>
<input type="text" name="b" id="b"><br>
<button onclick="add_textfield();">Add 1</button>
</form>
<button onclick="add_textfield();">
Add 2
</button>
<div style="display:none;" id="textfield">
<div id="rij-3">
<label for="fname">Volledige naam:</label><br>
<input type="text" size="50" id="lname" name="lname" value="Doe">
</div>
</div>
<script>
function add_textfield() {
alert("functie add_texztfield opgeroepen opgeroepen");
var a = document.getElementById('a').value;
var b = document.getElementById('b').value;
alert(a);
alert(b);
let formfield = document.getElementById("textfield").innerHTML;
document.getElementById("paul_form").innerHTML += formfield;
}
</script>
</body>
</html>
Toevoeging op 20/04/2024 12:14:38:
vreemde is zelfs wanneer ik via button add2 de html toevoeg en ik vervolgens klik op button add1. de toegevoegd html verdwijnt!
Je kunt het standaardgedrag uitschakelen door "return false;" toe te voegen:
<button onclick="add_textfield(); return false;">Add 1</button>
aangezien dat aangeeft dat het niet een <button type="submit"> betreft.
(default gedrag is inderdaad Submit)