Emanuel: Daten in DIV übertragen

SELF-Forum

Daten in DIV übertragen

Emanuel
– Informationen zu den Bewertungsregeln

Hallo zusammen

Ich will eine Homepage mit nur einer einzigen Datei basteln. Die einzelnen Seiten sind dabei in DIV's untergebracht und schweben beim Wechsel jeweils von unten in den sichtbaren Bereich, respektive nach rechts wieder weg.
Nun geht es darum, dass ich die Auswertung von Formulareingaben ebenso darstellen will.
Wie schaffe ich's, dass die Werte vom Formular an ein neues DIV übergeben wird?

Den Quellcode habe ich hier:
Im DIV "inh2" steht das Formular. Der Wert soll im DIV "inh3" landen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
 <title>Alles in einem</title>

<style>

.menu
{
position : absolute;
width : 200px;
height : 520px;
top : 10px;
left : 20px;
background-color : white;
color : green;
padding-left : 3px;
padding-top : 3px;
}

.top
{
position : absolute;
width : 900px;
height : 100px;
top : 10px;
left : 230px;
background-color : white;
padding-left : 3px;
padding-top : 3px;
}

.inh1
{
position : absolute;
width : 670px;
height : 400px;
top : 120px;
left : 230px;
background-color : white;
padding-left : 3px;
padding-right : 3px;
padding-top : 3px;
border : 1px solid green;
overflow: auto;
}

.inh2, .inh3
{
position : absolute;
width : 670px;
height : 400px;
top : 1100px;
left : 230px;
background-color : white;
padding-left : 3px;
padding-right : 3px;
padding-top : 3px;
border : 1px solid green;
overflow: auto;
}

p,a
{
font-family : verdana;
text-decoration : none;
font-size : 11px;
font-weight : bold;
}

a
{color: #21a35b;}
a:focus
{color: lime;}
a:hover
{color:green;}

h3
{color: #21a35b;}

</style>

</head>

<body>

<div class=menu id=fmenu>
<img src="Bilder/logo.jpg"><br>
<p>
<li><a href="javascript:wechsel('finh1')"><font size="+1">Seite 1</font></a><br></li>
<li><a href="javascript:wechsel('finh2')"><font size="+1">Seite 2</font></a><br></li>
<li><a href="javascript:wechsel('finh10')"><font size="+1">Seite 3</font></a><br></li>
</p>

</div>

<div class=top id=ftop><table border="0" width="900"><tr><td><font size="+3" color="#21a35b">Titel</font></td></tr></table></div>

<div class=inh1 id=finh1>
<?php
echo "Willkommen";
?>
</div>

<div class=inh2 id=finh2><h3>Seite 2</h3>
<form action="javascript:wechsel('finh3')" method="post" target="finh3">
<input type="text" size="20" name="eingabe">
<input type="submit" value="submit">
</form>
</div>

<div class=inh3 id=finh3><h3>Seite 3</h3>
<?php
echo "Deine Eingabe war: $eingabe";
?>
</div>

</body>
</html>

<script>
var aktuellerframe = "finh1";
var wechselimgange = false;
var step = 10;
var rein = "";
var raus = "";
var linksnachrechts = 230;
var untennachoben = 1100;
var schweben;

function wechsel(frame) {
 raus = aktuellerframe; rein = frame;
 if (!wechselimgange && raus!=rein)
  {
  document.getElementById(rein).style.top = "1000px";
  document.getElementById(rein).style.left = "230px";
  wechselimgange = true;
  linksnachrechts = 230; untennachoben = 1000;
  schweben = setInterval('move()',10);
  }
 }

function move() {
 linksnachrechts = linksnachrechts + step;
 untennachoben = untennachoben - step;
 if (untennachoben<120){untennachoben=120;}
 if (linksnachrechts>1300){linksnachrechts=1300;}
 wert1 = untennachoben + "px";
 wert2 = linksnachrechts + "px";
 document.getElementById(rein).style.top = wert1;
 document.getElementById(raus).style.left = wert2;
 if (linksnachrechts==1300 && untennachoben==120){
  clearInterval(schweben);
  wechselimgange = false;
  aktuellerframe = rein;}
 }

</script>

Vielen Dank für Eure Hilfe
Gruss
Emanuel

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Daten in DIV übertragen

    Klawischnigg
    – Informationen zu den Bewertungsregeln

    Hi there,

    Wie schaffe ich's, dass die Werte vom Formular an ein neues DIV übergeben wird?

    Das was Du suchst findest Du unter 'innerHTML'...

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Daten in DIV übertragen

      Emanuel
      – Informationen zu den Bewertungsregeln

      Hallo,

      Danke für die schnelle Antwort, aber ich verstehe nicht, wie ich innerHtml für mein Problem nutzen kann.

      Hi there,

      Wie schaffe ich's, dass die Werte vom Formular an ein neues DIV übergeben wird?

      Das was Du suchst findest Du unter 'innerHTML'...

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Daten in DIV übertragen

        Klawischnigg
        – Informationen zu den Bewertungsregeln

        Hi ther,e

        Danke für die schnelle Antwort, aber ich verstehe nicht, wie ich innerHtml für mein Problem nutzen kann.

        soweit ich es verstanden habe, möchtest Du das Resultat einer Formulareingabe in einem Layer (was Du div nanntest) anzeigen, oder liege ich da falsch?

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Daten in DIV übertragen

          Emanuel
          – Informationen zu den Bewertungsregeln

          Da liegst Du richtig. Es soll z.B. das Kontaktformular in einem neuen Layer verarbeitet werden.

          Hi ther,e

          Danke für die schnelle Antwort, aber ich verstehe nicht, wie ich innerHtml für mein Problem nutzen kann.

          soweit ich es verstanden habe, möchtest Du das Resultat einer Formulareingabe in einem Layer (was Du div nanntest) anzeigen, oder liege ich da falsch?

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Daten in DIV übertragen

            Klawischnigg
            – Informationen zu den Bewertungsregeln

            Hi there,

            Da liegst Du richtig. Es soll z.B. das Kontaktformular in einem neuen Layer verarbeitet werden.

            ja dann schreibst Du das Ergebnis der Verarbeitung mit innerHTML in den neuen Layer. Du darfst nur nicht, wie bei Deiner Konstruktion, das Formular absenden, sondern Du mußt den submit-Button durch einen gewöhnlichen Button ersetzen und das Formular mit javascript auswerten. Das ist in Deinem Fall kein Problem, weil Deine ganze Konstruktion ohne JS ohnehin nicht funtkionrt. (sorry, die BATTery meuiner Tastat. geht aus....

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

  2. Daten in DIV übertragen

    Emanuel
    – Informationen zu den Bewertungsregeln

    So. Danke für die Bemühungen. Ich habe eine Lösung gefunden. Der Witz liegt darin, dass ich noch ein "onsubmit" einfügen muss, um den Layer zu wechseln: <form action="rueckmeldung.php" method="post" target="testframe" onsubmit="javascript:wechsel('finh3')">

    Den gesamten Code zeige ich hier:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
     <title>Alles in einem</title>

    <style>

    .menu
    {
    position : absolute;
    width : 200px;
    height : 520px;
    top : 10px;
    left : 20px;
    background-color : white;
    color : green;
    padding-left : 3px;
    padding-top : 3px;
    }

    .top
    {
    position : absolute;
    width : 900px;
    height : 100px;
    top : 10px;
    left : 230px;
    background-color : white;
    padding-left : 3px;
    padding-top : 3px;
    }

    .inh1
    {
    position : absolute;
    width : 670px;
    height : 400px;
    top : 120px;
    left : 230px;
    background-color : white;
    padding-left : 3px;
    padding-right : 3px;
    padding-top : 3px;
    border : 1px solid green;
    overflow: auto;
    }

    .inh2, .inh3
    {
    position : absolute;
    width : 670px;
    height : 400px;
    top : 1100px;
    left : 230px;
    background-color : white;
    padding-left : 3px;
    padding-right : 3px;
    padding-top : 3px;
    border : 1px solid green;
    overflow: auto;
    }

    p,a
    {
    font-family : verdana;
    text-decoration : none;
    font-size : 11px;
    font-weight : bold;
    }

    a
    {color: #21a35b;}
    a:focus
    {color: lime;}
    a:hover
    {color:green;}

    h3
    {color: #21a35b;}

    </style>

    </head>

    <body>

    <div class=menu id=fmenu>
    <img src="Bilder/logo.jpg"><br>
    <p>
    <li><a href="javascript:wechsel('finh1')"><font size="+1">Seite 1</font></a><br></li>
    <li><a href="javascript:wechsel('finh2')"><font size="+1">Seite 2</font></a><br></li>
    <li><a href="javascript:wechsel('finh10')"><font size="+1">Seite 3</font></a><br></li>
    </p>

    </div>

    <div class=top id=ftop><table border="0" width="900"><tr><td><font size="+3" color="#21a35b">Titel</font></td></tr></table></div>

    <div class=inh1 id=finh1>
    <?php
    echo "Willkommen";
    ?>
    </div>

    <div class=inh2 id=finh2><h3>Seite 2</h3>
    <form action="rueckmeldung.php" method="post" target="testframe" onsubmit="javascript:wechsel('finh3')">
    <input type="text" size="20" name="eingabe">
    <input type="submit" value="submit">
    </form>
    </div>

    <div class=inh3 id=finh3><h3>Seite 3</h3>
    <iframe name="testframe" width="100%" height="200"></iframe>
    </div>

    </body>
    </html>

    <script>
    var aktuellerframe = "finh1";
    var wechselimgange = false;
    var step = 10;
    var rein = "";
    var raus = "";
    var linksnachrechts = 230;
    var untennachoben = 1100;
    var schweben;

    function wechsel(frame) {
     raus = aktuellerframe; rein = frame;
     if (!wechselimgange && raus!=rein)
      {
      document.getElementById(rein).style.top = "1000px";
      document.getElementById(rein).style.left = "230px";
      wechselimgange = true;
      linksnachrechts = 230; untennachoben = 1000;
      schweben = setInterval('move()',10);
      }
     }

    function move() {
     linksnachrechts = linksnachrechts + step;
     untennachoben = untennachoben - step;
     if (untennachoben<120){untennachoben=120;}
     if (linksnachrechts>1300){linksnachrechts=1300;}
     wert1 = untennachoben + "px";
     wert2 = linksnachrechts + "px";
     document.getElementById(rein).style.top = wert1;
     document.getElementById(raus).style.left = wert2;
     if (linksnachrechts==1300 && untennachoben==120){
      clearInterval(schweben);
      wechselimgange = false;
      aktuellerframe = rein;}
     }

    </script>

    Hallo zusammen

    Ich will eine Homepage mit nur einer einzigen Datei basteln. Die einzelnen Seiten sind dabei in DIV's untergebracht und schweben beim Wechsel jeweils von unten in den sichtbaren Bereich, respektive nach rechts wieder weg.
    Nun geht es darum, dass ich die Auswertung von Formulareingaben ebenso darstellen will.
    Wie schaffe ich's, dass die Werte vom Formular an ein neues DIV übergeben wird?

    Den Quellcode habe ich hier:
    Im DIV "inh2" steht das Formular. Der Wert soll im DIV "inh3" landen.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Alles in einem</title>

    <style>

    .menu
    {
    position : absolute;
    width : 200px;
    height : 520px;
    top : 10px;
    left : 20px;
    background-color : white;
    color : green;
    padding-left : 3px;
    padding-top : 3px;
    }

    .top
    {
    position : absolute;
    width : 900px;
    height : 100px;
    top : 10px;
    left : 230px;
    background-color : white;
    padding-left : 3px;
    padding-top : 3px;
    }

    .inh1
    {
    position : absolute;
    width : 670px;
    height : 400px;
    top : 120px;
    left : 230px;
    background-color : white;
    padding-left : 3px;
    padding-right : 3px;
    padding-top : 3px;
    border : 1px solid green;
    overflow: auto;
    }

    .inh2, .inh3
    {
    position : absolute;
    width : 670px;
    height : 400px;
    top : 1100px;
    left : 230px;
    background-color : white;
    padding-left : 3px;
    padding-right : 3px;
    padding-top : 3px;
    border : 1px solid green;
    overflow: auto;
    }

    p,a
    {
    font-family : verdana;
    text-decoration : none;
    font-size : 11px;
    font-weight : bold;
    }

    a
    {color: #21a35b;}
    a:focus
    {color: lime;}
    a:hover
    {color:green;}

    h3
    {color: #21a35b;}

    </style>

    </head>

    <body>

    <div class=menu id=fmenu>
    <img src="Bilder/logo.jpg"><br>
    <p>
    <li><a href="javascript:wechsel('finh1')"><font size="+1">Seite 1</font></a><br></li>
    <li><a href="javascript:wechsel('finh2')"><font size="+1">Seite 2</font></a><br></li>
    <li><a href="javascript:wechsel('finh10')"><font size="+1">Seite 3</font></a><br></li>
    </p>

    </div>

    <div class=top id=ftop><table border="0" width="900"><tr><td><font size="+3" color="#21a35b">Titel</font></td></tr></table></div>

    <div class=inh1 id=finh1>
    <?php
    echo "Willkommen";
    ?>
    </div>

    <div class=inh2 id=finh2><h3>Seite 2</h3>
    <form action="javascript:wechsel('finh3')" method="post" target="finh3">
    <input type="text" size="20" name="eingabe">
    <input type="submit" value="submit">
    </form>
    </div>

    <div class=inh3 id=finh3><h3>Seite 3</h3>
    <?php
    echo "Deine Eingabe war: $eingabe";
    ?>
    </div>

    </body>
    </html>

    <script>
    var aktuellerframe = "finh1";
    var wechselimgange = false;
    var step = 10;
    var rein = "";
    var raus = "";
    var linksnachrechts = 230;
    var untennachoben = 1100;
    var schweben;

    function wechsel(frame) {
    raus = aktuellerframe; rein = frame;
    if (!wechselimgange && raus!=rein)
      {
      document.getElementById(rein).style.top = "1000px";
      document.getElementById(rein).style.left = "230px";
      wechselimgange = true;
      linksnachrechts = 230; untennachoben = 1000;
      schweben = setInterval('move()',10);
      }
    }

    function move() {
    linksnachrechts = linksnachrechts + step;
    untennachoben = untennachoben - step;
    if (untennachoben<120){untennachoben=120;}
    if (linksnachrechts>1300){linksnachrechts=1300;}
    wert1 = untennachoben + "px";
    wert2 = linksnachrechts + "px";
    document.getElementById(rein).style.top = wert1;
    document.getElementById(raus).style.left = wert2;
    if (linksnachrechts==1300 && untennachoben==120){
      clearInterval(schweben);
      wechselimgange = false;
      aktuellerframe = rein;}
    }

    </script>

    Vielen Dank für Eure Hilfe
    Gruss
    Emanuel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln