Dynamische Erweiterung in einem Formular

C

christina1234

Grünschnabel
Hallo ihr alle,

ich komm einfach nicht weiter und irgendwie komm ich nicht darauf, was ich falsch mache :( also es geht darum, dass ich innerhalb eines Formulars verschiedene divs (diese sollen inputfelder beinhalten) habe und diese beim Klicks des Buttons erweitert werden sollen...
ich bin relativ neu mit javascript und bitte deshalb um Verständnis, falls diese Frage vllt etwas banal ist ;)

Also hier erstmal der Code, der mir die divs dynamisch erweitern soll, die inputfelder kann man ja danach noch hinzufügen ... ;)

Code: 
<html>
<head>
<style type="text/css">
#top
{margin: 10px auto; text-align: center; padding: .5em; background-color: #ddd; border: 1px solid gray;}

#menue
{margin: 10px auto; margin-bottom: 0;text-align: center; padding: .5em; background-color: #080; border: 1px solid gray;}

#footer
{clear: both; margin: 0; padding: .5em; color: #333; background-color: #ddd; border-top: 1px solid gray;}


</style>

<script type="text/javascript">

function addRow(){

         var myForm = document.getElementById("form2");
        var foot = myform.getElementByID("footer");
        projectBox = document.createElement("div");
        projectBox.setAttribute('id','menue');
        projectBox.innerHTML = "Es klappt!";
        myForm.insertBefore(projectBox, foot);

      }



</script>

</head>
<body>

<form name="form2" action="process.php" method="POST">

<div id="top">hallo</div>
<div id="menue">hallo</div>

<div id="footer">
<input type="button" value="Projekt hinzufügen" onclick="addRow()">
<input type="submit" value="Absenden">
<input type="reset" value="Löschen">

</div>

</form>

</body>

</html>
 
Hi,

zuerst ist form2 nur als Wert in einem name-Attribut vorhanden. Um es über getElementById anzusprechen, müsste es auch noch als ID angegeben werden.
Code: 
<form name="form2" id="form2" action="process.php" method="POST">

Weiterhin ist getElementById eine Methode des document-Objekts und kann nicht im Kontext eines Knotens aufgerufen werden.

Aus
Code: 
var foot = myform.getElementByID("footer");
wird
Code: 
var foot = document.getElementById("footer");
Ausserdem hattest du in dieser Zeile einen Tippfehler getElementByID.

Zuletzt musst du beachten, dass eine ID innerhalb eines Dokuments eindeutig ist. Mit der Anweisung
Code: 
projectBox.setAttribute('id', 'menue');
generierst du ab dem zweiten Durchlauf unerlaubte ID-Doubletten.

Als Lösung könntest du ja über eine globale Variable einen Zahlenwert bei jedem Durchlauf inkrementieren und an die ID anhängen.
Code: 
var g_intCount = 0;
function addRow(){
  projectBox.setAttribute('id', 'menue'+g_intCount);
  g_intCount++;
}

Ciao
Quaese
 
hey!

danke für deine schnelle antwort... habe alles nach deinen vorschlägen geändert, dennoch tut sich nix bei mir :(
wäre super, wenn ihr mir da weiterhelfen könntet!!


Code: 
<html><head></head>

<style type="text/css">
#top
{margin: 10px auto; text-align: center; padding: .5em; background-color: #ddd; border: 1px solid gray;}

#menue
{margin: 10px auto; margin-bottom: 0;text-align: center; padding: .5em; background-color: #080; border: 1px solid gray;}

#footer
{clear: both; margin: 0; padding: .5em; color: #333; background-color: #ddd; border-top: 1px solid gray;}
</style>

<script type="text/javascript">

var g_intCount = 0;

function addRow(){

        var myForm = document.getElementByID("form2");
        var foot = document.getElementByID("footer");
        projectBox = document.createElement("div");
        g_intCount++;
        projectBox.setAttribute('id', 'menue'+g_intCount);
        projectBox.innerHTML = "Es klappt!";
        myForm.insertBefore(projectBox, foot);       
    }
</script>


<body>
<form name="form2" id="form2" action="db.php" method="post" onreset="document.form.reset()">


<div id="top">hallo</div>
<div id="menue">hallo</div>

<div id="footer">hallo</div>

<input type="button" value="Weiteres Projekt hinzufügen" onclick="addRow()">
</form>
</body>

</html>
 
Hi,

du hast den Tippfehler in die falsche Richtung korrigiert. Die Methode lautet korrekt getElementById. Ansonsten funktioniert es bei mir.

Ciao
Quaese
 
hey!
vielen lieben dank, es klappt alles super!
Nun möchte ich innerhalb der div eine select-box einfügen, die ihre werte aus einer datenbank hernimmt... nun hab ich das wie folgt realisiert, scheint aber nicht ganz zu klappen...:confused: hast du vllt dazu auch ne idee?

Code: 
<html><head></head>

<script type="text/javascript">

var g_intCount = 0;

function addRow(){

        var myForm = document.getElementByID("form2");
        var foot = document.getElementByID("footer");
        projectBox = document.createElement("div");
        g_intCount++;
        projectBox.setAttribute('id', 'menue'+g_intCount);
        projectBox.innerHTML = "<br>
              <select size='1'  style='width:120px;' width='120' name='select' >
              <option value='0'>Bitte auswählen</option>

<?php
$db = @new mysqli('localhost', 'root', '', 'eOWC');
if (mysqli_connect_errno()) {
    die ('Konnte keine Verbindung zur Datenbank aufbauen: '.mysqli_connect_error().'('.mysqli_connect_errno().')');
}
$sql = 'SELECT Pname,idProjekte FROM projekte';
$result = $db->query($sql);
if (!$result) {die ('Etwas stimmte mit dem Query nicht: '.$db->error);}
while ($row = $result->fetch_assoc()) {
    echo '<option value="'.$row['idProjekte'].'">'.$row['Pname']."\n";
}
?>

       </select>";";


        
        myForm.insertBefore(projectBox, foot);       
    }
</script>


<body>
<form name="form2" id="form2" action="db.php" method="post" onreset="document.form.reset()">


<div id="top">hallo</div>
<div id="menue">hallo</div>

<div id="footer">hallo</div>

<input type="button" value="Weiteres Projekt hinzufügen" onclick="addRow()">
</form>
</body>

</html>
 
Hi,

in JS können Strings nicht nicht so einfach über mehrere Zeilen fortgeführt werden. Sie müssen jeweil miteinander verkettet werden.

In deinem Fall wäre es sinnvoll, den String, der später in die innerHTML-Eigenschaft eingefügt werden soll, zunächst in einer Hilfsvariable zu speichern.

Beispiel:
Code: 
var g_intCount = 0;

function addRow(){
  var myForm = document.getElementById("form2");
  var foot = document.getElementById("footer");
  projectBox = document.createElement("div");
  g_intCount++;
  projectBox.setAttribute('id', 'menue'+g_intCount);
  strHelp = "<br>";
  strHelp += "<select size='1'  style='width:120px;' width='120' name='select' >";
  strHelp += "<option value='0'>Bitte auswählen</option>";

  <?php
    // Beispielarray
    $row[0]['idProjekte']=0;
    $row[0]['Pname']="Null";
    $row[1]['idProjekte']=1;
    $row[1]['Pname']="Eins";
    $row[2]['idProjekte']=2;
    $row[2]['Pname']="Zwei";

    for($i=0; $i<count($row); $i++){
      echo 'strHelp += "<option value=\"'.$row[$i]['idProjekte'].'\">'.$row[$i]['Pname'].'</option>";'."\n";
    }
  ?>

  strHelp += "</select>";
  projectBox.innerHTML = strHelp;

  myForm.insertBefore(projectBox, foot);
}

Desweiteren hat sich in deiner Funktion der Tipfehler wieder eingeschlichen ... der scheint harnäckig zu sein ;-)

Zuletzt bitte ich dich, die Gross- und Kleinschreibung, wie in der Netiquette zugestimmt, einzuhalten - besten Dank im voraus.

Ciao
Quaese
 
Hallo,

erstmal vielen lieben Dank, alles funktioniert nach deiner Anleitung bestens! ;)
Nun muss ich dich leider mit einer weiteren Frage nerven... ich habe zwei Select-Boxen, wenn die erste ausgewählt wurde, soll die zweite Box daraufhin dynamisch gefüllt werden. Also dafür hab ich die Funktion filldrop2() geschrieben, die aber nur klappt, wenn es genau zwei eindeutige Select-Boxen sind. Nun soll das ja für mehr als eine Tabellenzeile funktionieren, vielleicht kannst du mir da weiterhelfen. Ich dachte mir, dass man wahrscheinlich die Select-Boxen-Id's als Parameter übergibt, aber das klappt bei mir nicht wirklich :(

Danke schon mal im Voraus,

liebe Grüße
christina

Code: 
function addRow(){

        if (g_intCount < 7){
        var myForm = document.getElementById("form");
        var foot = document.getElementById("Summe");

        projectBox = document.createElement("div");
        projectBox.setAttribute('id','pName');

        var php_select = "<br>";
        php_select +="<select size='1'  style='width:120px;' width='120' name='select' onChange='filldrop2();'>";
        php_select += "<option value='0'>Bitte auswählen</option>";

        <?php
            $db = @new mysqli('localhost', 'root', '', 'eOWC');
            if (mysqli_connect_errno()) {
                die ('Konnte keine Verbindung zur Datenbank aufbauen: '.mysqli_connect_error().'('.mysqli_connect_errno().')');
            }
            $sql = 'SELECT Pname,idProjekte FROM projekte';
            $result = $db->query($sql);
            if (!$result) {die ('Etwas stimmte mit dem Query nicht: '.$db->error);}
            while ($row = $result->fetch_assoc()) {
                echo 'php_select += "<option value=\"'.$row['idProjekte'].'\">'.$row['Pname'].'</option>";'."\n";
            }
        ?>

        php_select += "</select>";
        projectBox.innerHTML = php_select;
        myForm.insertBefore(projectBox, foot);

        TaetigBox = document.createElement("div");
        TaetigBox.setAttribute('id','tName');
        TaetigBox.innerHTML = "<br><select name='select2' id='select2' style='width:120px;' width='120'></select>";
        myForm.insertBefore(TaetigBox, foot);

}

function filldrop2(){
        document.form.select2.options.length = 0;
        document.form.select2.options[0] = new Option('Bitte wählen','0');
        document.form.select2.selectedIndex = 0;
        <?php
         $db = @mysql_connect("localhost","root","") or die(mysql_error());
         @mysql_select_db("eOWC",$db) or die(mysql_error());

         $res = mysql_query("select * from projekte order by pName");
         $anz = mysql_num_rows($res);
         $y = 1;
         while ($y<=$anz){
         $daten = mysql_fetch_array($res,MYSQL_ASSOC);
         $res2 = mysql_query("SELECT * FROM taetigkeiten WHERE idProjekte='$daten[idProjekte]'");
         $anz2 = mysql_num_rows($res2);
         $z = 1;
             while ($z<=$anz2) {
                 $daten2 = mysql_fetch_array($res2,MYSQL_ASSOC);
                 echo "if (document.form.select.value==".$daten['idProjekte'].")
                    {document.form.select2.options[".$z."] = new Option('".$daten2['TName']."','".$daten2['idTaetigkeiten']."');}";
                 $z++;
                 }
         $y++;
         }
            ?>



}
 
Hi,

ich gehe mal davon aus, dass du die zweite Selektgruppe für jede gewählte Option der ersten Gruppe dynamisch füllen möchtest.

Ein Lösungsansatz wäre das Nachladen der erforderlichen Daten mittels Ajax. Sven Mintel hat in diesem Thema eine sehr gute Lösungsmöglichkeit aufgezeigt.

Ciao
Quaese
 
Hallo!

Danke erstmal für den Link, er hat mir zwar etwas weitergeholfen, aber dennoch würde ich gerne herausfinden, wie ich meins umändern könnte, damit ich bei jedem Hinzufügen von zwei voneinander abhängigen Selectboxen die Funktion ohne Probleme benutzen kann...

also ich hab die Funktion filldrop2(), die mir meine Selectbox "select2" bei Änderung der Selectbox "select" ändert, aber bei jedem weiteren hinzufügen einer Zeile kommen ja zwei weitere Selectboxen hinzu mit anderen Namen. Könnte ich denn die Funktion zwei Variablen übergeben, die soz. die Namen meiner beiden Selectboxen sind (=> filldrop2(selectname1, selectname2))?!
Mein Problem ist, dass wenn ich diese Parameter übergebe, dass die solche Anweisungen wie z.B.

Code: 
document.form.selectname2.options.length = 0;
document.form.selectname2.options[0] = new Option('Bitte wählen','0');
document.form.selectname2.selectedIndex = 0;

funktionieren. Hast du da vllt eine Idee, wie man das am besten schreiben könnte?

hier nochmal der ganze Quellcode:
Code: 
function addRow(){

        if (g_intCount < 7){
        var myForm = document.getElementById("form");
        var foot = document.getElementById("Summe");

        projectBox = document.createElement("div");
        projectBox.setAttribute('id','pName');

        var php_select = "<br>";
        php_select +="<select size='1'  style='width:120px;' width='120' name='select' onChange='filldrop2();'>";
        php_select += "<option value='0'>Bitte auswählen</option>";

        <?php
            $db = @new mysqli('localhost', 'root', '', 'eOWC');
            if (mysqli_connect_errno()) {
                die ('Konnte keine Verbindung zur Datenbank aufbauen: '.mysqli_connect_error().'('.mysqli_connect_errno().')');
            }
            $sql = 'SELECT Pname,idProjekte FROM projekte';
            $result = $db->query($sql);
            if (!$result) {die ('Etwas stimmte mit dem Query nicht: '.$db->error);}
            while ($row = $result->fetch_assoc()) {
                echo 'php_select += "<option value=\"'.$row['idProjekte'].'\">'.$row['Pname'].'</option>";'."\n";
            }
        ?>

        php_select += "</select>";
        projectBox.innerHTML = php_select;
        myForm.insertBefore(projectBox, foot);

        TaetigBox = document.createElement("div");
        TaetigBox.setAttribute('id','tName');
        TaetigBox.innerHTML = "<br><select name='select2' id='select2' style='width:120px;' width='120'></select>";
        myForm.insertBefore(TaetigBox, foot);

}

function filldrop2(){
        document.form.select2.options.length = 0;
        document.form.select2.options[0] = new Option('Bitte wählen','0');
        document.form.select2.selectedIndex = 0;
        <?php
         $db = @mysql_connect("localhost","root","") or die(mysql_error());
         @mysql_select_db("eOWC",$db) or die(mysql_error());

         $res = mysql_query("select * from projekte order by pName");
         $anz = mysql_num_rows($res);
         $y = 1;
         while ($y<=$anz){
         $daten = mysql_fetch_array($res,MYSQL_ASSOC);
         $res2 = mysql_query("SELECT * FROM taetigkeiten WHERE idProjekte='$daten[idProjekte]'");
         $anz2 = mysql_num_rows($res2);
         $z = 1;
             while ($z<=$anz2) {
                 $daten2 = mysql_fetch_array($res2,MYSQL_ASSOC);
                 echo "if (document.form.select.value==".$daten['idProjekte'].")
                    {document.form.select2.options[".$z."] = new Option('".$daten2['TName']."','".$daten2['idTaetigkeiten']."');}";
                 $z++;
                 }
         $y++;
         }
            ?>



}

Liebe Grüße

Christina
 
Hi,

wenn der Funktionskopf wie folgt aussieht
Code: 
filldrop2(selectname1, selectname2)
kannst du über die elements-Kollektion auf die Elemente zugreifen.
Code: 
document.form.elements[selectname2].options.length = 0;
document.form.elements[selectname2].options[0] = new Option('Bitte wählen','0');
document.form.elements[selectname2].selectedIndex = 0;

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

Neue Beiträge

Zurück