Hallo iedereen. Ik heb een beetje een vreemd probleem. Bij onderstaande code heb ik 2 buttons toegevoegd en wel button add1 en add2. eentje bevindt zich in een form de andere 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?


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


[size=xsmall]Toevoeging op 20/04/2024 12:14:38:[/size]

vreemde is zelfs wanneer ik via button add2 de html toevoeg en ik vervolgens klik op button add1. de toegevoegd html verdwijnt!
Het is niet vreemd. Als je een knop in een formulier plaatst, wordt verondersteld dat het een verzendknop is. Door erop te klikken, gaat je formulier verzenden. Dat is standaardgedrag.

Je kunt het standaardgedrag uitschakelen door "return false;" toe te voegen:

<button onclick="add_textfield(); return false;">Add 1</button>
ah oke. maar waarom wordt een deel van de functie dan wel uitgevoerd?
Omdat je die functie hebt toegevoegd. Die probeert hij ook uit te voeren.
super dank voor je hulp. met return false werkt het wel ja.
<button type="button"> zou het alternatief moeten zijn voor de "return false"
aangezien dat aangeeft dat het niet een <button type="submit"> betreft.

(default gedrag is inderdaad Submit)

Reageren