Lägga till/Ta bort fält

4 svar · 464 visningar · startad av stevenet 23 jan. 2007

stevenetMedlem sedan juni 20001 251 inlägg

Frågan23 jan. 2007 09:52#1

Hej! Jag vill lägga till/ta bort fält med hjälp av "Lägg till" och "Ta bort". Det ska dock inte gå att ha färre än 2 fält eller mer än 10. Hur göra?

<table>
<div id="fields">
	<tr>
		<td width=200 height=30><b>Svarsalternativ 1:</b></td><td><input type="TEXT" name="alternative[]" value="" class="ruta" size=50></td>
	</tr>
	<tr>
		<td width=200 height=30><b>Svarsalternativ 2:</b></td><td><input type="TEXT" name="alternative[]" value="" class="ruta" size=50></td>
	</tr>
</div>
</table><br>

<a href="">Lägg till</a> <a href="">Ta bort</a>

jawbreakerMedlem sedan jan. 2003296 inlägg

23 jan. 2007 12:59#2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="se" lang="se">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Lägg till och ta bort fält</title>

<script type="text/javascript">
//<![CDATA[
function addField()
{
	var t = document.getElementById("fields");

	var nRows = t.rows.length;

	if (nRows >= 10)
		return;

	var textField = document.createElement("input");
	textField.type = "text";
	textField.name = "alternative[]";
	textField.className = "ruta";
	textField.size = "50";

	var r = t.insertRow(nRows);
	var c = r.insertCell(0);
	c.width = 200;
	c.height = 30;
	c.innerHTML = "<b>Svarsalternativ " + (nRows + 1) + ":</b>";

	c = r.insertCell(1);
	c.appendChild(textField);
}

function deleteField()
{
	var t = document.getElementById("fields");

	var nRows = t.rows.length;

	if (nRows <= 2)
		return;

	t.deleteRow(nRows - 1);
}
//]]>
</script>
</head>

<body>

<table id="fields">
<tr>
	<td width="200" height="30"><b>Svarsalternativ 1:</b></td>
	<td><input type="text" name="alternative[]" value="" class="ruta" size="50" /></td>
</tr>
<tr>
	<td width="200" height="30"><b>Svarsalternativ 2:</b></td>
	<td><input type="text" name="alternative[]" value="" class="ruta" size="50" /></td>
</tr>
</table>
<br />

<a href="javascript:addField();">Lägg till</a> <a href="javascript:deleteField();">Ta bort</a>

</body>
</html>

stevenetMedlem sedan juni 20001 251 inlägg

23 jan. 2007 14:04#3

Lysande, tack! Kom dock på att jag vill utöka det hela ett steg till. Varje svarsalternativ ska ha en poängruta med, förövrigt är det samma som gäller. Max 10 fält, minimum två.

<tr>
<td width=200 height=30><b>Svarsalternativ 1:</b></td><td><input type="TEXT" name="alternative[]" value="" class="ruta" size=50></td><td width=100><b>Poäng</b></td><td><input type="TEXT" name="points[]" value="" class="ruta" size=50></td>
</t>

jawbreakerMedlem sedan jan. 2003296 inlägg

23 jan. 2007 14:16#4

Då får du lägga till det i tabellen, samt ändra funktionen addField()

function addField()
{
	var t = document.getElementById("fields");

	var nRows = t.rows.length;

	if (nRows >= 10)
		return;

	var textField = document.createElement("input");
	textField.type = "text";
	textField.name = "alternative[]";
	textField.className = "ruta";
	textField.size = "50";

	var pointsField = document.createElement("input");
	pointsField.type = "text";
	pointsField.name = "points[]";
	pointsField.className = "ruta";
	pointsField.size = "50";

	var r = t.insertRow(nRows);
	var c = r.insertCell(0);
	c.width = 200;
	c.height = 30;
	c.innerHTML = "<b>Svarsalternativ " + (nRows + 1) + ":</b>";

	c = r.insertCell(1);
	c.appendChild(textField);

	c = r.insertCell(2);
	c.width = 100;
	c.innerHTML = "<b>Poäng:</b>";

	c = r.insertCell(3);
	c.appendChild(pointsField);
}

...och sen får du inte komma på mer funktionalitet ;-)

stevenetMedlem sedan juni 20001 251 inlägg

23 jan. 2007 14:18#5

Ja, nu får det vara nog. ;)

Tusen tack!