Formulier velden verwijderen en toevoegen

Status
Niet open voor verdere reacties.

ViceStar

Gebruiker
Lid geworden
19 mei 2008
Berichten
16
Ik heb een javascript functies gemaakt die door middel van een druk op de knop eenformulier veld toevoegd en ook een knop om formulierveld te verwijderen. Met een onder en bovengrens:

http://www.tessan.nl/test/optellen.html

Maar nu werkt hij niet helemaal goed. Als ik bijvoorbeeld 10 velden maak en 10 velden verwijder en dan weer optel en verwijder gaat het mis. Speel er maar mee.

Kan iemand mij helpen. Heb idee dat hele simpele oplossing is.

Code:
<html>
<head>

<title>Optel en aftel</title>
<script> 
var totaal = 0;
function Optellen() {
if (totaal != 10) {
totaal += 1;
document.getElementById('tekst_velden').innerHTML += "<div id='antwoorden" + totaal + "'>" + totaal +"<br /><br></div>";
document.getElementById('weergave').value = totaal; 
if (totaal > 0) {
document.form.aftel.disabled=false;		
}
} else {
document.form.optel.disabled=true;
alert("Kan niet verder optellen!");
}
}

function Aftrekken() {
if (totaal != 0) {
var abc = 'antwoorden' + totaal;
document.getElementById(abc).innerHTML = "";
totaal -= 1;
document.getElementById('weergave').value = totaal;
if (totaal < 10) {
document.form.optel.disabled=false;	
}
}else {
document.form.aftel.disabled=true;
alert("Kan niet verder aftrekken!");
}
}

function Disablebtn() {
document.form.aftel.disabled=true;	
}
</script>
<!-- <input type='text' value='" + totaal + "' id='antwoord" + totaal + "'  /> -->
</head>

<body onload="Disablebtn();">
<form name="form">
<input type="button" onclick="Optellen();" name="optel" id="optel" value="Optellen" /> | <input type="button" onclick="Aftrekken();" name="aftel" id="aftel" value="Aftrekken"/><br /><br />

<p>
<h4>Optellen en aftrekken</h4>
<input type="text" name="weergave" value="0" id="weergave" /></p>

<h4>Vragen</h4>
<div id="tekst_velden">

</div>
</form>
</body>
</html>
 
Het probleem is dat als je op "Optellen" klikt er een nieuwe div wordt aangemaakt, eerst met id "antwoorden1", dan "antwoorden2", etc. Bij het klikken op "Aftrekken" worden de divs leeggemaakt (de divs zelf blijven staan). Als je nu opnieuw op "Optellen" klikt worden er weer nieuwe divs aangemaakt met id's "antwoorden1", "antwoorden2", etc. Dit mag echter niet, omdat er als divs bestaan met die id's. Klik je nu op "Aftrekken" worden de eerste divs met die id's (die de eerste keer aangemaakt zijn en dus al leeg zijn) leeggemaakt.

Om dit op te lossen zul je de divs bij het klikken op "Aftrekken" niet leeg moeten maken, maar helemaal weghalen. Ik heb dit bij een soortgelijke site gedaan op de manier die hier beschreven wordt.

[edit]Wat je overigens ook kan doen (al is de hierboven genoemde methode netter en raad ik die aan) is de id van de divs veranderen na het leegmaken ervan. Dit kan je doen door na de regel [js]document.getElementById(abc).innerHTML = "";[/js] nog de regel [js]document.getElementById(abc).setAttribute('id', 'bla');[/js] te zetten.
Nogmaals, dit is niet echt netjes en raad ik dus niet aan, maar het werkt wel.[/edit]
 
Laatst bewerkt:
Ah ik weet nu wat ik fout doe. Ik snap het moet eigenlijk de gehele div verwijderen en niet alleen de inhoud.

Het voorbeeld dat je laat zien had ik inderdaad al gezien. Alleen ik moet een onder en bovengrens aangeven. Want mogen niet meer dan 7 tekstvelden toegevoegd worden.

Maar zal eens kijken of ik het kan combineren :) Dank je voor je reply!
 
Het is mij gelukt :)

De code voor diegene die geïnteresseerd zijn in de oplossing:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Optel en aftel</title>
<script> 
var totaal = 0;
function Optellen() {
if (totaal != 10) {
totaal += 1;
document.getElementById('tekst_velden').innerHTML += "<div id='antwoorden" + totaal + "'>" + totaal +"<br /><br></div>";
document.getElementById('weergave').value = totaal; 
if (totaal > 0) {
document.form.aftel.disabled=false;		
}
} else {
document.form.optel.disabled=true;
alert("Kan niet verder optellen!");
}
}

function Aftrekken() {
if (totaal != 0) {
var abc = 'antwoorden' + totaal;

var d = document.getElementById('tekst_velden');
var olddiv = document.getElementById(abc);
d.removeChild(olddiv);

totaal -= 1;
document.getElementById('weergave').value = totaal;
if (totaal < 10) {
document.form.optel.disabled=false;	
}
}else {
document.form.aftel.disabled=true;
alert("Kan niet verder aftrekken!");
}
}

function Disablebtn() {
document.form.aftel.disabled=true;	
}
</script>
<!-- <input type='text' value='" + totaal + "' id='antwoord" + totaal + "'  /> -->
</head>

<body onload="Disablebtn();">
<form name="form">
<input type="button" onclick="Optellen();" name="optel" id="optel" value="Optellen" /> | <input type="button" onclick="Aftrekken();" name="aftel" id="aftel" value="Aftrekken"/><br /><br />

<p>
<h4>Optellen en aftrekken</h4>
<input type="text" name="weergave" value="0" id="weergave" /></p>

<h4>Vragen</h4>
<div id="tekst_velden">

</div>
</form>
</body>
</html>

En live:

http://www.tessan.nl/test/optellen.html
 
En zoals je het nu hebt gedaan is de enige juiste manier. Het veld niet leeg of onzichtbaar maken, maar daadwerkelijk verwijderen!n:thumb:
 
Status
Niet open voor verdere reacties.

Nieuwste berichten

Terug
Bovenaan Onderaan