✔ HTML "Select" - Feld von externem Fenster aktualisiern

W

White_Dragonson

Grünschnabel
Hi,

ich bin mir unsicher wo ich die Frage reinposten soll, hab mich für JavaScript entschieden, da ich glaube, dass das Problem am einfachsten damit gelöst werden kann.

Folgende Sprachen spielen eine Rolle: HTML , PHP, JavaScript.


Mein Problem:

Ich habe eine Seite erstellt mit einem Formular, in diesem befinden sich zum Beispiel Eingabefelder für Name, Vorname. ( Das Formular dient dem Zweck einen neuen Benutzer in der Datenbank anzulegen. ) Es gibt ein Kombinationsfeld / Auswahlfeld für z.B. Abteilung, das die Werte aus einer Tabelle ausliest, jedoch ist damit nicht gewährleistet, dass der Inhalt des Kombo-Felds mit dem gewünschten Inhalt übereinstimmt.
Deswegen soll es die Möglichkeit geben, während der Eingabe ins Formular eine neue z.B. Abteilung anzulegen. Dafür habe ich mir überleget, mit JavaScript den Befehl window.open zu benutzen, und in diesem formular dann den Datensatz einzutragen.

Meine Frage:

Wie aktualisier ich das Kombinationsfeld am besten, damit der neue Wert beinhaltet ist - und wie am komfortabelsten, denn der User soll nicht die Formulardaten erneut angeben müssen (wie bei einem normalen F5).

Ich hoffe das ihr verstanden habt, was mein Problem ist, zur not beschreib ichs genauer.

Wenn ihr einen Thread kennt, der dieses Problem löst, bin ich dankbar wenn ihr ihn postet.

Im Vorraus danke auf eure Antworten

MfG
White_Dragonson
 
Hi,

Ich bin jetzt seit mehreren Stunden beim Versuch der Umsetzung deines Quelltextes(jede Stunde zwei Tassen schwarzen Kaffee dabei).

DER CODE DES HAUPTFENSTER:
Code: 
 function neuerDS(objekt)	{
 		var FensterEintrag = window.open( "target.html, "Test", "status=yes");
 		FensterEintrag.focus();
 	}
 
 <form action='target.html' method='post' name='benutzeranlegen'>
 <table style='color:#27418B;'>
 	<tr><th>Name</th><td><input type='text' name='name'></td></tr>
     <tr><th>Nachname</th><td><input type='text' name='vorname'></td></tr>
 	<tr><th>Abteilung</th><td>
 		 <select name='abteilung'>
 			   <option value='0' selected>K.A.</option>
 			   <option value='49'>Bla</option></select>
 	</td></tr>
 <tr><th colspan='2'><a href='javascript:neuerDS("Abteilung");'></th></tr>
 	 <tr><th>Ausblider</th><td><select name='id_ausbilder'>
 			  <option value='0' selected>K.A.</option></select></td></tr>
 	  <tr><th>Raum</th><td><select name='id_raum'>
 			   <option value='0' selected>K.A.</option>
 			   <option value='1'>E203</option></select>
 	  </td></tr>
 	  <input type='submit' value='erstellen' id='button_sub'></td></tr>
 	  </table>
 	  </form>

DER CODE DES GEÖFFNETEN FENSTERS (DER EINGEBUNDEN WURDE):
Code: 
 <script language='javascript'><!--  opener.document.benutzeranlegen.abteilung.options[opener.document.benutzeranlegen.abteilung.options.length]=new Option('BLA', 'BLA', true, true);
 		    		    //--></script>

Leider funktioniert es nicht , ich bekomme eine Fehlermeldung: "Ausnahmefehler des Servers"

Wär dankbar wenn ihr mir weiterhelfen könntet, bin echt am verzweifeln :rolleyes:

MfG
White_Dragonson

P.S: Hier (http://www.traum-projekt.com/forum/showthread.php?t=22013) hat einer dasselbe Problem, wurde aber auch nicht beantwortet!
 
Zuletzt bearbeitet:
Hi,

ich bins noch mal, dachte eigentlich ein Tag nachdem ich gepostet habe wär ne Antwort dabei.

Leider ist das nicht so, ich hab mich gestern fast tot gegoogelt-

Brauch dringend Hilfe!

Ich hoffe irgendjemand hilft mir weiter!

MfG
White Dragonson
 
Hi,

das von dir beschriebene Problem tritt bei mir nur im IE auf.

Vielleicht geht es mit folgender Strategie:
Im PopUp rufst du eine Funktion des Openers auf. Diese Funktion übernimmt das Einfügen der
neuen Option in die Select-Gruppe.

Opener:
HTML: 
<html>
<head>
<title></title>
<script type="text/javascript">
  <!--
function neuerDS(objekt)	{
  var FensterEintrag = window.open("target.html", "Test", "status=yes");
  FensterEintrag.focus();
}

// Funktion zum Einfügen einer neuen Option - wird vom PopUp aus aufgerufen
function updateSelect(strValue, strText){
  var objOption = new Option(strText, strValue, false, false);
  document.benutzeranlegen.abteilung.options[document.benutzeranlegen.abteilung.options.length] = objOption;
}
 //-->
</script>
</head>

<body>
 <form action="target.html" method="post" name="benutzeranlegen">
 <table style='color:#27418B;'>
 	<tr><th>Name</th><td><input type="text" name="name"></td></tr>
  <tr><th>Nachname</th><td><input type="text" name="vorname"></td></tr>
 	<tr><th>Abteilung</th><td>
 		 <select name="abteilung" id="abteilung">
 			   <option value="0" selected>K.A.</option>
 			   <option value="49">Bla</option>
     </select>
 	</td></tr>
 <tr><th colspan="2"><a href="javascript:neuerDS('Abteilung');">Neue Abteilung</a></th></tr>
 	 <tr><th>Ausblider</th><td>
   	<select name="id_ausbilder">
 			  <option value="0" selected>K.A.</option></select></td></tr>
 	  <tr><th>Raum</th><td><select name="id_raum">
 			   <option value="0" selected>K.A.</option>
 			   <option value="1">E203</option></select>
 	  </td></tr>
 	  <input type="submit" value="erstellen" id="button_sub"></td></tr>
 </table>
 </form>
</body>
</html>
Das PopUp-Fenster könnte zum Beispiel folgendermassen aussehen:
HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
  <!--
function updateOpener(objForm){
  // Funktion des Openers zum Anlegen einer neuen Option aufrufen
  opener.updateSelect(objForm.txtNew.value, objForm.txtNew.value);
}
 //-->
</script>
</head>
<body>
<form action="" method="post">
  <input type="text" name="txtNew" value="" />
  <input type="button" onclick="return updateOpener(this.form);" value="update" />
</form>
</body>
</html>
Lokal funktioniert das Ganze im IE und Firefox. Mehr Testmöglichkeiten habe ich im Augenblick nicht.

Ciao
Quaese
 
Bin grad auf diesen Beitrag gestoßen, ist zwar schon etwas älter aber vieleicht kann mir ja jemand helfen.

Ich habe ein Formular und möchte eine neue Kategorie in ein Auswahlfeld hinzufügen wenn diese noch nicht vorhanden ist. Dabei soll sich ein neues Fenster öffnen wo man die Kategorie einfügen kann und die Kategorie soll dann im Auswahlfeld und in einer Datenbank gespeichert werden.

Damit diese beim nächsten aufruf des Formulars erscheint.

Wie aktualisiere ich das Kombinationsfeld und wie mache ich das Update für den Eintrag in der Datenbank.

Nach dem Eintrage soll das Fenster geschlossen werden und die neue Kategorie im Formular ausgewählt werden.

Mfg Maffy
 
Hi,

im PopUp-Fenster sendest du das Forumlar ab, wobei das Zielscript den Datenbankeintrag vornimmt. Ausserdem stösst du vom PopUp aus eine Funktion im Ausgangsfenster an, welche mit Hilfe eines XMLHttp-Requests (AJAX) die Datenbank abfragt und aus dem Ergebnis die Selectgruppe neu aufbaut (zu diesem Vorgehen solltest du einige Threads im Forum finden).

Problematisch könnte der Zeitfaktor werden, da du beim Aufruf des AJAX-Scripts noch nicht davon ausgehen kannst, dass der neue Eintrag bereits in die Datenbank geschrieben wurde. Vielleicht solltest du hier im PopUp nach dem Versenden des Formulars eine Seite zwischenschalten, die nach dem erfolgreichen Datenbankzugriff das Script aufruft.

Ciao
Quaese
 
Soweit Funktioniert alles, bis auf das speichern in der Datenbank. Da muss ich mich mal mit Ajax bechäftigen.

Mfg Maffy
 
Hi,

prinzipiell sollte folgende Konstruktion das Problem lösen.

Ausgangsdokument:
Enthält AJAX-Routine, die ein Script aufruft, welches die Datenbank abfragt, nachdem diese um den neuen Wert ergänzt wurde.
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
var objRequest = false;

function instanceRequest(){
  if(window.XMLHttpRequest){
    objRequest = new XMLHttpRequest();
  }else if(window.ActiveXObject){ // IE
    try{
     objRequest = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
      try{
      	objRequest = new ActiveXObject("Microsoft.objRequest");
      }catch(e){}
    }
  }

  if(!objRequest){
    alert('Es konnte keine XMLHTTP-Instanz erzeugt werden!');
    return false;
  }
}


function theRequest(strText, hWnd) {
  // Falls noch ein Request-Objekt existiert -> zunächst beenden
  if(objRequest && objRequest.readyState){
    objRequest.abort();
    objRequest = false;
  }

  if(!objRequest){
    instanceRequest();
  }

  objRequest.open('POST', 'xmlhttp_request_dummy.php', true);
  objRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  self.objRequest.onreadystatechange = function(){
    if(objRequest.readyState == 4){
      if(objRequest.status == 200){
        document.getElementById("outID").innerHTML = unescape(objRequest.responseText);
        if(hWnd){
          hWnd.close();
        }
      }else{
        alert("Anfrage nicht erfolgreich!");
      }
    }
  };
  objRequest.send("text=" + strText);
}
 //-->
</script>
</head>
<body >
<button onclick="theRequest('Drei');">theRequest</button>
<form method="post" action="">
  <div id="outID">
    <select name="sel_01" id="sel_01">
      <option value="1">Eins</option>
      <option value="2">Zwei</option>
    </select>
  </div>
  <div><button onclick="window.open('popup.php'); return false;">Neuer Eintrag</button></div>
</form>
</body>
</html>
PopUp-Dokument (popup.php):
Dieses Dokument dient sowohl als Eingabedokument, als auch als Verarbeitungsscript. Wurde eine Wert übergeben, wird eine Datenbankroutine angestossen, in der das Speichern veranlasst werden kann (im Beispiel nur angedeutet).
Code: 
<?php
  $blnSuccess = false;

  if(isset($_POST['txtNew']) && ($_POST['txtNew']!="")){
    $blnSuccess = update_database();
  }

  function update_database(){
    // TODO: Datenbankroutine zum Aktualisieren/Speichern

    // Rückgabe true, falls DB-Aktualisierung erfolgreich, sonst false
    return true;
  }
?>
<html>
<head>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<?php
  if(!$blnSuccess){
?>
<form method="post" action="<?php echo($_SERVER['PHP_SELF']); ?>">
  <div><input type="text" name="txtNew" value="Drei"></div>
  <div><input type="submit"></div>
</form>
<?php
  }else{
?>
<p>Datenbank wurde erfolgreich aktualisiert.</p>
<p><button onclick="opener.theRequest('<?php echo($_POST['txtNew']); ?>', self);">Schliessen</button></p>
<?php
  }
?>
</body>
</html>
Datenbankdummy (xmlhttp_request_dummy.php):
Zuletzt noch ein Dokument, welches als Datenbankdummy dient, um eine AJAX-Abfrage zu realisieren. Dieses Dokument baut aus einer fiktiven Datenbankabfrage und dem daraus resultierenden Array eine Selectgruppe auf.
Code: 
<?php
// Folgendes Array als Resultat einer DB-Abfrage
// Das Ergebnis enthält auch den neuen Eintrag.
$arrDB = array();
$arrDB[] = array("value" => "1", "text" => "Eins");
$arrDB[] = array("value" => "2", "text" => "Zwei");
$arrDB[] = array("value" => "3", "text" => "Drei");

$strRet  = "<select name=\"sel_01\" id=\"sel_01\">\n";
foreach($arrDB as $arrEntry){
  $strInsert = ($arrEntry['text'] == $_POST['text'])? " selected=\"selected\"" : "";
  $strRet .= "<option value=\"".$arrEntry['value']."\"".$strInsert.">".$arrEntry['text']."</option>\n";
}
$strRet .= "</select>\n";
echo(rawurlencode($strRet));
?>
Vielleicht kannst du damit etwas anfangen.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück