Fluless: Formular mit OnClick erweitern

SELF-Forum

Formular mit OnClick erweitern

Fluless
– Informationen zu den Bewertungsregeln

Moin

Ich bastele grade am Layout eines kleines Programmes, was nur den Quotienten zwischen möglicher Arbeit und tatsächlich getaner Arbeit ausrechnet.

Zunächst erstelle ich ein Formular (aus 2 <input type=text>) welches dem User die Möglichkeit gibt jeweils eine Arbeitseinheit einzutragen.
Jetzt will einen Button haben, der per Click die nächsten beiden Textfelder für die nächste Arbeitseineit aufruft und somit nur das Formular erweitert.

Um das zu tun dachte ich an ein onClick()und die Funktion die durch den Button aufgerufen wird, soll die nächsten beiden Textfelder an das bestehende Formular anfügen.

2 Problemen tauchen dann auf:
1). In der JavaScript funktion darf kein ja html formularcode stehen.
2). Das onClick Event lässt sich nur einmal ausführen.

Frage:
für 1). Das ganze ließe sich mit php machen weil php echo "htmlcode..."; schreiben kann, bloß php hat als serverseitige sprache kein Eventhandler wie JavaScrips onClick.

für 2). Gibt es eine Möglichkeit, dass sich eine function selbst aufruft?

Danke Fluless

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Formular mit OnClick erweitern

    Beat Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Frage:
    für 1). Das ganze ließe sich mit php machen weil php echo "htmlcode..."; schreiben kann, bloß php hat als serverseitige sprache kein Eventhandler wie JavaScrips onClick.

    für 2). Gibt es eine Möglichkeit, dass sich eine function selbst aufruft?

    Dein Vorhaben, jeweils soviele Felder bereitzustellen, wie man braucht, kann im Grunde abfragen, ob die letzten Feldpaare gebraucht wurden.
    Wenn ja, sollen neue Feldpaare zugefügt werden.
    Wenn aber die letzten zwei Feldpaare leer sind, kann das letzte Feldpaar entfernt werden.

    Der Auslöser zur Überprüfung könnte ein ein onblur auf das erste Feld des aktuell letzten Feldpaares sein.

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Formular mit OnClick erweitern

      Fluless
      – Informationen zu den Bewertungsregeln

      Danke, das macht Sinn.

      Im Allegemeinen wie macht denn das zB ein javascript taschenrechner? der muss doch auch in der Lage sein mehrmals per onClick das gleiche event auszuführen?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Formular mit OnClick erweitern

        Beat Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Im Allegemeinen wie macht denn das zB ein javascript taschenrechner? der muss doch auch in der Lage sein mehrmals per onClick das gleiche event auszuführen?

        Ein Element, dem du einen eventhandler anhängst wird, wenn der Event eintritt, immer die mit dem handler verbundene Aktion ausführen, welche in der Regel ein Funktionsaufruf ist, es sei denn, die Funktion beinhaltet die Entfernung des Handlers.

        mfg Beat

        --
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o
        Der Valigator leibt diese Fische
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Formular mit OnClick erweitern

          Fluless
          – Informationen zu den Bewertungsregeln

          Bin immernoch beim selben Problem, vielleicht magste mir noch mal helfen.

          function writetable() wird das erstmal durch ein normales html formular aufgerufen.

          	  
  
function writetable()  
{  
	document.write("<html><head><title>Test</title></head><body><form name=writetableform>...Eingabefelder etc...<input type=button name=writetestbutton value=writetesttable onclick=writetable()></form></body></html>");  
}

          Ich hoffe die Struktur wird deutlich. Gewollt ist, dass das onclick event jedes mal ein (Stück) Formular aufruft, was wiederum einen Button enthält der das nächste Stück aufruft.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Formular mit OnClick erweitern

            Der Martin
            – Informationen zu den Bewertungsregeln

            Hallo,

            function writetable() wird das erstmal durch ein normales html formular aufgerufen.

            function writetable()

            {
            document.write("<html><head><title>Test</title></head><body><form name=writetableform>...Eingabefelder etc...<input type=button name=writetestbutton value=writetesttable onclick=writetable()></form></body></html>");
            }

              
damit entsorgst du erstmal das komplette momentan geladene Dokument und ersetzt es durch den String, den du mit document.write() ausgibst. Und das soll gut sein?  
Vor allem enthält das neue Dokument, soweit ich sehen kann, kein Script mehr, das dann onclick aufgerufen werden könnte.  
  

> Ich hoffe die Struktur wird deutlich. Gewollt ist, dass das onclick event jedes mal ein (Stück) Formular aufruft, was wiederum einen Button enthält der das nächste Stück aufruft.  
  
Warum erzeugst du nicht "[ganz normal](http://de.selfhtml.org/javascript/objekte/document.htm#create_element)" weitere Elemente und [hängst sie ins Dokument ein](http://de.selfhtml.org/javascript/objekte/node.htm#append_child)? Alternativ geht's meinetwegen auch mit innerHTML - aber document.write() \*nach\* dem Laden des Dokuments aufzurufen, ist eine ganz schlechte Idee.  
  
Ciao,  
 Martin  

-- 
In Ägypten haben früher 150000 Leute 35 Jahre lang an einer Pyramide gearbeitet. Aber bei uns arbeiten doppelt so viele Leute doppelt so lange allein an der Baugenehmigung.  
  (Dieter Nuhr, deutscher Kabarettist)  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Formular mit OnClick erweitern

              Fluless
              – Informationen zu den Bewertungsregeln

              Vor allem enthält das neue Dokument, soweit ich sehen kann, kein Script mehr, das dann onclick aufgerufen werden könnte.

              Ich sehe den Punkt.

              Wie baut man denn generell ein dynamisches Formular?
              ZB wenn ich die Anzahl von Medikamenten abfragen wollte, die jemand nimmt.
              Dann gebe ich erst einen Formularteil der eine  Eingabemöglichkeit für das 1. Medikament bietet (mit Feldern für Name, Dosierung etc.) und gebe ihm dazu einen Button mit "nächstes Medikament anfügen"

              Das sollte das mit einem Button gehen, der eine function aufruft, die einen neuen Formularteil schreibt.

              Wie würdest du das von der Struktur her angehen?

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Formular mit OnClick erweitern

                Der Martin
                +1 Informationen zu den Bewertungsregeln

                Hallo,

                Wie baut man denn generell ein dynamisches Formular?
                ZB wenn ich die Anzahl von Medikamenten abfragen wollte, die jemand nimmt.
                Dann gebe ich erst einen Formularteil der eine  Eingabemöglichkeit für das 1. Medikament bietet (mit Feldern für Name, Dosierung etc.) und gebe ihm dazu einen Button mit "nächstes Medikament anfügen"

                dann zerlege (in Gedanken) das Formular in Bausteine: Einen Baustein, der von Anfang an dasteht, und der die notwendigen Basis-Eingabefelder enthält (z.B. Kunde, Lieferadresse, Zahlungsart). Dazu einen Baustein, der pro Artikel immer wiederholt wird. Und einen abschließenden Baustein mit den Buttons für Submit und weitere Eingabefelder:

                <form method="post" action="/bestell.php">  
 <fieldset>  
  <legend>Allgemeine Angaben</legend>  
  <label>Kundennummer:</label><input type="text" name="kdnr">  
 </fieldset>  
  
 <fieldset>  
  <legend>Ihre Bestellung</legend>  
  <table>  
   <thead>  
   <tr>  
    <th>Artikelnummer</th>  
    <th>Bezeichnung</th>  
    <th>Menge</th>  
    <th>Einzelpreis</th>  
    <th>Gesamtpreis</th>  
   </tr>  
   </thead>  
   <tbody>  
   <tr>  
    <td><input type="text" name="artikelnr[]"></td>  
    <td><!-- Platzhalter für Artikeltext --></td>  
    <td><input type="text" name="menge[]"></td>  
    <td><!-- Platzhalter für Einzelpreis --></td>  
    <td><!-- Platzhalter für Gesamtpreis --></td>  
   </tr>  
   </tbody>  
   <tfoot>  
   <tr>  
    <td></td>  
    <td>Summe</td>  
    <td></td>  
    <td></td>  
    <td><!-- Platzhalter für Summe --></td>  
   </tr>  
   </tfoot>  
  </table>  
 </fieldset>  
  
 <fieldset>  
  <input type="submit" name="mehr" value="Weitere Artikel">  
  <input type="submit" name="bestell" value="Bestellung absenden">  
 </fieldset>  
</form>

                Das könnte ich mir mal als Grundgerüst vorstellen. Im JS-Code legt man sich nun als erstes eine Referenz auf das table-Element an, oder noch besser auf das darin enthaltene tbody-Element. Dann könnte eine Funktion, nennen wir sie etwa InitRow(), die Eingabefelder in der bisher einzigen vorhandenen Zeile mit je einem onchange-Handler versehen, damit bei der Eingabe automatisch die Felder Artikeltext, Einzelpreis, Gesamtpreis und Summe (im tfoot) aktualisiert werden können; außerdem kleben wir einen onclick-Handler an den mit "Weitere Artikel" beschrifteten Submit-Button, der nachher die Tabelle (das tbody-Element) um eine Zeile verlängern soll und dann false zurückgibt, damit dieser Button eben keinen Formularversand initiiert.
                Für das Handling bieten sich die Eigenschaften rows[] und cells[] des Tabellenobjekts an, sowie seine Methoden insertRow() und insertCell(). Mehr dazu auch in SELFHTML.

                Beim endgültigen Absenden des Formulars bekommen wir die Parameter artikelnr[] und menge[] gleich komfortabel als Arrays angeliefert - wobei ich jetzt einfach mal unterstelle, dass die serverseitige Auswertung mit PHP geschieht.

                Steht Javascript nicht zur Verfügung, werden die Felder Artikeltext, Einzelpreis und Gesamtpreis nicht simultan bei der Eingabe aktualisiert, und beim Klicken auf "Weitere Artikel" wird das Formular "normal" abgeschickt. Das auswertende Script muss nun erkennen, dass der Parameter "bestell" nicht dabei ist, dafür aber "mehr", und gibt als Response dasselbe Formular wieder aus - nur mit einer zusätzlichen Tabellenzeile mit leeren Feldern, und die Felder Artikeltext, Einzelpreis und Gesamtpreis in den bereits ausgefüllten Zeilen sind ergänzt. Das Formular bleibt also mit nur geringen Abstrichen im Komfort nutzbar.

                Und nun bist du wieder dran. ;-)

                So long,
                 Martin

                --
                Eine Neandertaler-Sippe sitzt in ihrer kalten Höhle. Seufzt der Stammesälteste: "Hoffentlich erfindet bald jemand das Feuer!"
                Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                Beitrag melden
                +1
                Informationen zu den Bewertungsregeln