Visa flera inputs

5 svar · 455 visningar · startad av startail 22 jan. 2005

startailMedlem sedan sep. 2000155 inlägg

Frågan22 jan. 2005 22:57#1

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

nitro2k01Medlem sedan aug. 20039 340 inlägg

23 jan. 2005 00:41#2

 <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.

startailMedlem sedan sep. 2000155 inlägg

23 jan. 2005 01:10#3

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

nitro2k01Medlem sedan aug. 20039 340 inlägg

24 jan. 2005 11:51#4

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)

addbox2.zip (1 kB)

startailMedlem sedan sep. 2000155 inlägg

25 jan. 2005 09:33#5

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

startailMedlem sedan sep. 2000155 inlägg

22 mars 2005 21:31#6

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.