Dynamisches Formular funktioniert nicht

bingo · 25.10.2009, 10:39

Hallo.

Ich habe gleich drei Probleme mit einem dynamischen Formular, das ich mit Hilfe von jquery erstellt habe. Der Qullcode ist folgender.

PHP-Code:

 
<script type="text/javascript">

    $(document).ready(function() {

        var count = 1;

        $("input#mehr").click(function(){

            $("div#formular").clone().insertAfter("div#formular");

            count += 1;

        });

        $("input#weniger").click(function() {

            if(count>1) {

                $("div#formular:last").remove();

                count -= 1;

            }

        });

    });

</script>

 
<div id="formular">

    <form action="index.php?seite=2" method="post" name="verletzungen">

        <table>

            <tr>

                <td>Verletzung:</td>

                <td><input type="text" name="verletzung[]" maxlength="255"></td>

            </tr>

            <tr>

                <td>Wann:</td>

                <td>    

                    <select name="wann[]">

                        <?php

                            for($i=1970; $i<=2010; $i++) {

                                echo '<option value="'.$i.'">'.$i.'</option>';

                            }

                        ?>

                    </select>

                </td>

            </tr>

            <tr>

                <td>Liga:</td>

                <td><input type="text" name="liga[]" maxlength="60"></td>

                <td>(zum Zeitpunkt der Verletzung)</td>

            </tr>

            <tr>

                <td>Veranstaltung: </td>

                <td>

                    <select name="veranstaltung[]">

                        <option value="training">Training</option>

                        <option value="wettkampf">Wettkampf</option>

                    </select>

                </td>

            </tr>    

        </table>

</div>

        <table>

            <tr>

                <td></td>

                <td>

                    <input type="button" name="mehr" value="mehr" id="mehr">

                    <input type="button" name="weniger" value="weniger" id="weniger">

                </td>

                <td>Hier klicken bei mehreren Verletzungen</td>

            </tr>

            <tr>

                <td></td>

                <td>

                    <input type="submit" name="submit" value="Weiter">

                    <input type="reset" name="reset" value="L&ouml;schen">

                </td>

            </tr>

        </table>

    </form>

So die Probleme sind nun folgende: mit einem klick auf den mehr-Button, werden alle Eingabefelder kopiert und damit das Formular erweitert. Das kann man beliebig oft machn, aber die kopierten Felder auch wieder mit dem weniger-Button löschen. Das funktioniert wunderbar, allerdings werden per Post nur die Werte übermittelt, die in der ersten Eingabefeldern stehen. Also die Eingaben, die in den kopierten Feldern stehen, werden ignoriert.
Zweites Problem: sobald ich ein kopiertes Feld wieder lösche, kann das Formular weder abgeschickt, noch mit dem reset-Button gelöscht werden.
Drittes Problem: wie kriege ich es hin, dass beim Kopieren der Felder, die schon gemachten Eingaben nicht mitkopiert werden?

Danke für die Tipps

rudygotya · 25.10.2009, 11:32

zu 1. und 2.: Du darfst nicht das Formular clonen, sondern nur die enthaltenen input elemente. Verwende Klassenbezeichner oder eindeutige ids. Würde den selector auf die Tabelle legen.
zu 3. Beim Pageload Formular generieren, mit jquery hide Elemente verstecken oder eindeutige Bezeichner-Klasse hinzufügen (addClass) mit display:none. Dann einmal kopieren, einfaden (oder auch removeClass) und das Ganze dann jedesmal onclick.

grüße

Dark Guardian · 26.10.2009, 10:45

Wie schon angemerkt wurde darfst du nicht das Formular clonen sondern nur die Input Felder.

Zu 3. $(inputFeldSelektor).val('');

Mit val() kann man den Wert eines Input-Feldes setzen (mit Parameter) oder auslesen(ohne Parameter). Funktioniert auch bei select-Feldern. Nur weiss ich grad nicht mehr ob man als Parameter den Attributwert value der gewübnschten Option oder den Text zwischen <option></option> angeben muss.

nikosch · 26.10.2009, 14:04

Man kann davon ausgehen, dass ersteres.

Dark Guardian · 26.10.2009, 14:49

Zitat:

Zitat von nikosch

Man kann davon ausgehen, dass ersteres.

Hab mal eben nachgesehen... es ist der zweiteres....

nikosch · 26.10.2009, 15:04

Falls Du das Manual meinst - dort werden nur options ohne value-Attribut benutzt, wobei das vom Browser dann so interpretiert wird, dass der value dem Decriptiontext entspricht. Da es unter jQuery sowohl ein text() als auch ein val()-Kommando gibt, finde ich nach wie vor das ander Verhalten wahrscheinlicher.

[edit]
Oh, das finde ich jetzt ziemlich erstaunlich: Es tut beides! Irgendwie ungünstig:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
  
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      
      


      $(document).ready (function()
        {
        //$('select').val ('ABC' , true);
        //$('select').val ('C'   , true);
        $('select').val ('D'   , true);
        });


    </script>
  </head>

 <body>

<select multiple="multiple">
  <option>ABC</option>
  <option value="C">CDE</option>
  <option value="D">DEF</option>
  <option value="C">C</option>
  <option value="C">D</option>
</select>

  </body>
</html>

Markiert "D" und "DEF". Ich frage mich auch gerade, wie ich mehrere Values selektieren könnte. Mit mehreren Befehlen (siehe auskommentierte oben) geht es natürlich nicht.

[edit 2]
So:

Code:

        $('select').val (['D' , 'C']   , true);

Ach, is det scheee.. Ich liebe dieses Framework.

Dark Guardian · 26.10.2009, 15:49

Zitat:

Zitat von nikosch

Falls Du das Manual meinst -

Ja, das meinte ich.

Ich mag mich aber noch an einen Fall erinnern bei dem ich die value übergeben habe und das Feld eben nicht selektiert wurde.

Aber gut zu wissen das beides funktionieren müsste. Wenn mir der Code wieder begegnet werd ich das nochmal genauer inspizieren müssen.

nikosch · 26.10.2009, 15:59

Wie gesagt, habe obiges ausprobiert. Es wird definitiv (jQuery v1.3.2) beides angesprochen. Wie man nur den Value ansprechen kann, weiß ich nicht. Möglicherweise über einen Selektor auf option wie:

$('option[value="D"]')

.. Probier ich doch gleich mal aus..

So gehts. Wird nur DEF selektiert (nicht D):

Code:

      $(document).ready (function()
        {
        $('option[value="D"]').attr ('selected' , true);
        });

[edit]
Für ein Text-only Optionfeld geht das so auch (jedenfalls im Firefox). Übrigens wird über die attr-Lösung ein Selektieren in mehreren Stufen möglich:

Code:

      $('option[value="D"]').attr ('selected' , true);
      $('option[value="ABC"]').attr ('selected' , true);

Man stelle sich bspw. das bedingte Selektieren von Einträgen in einer Schleife vor. Mit val () würde hier ja immer die alte Selektierung überschrieben (das Select-Setting neu gesetzt).

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
PHP: Formular Generator	Zergling-new	Tutorials	16	06.07.2010 03:14
Ergebnis von Formular in iFrame zeigen	PsychoEagle	HTML, Usability und Barrierefreiheit	2	22.07.2009 21:07
Problem mit Formular, Daten an datenbank senden	Aurec	PHP Tipps 2008	11	20.11.2008 18:17
Dynamisches Formular mit $_SESSION	TiCar	PHP Tipps 2008	1	17.09.2008 15:15
Wert aus Textfeld in neues Formular übernehmen (kein Submit)	PsychoEagle	HTML, Usability und Barrierefreiheit	9	02.01.2007 14:51
Formular funktioniert nicht		PHP Tipps 2006	9	04.12.2006 17:51
dynamisches formular	MrCavity	PHP Tipps 2005-2	1	24.08.2005 09:29
Formular und PHP (funktioniert nicht)	FBI	PHP Tipps 2005-2	10	19.08.2005 10:03
Dynamisches Formular	dragon1402	PHP Tipps 2005-2	7	21.07.2005 12:01
Kontakrformular funktioniert nur zum Teil		PHP Tipps 2005-2	12	18.07.2005 11:24
[Erledigt] PHP Formular ~~wichtig~~		PHP Tipps 2005	27	29.05.2005 19:38
Formular mit PHP_SELF funktioniert nicht		PHP Tipps 2004	3	24.09.2004 11:38
Formular Mailsend funktioniert nicht.		PHP Tipps 2004	1	19.08.2004 21:24
[Erledigt] Formular mit Daten werden auf anderer Seite zusammengefasst		PHP Tipps 2004	4	15.08.2004 15:44
[Erledigt] Daten in neuem Formular anzeigen		PHP Tipps 2004	6	21.07.2004 10:44

25.10.2009, 10:39
bingo Neuer Benutzer Registriert seit: 26.09.2009 Beiträge: 6 PHP-Kenntnisse: Fortgeschritten	Dynamisches Formular funktioniert nicht Hallo. Ich habe gleich drei Probleme mit einem dynamischen Formular, das ich mit Hilfe von jquery erstellt habe. Der Qullcode ist folgender. PHP-Code: <script type="text/javascript"> $(document).ready(function() { var count = 1; $("input#mehr").click(function(){ $("div#formular").clone().insertAfter("div#formular"); count += 1; }); $("input#weniger").click(function() { if(count>1) { $("div#formular:last").remove(); count -= 1; } }); }); </script> <div id="formular"> <form action="index.php?seite=2" method="post" name="verletzungen"> <table> <tr> <td>Verletzung:</td> <td><input type="text" name="verletzung[]" maxlength="255"></td> </tr> <tr> <td>Wann:</td> <td> <select name="wann[]"> <?php for($i=1970; $i<=2010; $i++) { echo '<option value="'.$i.'">'.$i.'</option>'; } ?> </select> </td> </tr> <tr> <td>Liga:</td> <td><input type="text" name="liga[]" maxlength="60"></td> <td>(zum Zeitpunkt der Verletzung)</td> </tr> <tr> <td>Veranstaltung: </td> <td> <select name="veranstaltung[]"> <option value="training">Training</option> <option value="wettkampf">Wettkampf</option> </select> </td> </tr> </table> </div> <table> <tr> <td></td> <td> <input type="button" name="mehr" value="mehr" id="mehr"> <input type="button" name="weniger" value="weniger" id="weniger"> </td> <td>Hier klicken bei mehreren Verletzungen</td> </tr> <tr> <td></td> <td> <input type="submit" name="submit" value="Weiter"> <input type="reset" name="reset" value="Löschen"> </td> </tr> </table> </form> So die Probleme sind nun folgende: mit einem klick auf den mehr-Button, werden alle Eingabefelder kopiert und damit das Formular erweitert. Das kann man beliebig oft machn, aber die kopierten Felder auch wieder mit dem weniger-Button löschen. Das funktioniert wunderbar, allerdings werden per Post nur die Werte übermittelt, die in der ersten Eingabefeldern stehen. Also die Eingaben, die in den kopierten Feldern stehen, werden ignoriert. Zweites Problem: sobald ich ein kopiertes Feld wieder lösche, kann das Formular weder abgeschickt, noch mit dem reset-Button gelöscht werden. Drittes Problem: wie kriege ich es hin, dass beim Kopieren der Felder, die schon gemachten Eingaben nicht mitkopiert werden? Danke für die Tipps


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

25.10.2009, 11:32
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	zu 1. und 2.: Du darfst nicht das Formular clonen, sondern nur die enthaltenen input elemente. Verwende Klassenbezeichner oder eindeutige ids. Würde den selector auf die Tabelle legen. zu 3. Beim Pageload Formular generieren, mit jquery hide Elemente verstecken oder eindeutige Bezeichner-Klasse hinzufügen (addClass) mit display:none. Dann einmal kopieren, einfaden (oder auch removeClass) und das Ganze dann jedesmal onclick. grüße __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog Geändert von rudygotya (25.10.2009 um 11:41 Uhr).

26.10.2009, 10:45
Dark Guardian Erfahrener Benutzer Registriert seit: 10.10.2009 Beiträge: 2.630 PHP-Kenntnisse: Fortgeschritten	Wie schon angemerkt wurde darfst du nicht das Formular clonen sondern nur die Input Felder. Zu 3. $(inputFeldSelektor).val(''); Mit val() kann man den Wert eines Input-Feldes setzen (mit Parameter) oder auslesen(ohne Parameter). Funktioniert auch bei select-Feldern. Nur weiss ich grad nicht mehr ob man als Parameter den Attributwert value der gewübnschten Option oder den Text zwischen <option></option> angeben muss.

26.10.2009, 14:04
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Man kann davon ausgehen, dass ersteres. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

26.10.2009, 15:04
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Falls Du das Manual meinst - dort werden nur options ohne value-Attribut benutzt, wobei das vom Browser dann so interpretiert wird, dass der value dem Decriptiontext entspricht. Da es unter jQuery sowohl ein text() als auch ein val()-Kommando gibt, finde ich nach wie vor das ander Verhalten wahrscheinlicher. [edit] Oh, das finde ich jetzt ziemlich erstaunlich: Es tut beides! Irgendwie ungünstig: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready (function() { //$('select').val ('ABC' , true); //$('select').val ('C' , true); $('select').val ('D' , true); }); </script> </head> <body> <select multiple="multiple"> <option>ABC</option> <option value="C">CDE</option> <option value="D">DEF</option> <option value="C">C</option> <option value="C">D</option> </select> </body> </html> Markiert "D" und "DEF". Ich frage mich auch gerade, wie ich mehrere Values selektieren könnte. Mit mehreren Befehlen (siehe auskommentierte oben) geht es natürlich nicht. [edit 2] So: Code: $('select').val (['D' , 'C'] , true); Ach, is det scheee.. Ich liebe dieses Framework. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. -- Geändert von nikosch (26.10.2009 um 15:21 Uhr).

26.10.2009, 15:59
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Wie gesagt, habe obiges ausprobiert. Es wird definitiv (jQuery v1.3.2) beides angesprochen. Wie man nur den Value ansprechen kann, weiß ich nicht. Möglicherweise über einen Selektor auf option wie: $('option[value="D"]') .. Probier ich doch gleich mal aus.. So gehts. Wird nur DEF selektiert (nicht D): Code: $(document).ready (function() { $('option[value="D"]').attr ('selected' , true); }); [edit] Für ein Text-only Optionfeld geht das so auch (jedenfalls im Firefox). Übrigens wird über die attr-Lösung ein Selektieren in mehreren Stufen möglich: Code: $('option[value="D"]').attr ('selected' , true); $('option[value="ABC"]').attr ('selected' , true); Man stelle sich bspw. das bedingte Selektieren von Einträgen in einer Schleife vor. Mit val () würde hier ja immer die alte Selektierung überschrieben (das Select-Setting neu gesetzt). __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. -- Geändert von nikosch (26.10.2009 um 16:04 Uhr).