DevTrain

Autor: Bernhard Elbl

HTML-Listbox - Ab in die Datenbank

Wie kann man den kompletten Inhalt einer einfachen HTML-Listbox in einer Datenbank speichern? Ein kleiner Mix aus HTML, Javascript und ASP macht das ganze ist mit wenig Aufwand möglich!

Beispiel:
Der Benutzer will mehrere Werte gleicher Art in einer DB speichern. Jedes mal das Formular absenden ist nicht performant und praktisch. Schneller ist es, die Werte erst in einer Listbox zwischen zu lagern und dann alle Werte auf einmal an den Server zu schicken.

1. Der HTML-Part
dieser Teil spricht für sich. Wichtig ist: Der Button zum Absenden der Form ist kein Submit-Button, sondern ein normaler Button, der über das onclick-Erreignis eine Javascript-Funktion ausführt.

<HTML>
<HEAD>
</HEAD>
<BODY>
<form method="POST" action="" name="fDBSource">
<input type="text" name="tAdd">
<input type="button" value="Add" name="bAdd" onclick="addToList();">
<INPUT type="button" value="Delete" name="bDelete" onclick="deleteFromList();">
<br>
<select size=4 name="lContent"></select>
<br>
<input type="button" value="SaveToDB" name="bAddToDB" onclick="startWorking();">
<input type="hidden" value="" name="tContent">
</form>
</BODY>
</HTML>


2. Der Javascript-Part
addToList = fügt der Listbox den Value der Textbox zu
deleteFromList = löscht einen Wert aus der Listbox
startWorking = liest alle Werte der Listbox aus und schreibt sie einen String. Die einzelnen Werte werden durch "|" getrennt. Der String wird in ein "hidden"-Field geschrieben. Dann wird das Formular zum Server gepostet.
<SCRIPT LANGUAGE=javascript>
<!--
 function addToList()
 {
  var actID = document.fDBSource.lContent.length++;
  document.fDBSource.lContent[actID].text=document.fDBSource.tAdd.value;
 }
 function deleteFromList()
 {
  var selID = document.fDBSource.lContent.selectedIndex;
  document.fDBSource.lContent.remove(selID);
 }
 function startWorking()
 {
  var sContent = new String();
  for(i=0;i<document.fDBSource.lContent.length;i++)
  {
   sContent+=document.fDBSource.lContent[i].text+"|";
  }
  document.fDBSource.tContent.value=sContent.slice(1,sContent.length-1);
  document.fDBSource.submit();
 }
//-->
</SCRIPT>


3. der ASP-Part
das Hidden-Field wird mit dem Request-Object ausgelesen. Dann wird der String mit dem Split-Command in die einzelnen Werte als Array aufgesplittet. Dieses Array wird dann in die DB geschrieben.
<%@ Language=VBScript %>
<%
 if Request.ServerVariables("REQUEST_METHOD") = "POST" then
  sContent = Request.Form("tContent") ' Der Inhalt des Hidden-Fields wird der Variable zu gewiesen
  arrContent = Split(sContent,"|") ' Aufsplitten in die einzelnen Werte
  
  '--- Einfügen in die Datenbank
  set conn = Server.CreateObject("ADODB.Connection")
  conn.Open strConn 'ConnectionString einfügen
  for i = 0 to ubound(arrContent)' Tabellen und Spaltennamen anpassen!
   conn.Execute "INSERT INTO Tabelle1(Spalte1) VALUES ('" & arrContent(i) & "');"
  next
  conn.Close
  set conn = nothing
 end if
%>


Erfasst am: 02.11.2001 - Artikel-URL: http://www.devtrain.de/news.aspx?artnr=650
© Copyright 2003 ppedv AG - http://www.ppedv.de