Velden verbergen + oproepen
Ik zit met een vraagje, ik heb een bestaand contactformulier in PHP. (in feite is het een inschrijvingsformulier)
In het huidige script kan men tot 5 personen inschrijven, maar dit staat allemaal onder elkaar, dus:
Quote:
-Inschrijving 1
-Inschrijving 2
-Inschrijving 3
-Inschrijving 4
-Inschrijving 5
-Inschrijving 2
-Inschrijving 3
-Inschrijving 4
-Inschrijving 5
Het is dus niet echt mooi dat iemand die zich apart inschrijft die andere 4 velden voor 4 andere personen ook ziet staan. Wat ik dus zou willen is dat er bijvoorbeeld staat:
Quote:
-Inschrijving 1
-Klik hier om nog iemand in te schrijven.
-Klik hier om nog iemand in te schrijven.
En als men dan op die knop drukt dat die andere velden te voorschijn komen dus:
Quote:
-Inschrijving 1
-Inschrijving 2
-Klik hier om nog iemand in te schrijven.
-Inschrijving 2
-Klik hier om nog iemand in te schrijven.
En dat dit zo verder gaat tot Inschrijving 5...
Quote:
-Inschrijving 1
-Inschrijving 2
-Inschrijving 3
-Inschrijving 4
-Inschrijving 5
U heeft het maximum aantal inschrijvingen bereikt.
-Inschrijving 2
-Inschrijving 3
-Inschrijving 4
-Inschrijving 5
U heeft het maximum aantal inschrijvingen bereikt.
Weet iemand hoe ik dit kan doen??
Alvast bedankt bij voorbaat!
Gewijzigd op 26/01/2011 14:42:52 door Lukas V
Quote:
<script type="text/javascript">
var total;
function add(){
total = document.getElementById("total");
if(total.value < 5){
total.value++;
document.getElementById("form").innerHTML = document.getElementById("form").innerHTML +
"<br /> Naam "+total.value+": <input type=\"text\" name=\"name"+total.value+"\" />";
if(total.value == 5){
document.getElementById("url").innerHTML = "U heeft het maximum aantal inschrijvingen bereikt.";
document.getElementById("url").style.textDecoration="none";
}
}
}
</script>
<form method="post">
<input type="hidden" id="total" name="total" value="1" />
<div id="form">
Naam 1: <input type="text" name="name1" />
</div>
<a href="#" onclick="add();" id="url">Klik hier om nog iemand in te schrijven.</a>
<br />
<br />
<input type="submit" value="schrijf in!" />
</form>
var total;
function add(){
total = document.getElementById("total");
if(total.value < 5){
total.value++;
document.getElementById("form").innerHTML = document.getElementById("form").innerHTML +
"<br /> Naam "+total.value+": <input type=\"text\" name=\"name"+total.value+"\" />";
if(total.value == 5){
document.getElementById("url").innerHTML = "U heeft het maximum aantal inschrijvingen bereikt.";
document.getElementById("url").style.textDecoration="none";
}
}
}
</script>
<form method="post">
<input type="hidden" id="total" name="total" value="1" />
<div id="form">
Naam 1: <input type="text" name="name1" />
</div>
<a href="#" onclick="add();" id="url">Klik hier om nog iemand in te schrijven.</a>
<br />
<br />
<input type="submit" value="schrijf in!" />
</form>
misschien heb je hier wat aan?
Toevoeging op 26/01/2011 15:16:26:
En zou er een mogelijkheid zijn om deze dan weer weg te doen? Met bijvoorbeeld "Verwijder de laatste inschrijving"
Thomas van den Bulk op 26/01/2011 15:09:58:
misschien heb je hier wat aan?
Geinig gemaakt hoor Thomas :)
(als enige zou ik de complete "maak nieuwe inschrijving" url in een div zetten, zodat op het laatst de melding dat het max. is bereikt niet in een <a></a> terecht komt, maar voor de rest netjes!)
(moest het hele script ombouwen),
hij onthoudt ook wat je hebt ingevuld :)
Quote:
<script type="text/javascript">
var total, url, data, info;
function add(){
total = document.getElementById("total");
url = document.getElementById("url");
if(total.value < 5){
total.value++;
info = "";
for(x = 0; x < total.value; x++){
if(x !== 0){
info += "<br />";
}
data = document.getElementsByName("name"+(x+1))[0];
if(data == undefined || data == null){
data = "";
} else {
data = data.value;
}
info += "Naam "+(x+1)+": <input type=\"text\" value=\""+data+"\" name=\"name"+(x+1)+"\" />";
}
document.getElementById("form").innerHTML = info;
if(total.value > 4){
url.innerHTML = "U heeft het maximum aantal inschrijvingen bereikt.";
url.innerHTML += "<br /><a href=\"#\" onclick=\"remove();\">Verwijder de laatste inschrijving</a>";
} else {
url.innerHTML = "<a href=\"#\" onclick=\"add();\">Klik hier om nog iemand in te schrijven.</a>";
if(total.value > 1){
url.innerHTML += "<br /><a href=\"#\" onclick=\"remove();\">Verwijder de laatste inschrijving</a>";
}
}
}
}
function remove(){
document.getElementById("total").value -= 2;
add();
}
</script>
<form method="post">
<input type="hidden" id="total" name="total" value="1" />
<div id="form">
Naam 1: <input type="text" name="name1" />
</div>
<div id="url">
<a href="#" onclick="add();">Klik hier om nog iemand in te schrijven.</a>
</div>
<br />
<br />
<input type="submit" value="schrijf in!" />
</form>
var total, url, data, info;
function add(){
total = document.getElementById("total");
url = document.getElementById("url");
if(total.value < 5){
total.value++;
info = "";
for(x = 0; x < total.value; x++){
if(x !== 0){
info += "<br />";
}
data = document.getElementsByName("name"+(x+1))[0];
if(data == undefined || data == null){
data = "";
} else {
data = data.value;
}
info += "Naam "+(x+1)+": <input type=\"text\" value=\""+data+"\" name=\"name"+(x+1)+"\" />";
}
document.getElementById("form").innerHTML = info;
if(total.value > 4){
url.innerHTML = "U heeft het maximum aantal inschrijvingen bereikt.";
url.innerHTML += "<br /><a href=\"#\" onclick=\"remove();\">Verwijder de laatste inschrijving</a>";
} else {
url.innerHTML = "<a href=\"#\" onclick=\"add();\">Klik hier om nog iemand in te schrijven.</a>";
if(total.value > 1){
url.innerHTML += "<br /><a href=\"#\" onclick=\"remove();\">Verwijder de laatste inschrijving</a>";
}
}
}
}
function remove(){
document.getElementById("total").value -= 2;
add();
}
</script>
<form method="post">
<input type="hidden" id="total" name="total" value="1" />
<div id="form">
Naam 1: <input type="text" name="name1" />
</div>
<div id="url">
<a href="#" onclick="add();">Klik hier om nog iemand in te schrijven.</a>
</div>
<br />
<br />
<input type="submit" value="schrijf in!" />
</form>
Gewijzigd op 26/01/2011 17:54:10 door Thomas van den Bulk