value van tekstbox wordt leeggemaakt

[bibawa]

In een formulier geef ik de gebruiker de optie om een aantal Dj's toe te voegen aan een formulier, wanneer hij er een heeft ingevuld en klikt op de link "Extra dj" moet er een extra tekstvak bijkomen..

Volgende code voer ik uit tijdens het klikken op de link:

JavaScript:

   
function extradj(){
    document.fuif.djteller.value=parseInt(document.fuif.djteller.value)+1;
    var id=parseInt(document.fuif.djteller.value);
    var varnaam="txtDJ"+id;

    document.getElementById('deejee').innerHTML+="<br /><br /><input type='text' id='"+varnaam+"' />";
    
}

ik houd dus zoals u ziet een tellertje bij om het ID in te stellen van het nieuwe tekstvak...

in IE werkt dit perfect, maar in Firefox doet dit niet wat het zou moeten doen, het voegt een extra tekstvak toe, maar als ik voorheen een waarde invulde in overige tekstvakken dan worden deze leeggemaakt..

Hoe kan ik dit oplossen, dat dit probleem zich niet voordoet?

[Fibbers]

Ik zou dan met DOM werken en niet met de rouwe innerHTML code.

Als je een nieuw input-object aanmaakt en deze toevoegt aan die 'deejee', dan zou het moeten werken:

JavaScript:

function extradj(){
    document.fuif.djteller.value=parseInt(document.fuif.djteller.value)+1;
    var id=parseInt(document.fuif.djteller.value);
    var varnaam="txtDJ"+id;

    var oInput = document.createElement('input');
    oInput.setAttribute('type', 'text');
    oInput.setAttribute('id', varnaam);

    document.getElementById('deejay').appendChild(oInput);
}

[curry684]

Vind de constructie als geheel nog steeds ranzig zoals je die teller bijhoudt. Stuk netter (en kortere JS):

JavaScript:

<div id="djs"></div><a href="javascript:void(0)" onclick="extradj('djs')">new DJ!</a>
<script type="text/javascript">
var dynamicCnt = 1;
function extradj(parentId)
{
  var newInput = document.createElement('input');
  newInput.setAttribute('type', 'text');
  newInput.setAttribute('id', 'txtDJ'+dynamicCnt++);
  document.getElementById(parentId).appendChild(newInput);
}
extradj('djs');
</script>

[ Voor 5% gewijzigd door curry684 op 10-07-2007 10:49 ]