Beste, ik heb mbv javascript voor elkaar gemaakt om dynamische input te maken, simepl door te klikken op een link krijg je een input veld extra, niets spannends.
Nu wil ik graag dat wanneer in het form een error optreedt de data uit die dynamische input wordt onthouden en teruggeplaatst.
nu lukt het me om als ik 1 foutje in het form maak, dat er dan netjes de inputs komen te staan, maak ik per ongeluk nog een foutje, dan zijn ze er niet meer.(wat logisch is, zie mijn code, de var waar ik op controleer is er dan ook niet meer) alleen weet ik niet hoe dit verder op te lossen. iemand een ideetje?
Het javascript:
[JS]<script type="text/javascript">
var counter = 0;
var limit = 5;
var veldwaarde ="";
function addInput(divName){
if (counter == limit) {
alert("Meer dan " + counter + " kinderen toevoegen niet mogelijk ");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<table><tr><td>Naam kind " + (counter + 1) + "</td><td> <input type='text' name='myInputs[]'/></td></tr>" +"<tr><td>Geboortedatum kind " + (counter+ 1) +"</td><td><br><input type='text' name='myInputs2[]'></td></tr></table>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>[/JS]
Daar waar ik ze aanroep:
Nu wil ik graag dat wanneer in het form een error optreedt de data uit die dynamische input wordt onthouden en teruggeplaatst.
nu lukt het me om als ik 1 foutje in het form maak, dat er dan netjes de inputs komen te staan, maak ik per ongeluk nog een foutje, dan zijn ze er niet meer.(wat logisch is, zie mijn code, de var waar ik op controleer is er dan ook niet meer) alleen weet ik niet hoe dit verder op te lossen. iemand een ideetje?
Het javascript:
[JS]<script type="text/javascript">
var counter = 0;
var limit = 5;
var veldwaarde ="";
function addInput(divName){
if (counter == limit) {
alert("Meer dan " + counter + " kinderen toevoegen niet mogelijk ");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<table><tr><td>Naam kind " + (counter + 1) + "</td><td> <input type='text' name='myInputs[]'/></td></tr>" +"<tr><td>Geboortedatum kind " + (counter+ 1) +"</td><td><br><input type='text' name='myInputs2[]'></td></tr></table>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>[/JS]
Daar waar ik ze aanroep:
PHP:
<?php
if(empty ($_POST['myInputs'])){
echo '<td><div id="dynamicInput" > <a href="" onClick="addInput(\'dynamicInput\');return false;"><p style="color:red;">Voeg kind toe(+)</p></a></td></tr></div>';
}
else{
echo'<td width="100%">';
if(isset($_POST['myInputs'][0])){
echo '<tr><td>Naam kind 1:</td><td><input type="text" name="kind1" value="'.$_POST['myInputs'][0].'" ></td></tr>
<tr><td>Geboortedatum kind1:</td><td><input type="text" name="geboorte1" value="'.$_POST['myInputs2'][0].'" ></td></tr>';
}
else{}
if(!empty($_POST['myInputs'][1])){
echo '<tr><td>Naam kind 2:</td><td><input type="text" name="kind2" value="'.$_POST['myInputs'][1].'" disabled="disabled"></td></tr>
<tr><td>Geboortedatum kind 2:</td><td><input type="text" name="geboorte2" value="'.$_POST['myInputs2'][1].'" disabled="disabled"></td></tr>';
}
else{}
if(!empty($_POST['myInputs'][2])){
echo '<tr><td>Naam kind 3:</td><td><input type="text" name="kind3" value="'.$_POST['myInputs'][2].'" disabled="disabled"></td></tr>
<tr><td>Geboortedatum kind 3:</td><td><input type="text" name="geboorte3" value="'.$_POST['myInputs2'][2].'" disabled="disabled"></td></tr>';
}
else{}
if(!empty($_POST['myInputs'][3])){
echo '<tr><td>Naam kind 4:</td><td><input type="text" name="kind4" value="'.$_POST['myInputs'][3].'" disabled="disabled"></td></tr>
<tr><td>Geboortedatum kind 4:</td><td><input type="text" name="geboorte4" value="'.$_POST['myInputs2'][3].'" disabled="disabled"></td></tr>';
}
else{}
if(!empty($_POST['myInputs'][4])){
echo '<tr><td>Naam kind 5:</td><td><input type="text" name="kind5" value="'.$_POST['myInputs'][4].'" disabled="disabled"></td></tr>
<tr><td>Geboortedatum kind 5:</td><td><input type="text" name="geboorte5" value="'.$_POST['myInputs2'][4].'" disabled="disabled"></td></tr>';
}
else{}
echo '</td></tr>';
}
?>