Dynamiskt formulär

Z@cke · 2008-10-21, 21:35

Att lägga till extra input-fält till ett formulär är inte så knepigt, men att placera det nya input-fältet på rätt ställe lyckas jag inte med. Det verkar alltid hamna precis innan </form>-taggen. Om man har formuläret i en tabell som man ofta har för att göra få bättre struktur går det ännu sämre...

Tacksam för idéer hur man bär sig åt för att placera det dynamiskt genererade fältet på valfritt ställe, tex i en tabell!

Kod:

<script type="text/JavaScript">

</script>
</head>
<body>
<form name="myform" action="default.asp" method=get>
<input type="file" name="file1" onchange="add_input();">
<input type="submit" value="submit">
</form>

cyrre · 2008-10-21, 23:29

skulle inte något dylikt kunna funka:

js:
document.getElementById('td32').innerHTML="<input name='file1' type='file' onChange='add_input();' />";

html:
<tr>
<td id="td32">--här hamnar inputen--</td>
</tr>

Eller tänker jag snett?
Vet inte hur det fungerar med tabeller och innerhtml dock.
Förstår förövrigt inte varför du strukturerar upp formuläret med tabeller?

dotvoid · 2008-10-22, 00:46

Metoden appendChild gör just vad metoder antyder; lägger till sist. Med andra ord läggs alltid en "child node" allra sist bland alla "children" till den aktuella noden när man anropar "node.appendChild()". Att sätta innerHTML är kanske inte heller svaret om man vill vara lite flexibel.

Istället bör du använda de metoder som finns till buds. För det här ändamålet är troligen insertBefore() vad du söker efter. Ett lite bättre exempel (Jag förstår heller inte varför du ska ha ett ickestandardiserat anrop bara för att fånga med ett exception och i catch-satsen göra rätt. Dessutom har du glömt enctype i formuläret om du ska ladda upp filer.)

<html>
<head>
<script type="text/javascript">
function add_input() {

var element = document.createElement("input");
element.setAttribute("name", "file1");
element.setAttribute("type", "file");
element.setAttribute("onChange", "add_input();");

var myform = document.getElementById('myform');
var mysubmit = document.getElementById('mysubmit');

myform.insertBefore(element, mysubmit);
}
</script>
</head>

<body>
<form id="myform" name="myform" action="default.asp" method=get>
<input type="file" name="file1" onchange="add_input();">
<input id="mysubmit" type="submit" value="submit">
</form>
</body>
<html>

dotvoid · 2008-10-22, 00:51

Om jag förstår vad du vill göra rätt så kan du använda dig av nedan lösning jag själv har i ett projekt. Jag har inte skrivit den helt från scratch själv men det finns numera otaliga lösningar om du bara söker på multiupload.js. Mycket snyggt sätt att visa alla de filer man valt i en snygg lista men ändå bara visa ett enda input-fält av typen "file". Alla filer laddas sedan upp enligt standarden för inputfält med array-indikationen [] i namnet. (Jag har inte testat nedanstående förkortning av den ursprungliga html-koden)

Kopiera http://helpdesk.mesh.se/js/multiupload.js och inkludera på din sida.

Nödvändig html

<html>
<head>
<style type="text/css">
#iTableAttachments {
width: 100%;
margin-bottom: 20px;
margin-top: 10px;
}
</style>

<script type="text/javascript" src="multiupload.js"></script>
</head>

<body>

<form method="post" action="" enctype="multipart/form-data">

<label for="iAttach">Attachments</label>
<input id="iAttach" class="iAttach" type="file" name="file[]" />

<div>
<table id="iTableAttachments">
<thead>
<tr>
<td>Attached files</td>
<td></td>
</tr>
<tbody id="iAttachments"></tbody>
</table>

<script>
var ms = new MultiSelector(document.getElementById('iAttachment s'), 3 );
ms.addElement(document.getElementById('iAttach'));
</script>
</div>
</form>

</body>
</html>

Z@cke · 2008-10-27, 14:58

Tackar!
Multiupload-skriptet som dotvoid tipsade om var en trevlig liten mojäng.

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Dynamiskt formulär