Visa flera inputs

Hej,

Har sökt lite på forumet men inte kunna hitta något som jag kan använda helt för vad jag behöver.

Jag har ett form med två inputs med varsit sett av checkboxar.

<table width="100%">
	<tr>
		<td width="50%">
			<input type="checkbox" name="TEL[0][type][]" value="PREF" /> Pref
			<input type="checkbox" name="TEL[0][type][]" value="HOME" /> Home
			<input type="checkbox" name="TEL[0][type][]" value="WORK" /> Work
			<input type="checkbox" name="TEL[0][type][]" value="CELL" /> Cell
			<input type="checkbox" name="TEL[0][type][]" value="VIDEO" /> Video
		</td>
		<td width="50%">
			<input type="text" name="TEL[0][value][]" />
		</td>
	</tr>
	<tr>
		<td width="50%">
			<input type="checkbox" name="TEL[1][type][]" value="PREF" /> Pref
			<input type="checkbox" name="TEL[1][type][]" value="HOME" /> Home
			<input type="checkbox" name="TEL[1][type][]" value="WORK" /> Work
			<input type="checkbox" name="TEL[1][type][]" value="CELL" /> Cell
			<input type="checkbox" name="TEL[1][type][]" value="VIDEO" /> Video
		</td>
		<td width="50%">
			<input type="text" name="TEL[1][value][]" />
		</td>
	</tr>
</table>

När man fylt i textboxen vill jag att man skall få upp ett till att fylla i med samma fält fast dom skall ha ett nummer högre än dom förra.
Det här skall man få tills man inte har några mer att fylla i.

Tack för svar

 <script>
highestbox = 1;

function addBox(id){
	//alert(id);
	var cid=id.substring(4,id.indexOf("][value][]"));
	if (cid==highestbox){
		highestbox++;

		addStr = '<table border="1" width="100%"><tr>'+
		'<td width="50%">'+
		'<input type="checkbox" name="TEL[' + highestbox + '][type][]" value="PREF" /> Pref'+
		'<input type="checkbox" name="TEL[' + highestbox + '][type][]" value="HOME" /> Home'+
		'<input type="checkbox" name="TEL[' + highestbox + '][type][]" value="WORK" /> Work'+
		'<input type="checkbox" name="TEL[' + highestbox + '][type][]" value="CELL" /> Cell'+
		'<input type="checkbox" name="TEL[' + highestbox + '][type][]" value="VIDEO" /> Video'+
		'</td>'+
		'<td width="50%">'+
		'<input type="text" tabindex="' + highestbox + '" id="TEL[' + highestbox + '][value][]" name="TEL[' + highestbox + '][value][]" onchange="addBox(this.name)" />'+
		'</td>'+
		'</tr></table>';

		document.getElementById("telediv").insertAdjacentHTML("beforeEnd", addStr);
		document.getElementById("TEL[" + highestbox + "][value][]").focus();
	}

}

</script>

<div id="telediv">

<table border=1  width="100%">
<tr>
<td width="50%">
<input type="checkbox" name="TEL[0][type][]" value="PREF" /> Pref
<input type="checkbox" name="TEL[0][type][]" value="HOME" /> Home
<input type="checkbox" name="TEL[0][type][]" value="WORK" /> Work
<input type="checkbox" name="TEL[0][type][]" value="CELL" /> Cell
<input type="checkbox" name="TEL[0][type][]" value="VIDEO" /> Video
</td>
<td width="50%">
<input type="text" name="TEL[0][value][]" onchange="addBox(this.name)" />
</td>
</tr>
</table>

<table border=1  width="100%">
<tr>
<td width="50%">
<input type="checkbox" name="TEL[1][type][]" value="PREF" /> Pref
<input type="checkbox" name="TEL[1][type][]" value="HOME" /> Home
<input type="checkbox" name="TEL[1][type][]" value="WORK" /> Work
<input type="checkbox" name="TEL[1][type][]" value="CELL" /> Cell
<input type="checkbox" name="TEL[1][type][]" value="VIDEO" /> Video
</td>
<td width="50%">
<input type="text" name="TEL[1][value][]" onchange="addBox(this.name)" />
</td>
</tr>
</table>

</div>

Jag tycker detta skript är ganska fult, och det funkar inte i mozilla/firefox, dock i IE och Opera.

Tack för förslaget, men det måste fungera i Mozilla/Firefox.

Här är ett uppdaterat exempel som använder ett hack från WebFX, och exemplet funkar nu utmärkt i "MOE" (Mozilla, Explorer och Opera)

Tackar så mycket. Det scriptet fungerade helt underbart :D

Nytt problem

Hej,

Jag har nu ett nytt problem på den här fronten.

Jag försöker nu få in en input till med E-Mail addresser som också skall utöka som den tidigare med telefon nummer gör.

Koden jag har fått ihop, men som inte helt fungerar då den inte gör något nytt fält, men inte ger något error för det är denna...

  <script type="text/javascript"><!--
  highestbox = $nEMAILBoxes;

  function addEMAILBox(id)
  {
   var cid=id.substring(4,id.indexOf("][address]"));
   if (cid==highestbox)
   {
    highestbox++;
    
    addStr = '<table style="border: 0px solid #000000; width: 100%;">'+
    '<tr>'+
    '<td><input type="text" id="EMAIL[' + highestbox + '][address]" name="EMAIL[' + highestbox + '][address]" /><\/td>'+
    '<td><input type="text" name="EMAIL[' + highestbox + '][address]" /><\/td>'+
    '<td><input type="text" name="EMAIL[' + highestbox + '][address]" onchange="addEMAILBox(this.name)" /><\/td>'+
    '<\/tr>'+
   '<\/table>';

    document.getElementById("emaildiv").insertAdjacentHTML("beforeEnd", addStr);

    setTimeout("document.getElementById(\"EMAIL[" + highestbox + "][address]\")",4);
   }
  }

  --></script>

<div id="emaildiv">
<table style='border: 0px solid #000000; width: 100%;'>
<tr>
<td><input type='text' name='EMAIL[1][address]' onchange='addEMAILBox(this.name)' /></td>
<td><input type='text' name='EMAIL[2][address]' /></td>
<td><input type='text' name='EMAIL[3][address]' /></td>
</tr>
</table>
</div>

Vad jag inte vet är om det blir problem om man har två stycken på det här sättet på samma sida.

Jag vet också att [' + highestbox + '] inte ger det värde på boxarna jag vill ha, men det är inte problemet just nu.