Velden automatisch toevoegen
Ik ben bezig een CMS te maken en nu lijkt het mij een leuk idee dat gebruikers zelf een poll kunnen toevoegen.
Dit alles lukt mij aardig met php en SQL. Ik stuit echter op een probleem waar ik volgens mij Javascript voor nodig heb.
Dit is de case:
Er moet een bewerkpagina zijn waarop mensen bij een bepaalde vraag antwoorden kunnen instellen met behulp van input fields. Standaard moeten er 2 antwoorden/fields zijn. Wanneer de gebruiker op het 2e field drukt moet er (mbv een onfocus) automatisch een nieuw field verschijnen, zonder dat de ingevulde waarden in de andere fields worden gereset.
Wanneer een 3e knop is ontstaan mag de onfocus niet meer op de 2e werken, maar enkel op de 3e etc...
Ik ben totaal nieuw met Javascript, maar heb ik het volgende al gemaakt:
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
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
<html>
<head>
<title></title>
<script language="javascript">
fields = 2;
function addInput()
{
fields ++;
document.getElementById('text').innerHTML += "Antwoord "+fields+": <input onfocus='addInput()' type='text' value=''/><br/>";
if(fields >= 5)
{
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<form name="form" action="form.php" method="post">
<input type="button" onclick="addInput()" name="add" value="Een keuze toevoegen" />
<div id="text">
Antwoord 1: <input onfocus="addInput()" type='text'/><br/>
Antwoord 2: <input onfocus="addInput()" type='text'/><br/>
</div>
</form>
</body>
</html>
<head>
<title></title>
<script language="javascript">
fields = 2;
function addInput()
{
fields ++;
document.getElementById('text').innerHTML += "Antwoord "+fields+": <input onfocus='addInput()' type='text' value=''/><br/>";
if(fields >= 5)
{
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<form name="form" action="form.php" method="post">
<input type="button" onclick="addInput()" name="add" value="Een keuze toevoegen" />
<div id="text">
Antwoord 1: <input onfocus="addInput()" type='text'/><br/>
Antwoord 2: <input onfocus="addInput()" type='text'/><br/>
</div>
</form>
</body>
</html>
Het enige probleem is dat de functie enkel nog werkt mbv de knop 'Een keuze toevoegen'. De onfocus wordt namelijk bij ALLE VELDEN toegepast ipv enkel het laatste.
Iemand ideeën?
Gewijzigd op 22/04/2011 12:48:19 door Karel van Dam
Gesponsorde koppelingen:
Ik heb het afgekeken van wat andere professionele websites die het dus wel op die manier doen, maar dit is opzich ook een goeie oplossing...
Toevoeging op 22/04/2011 18:56:14:
Toch nog even een vraagje...
Hoe komt het dat IE de value's van de input velden onthoudt en FF niet?
Hoe kan ik ervoor zorgen dat FF dit wel doet?
