Ankündigung

Einklappen
Keine Ankündigung bisher.

Script zur Aktivierung von Form-Felder

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Script zur Aktivierung von Form-Felder

    Hallo zusammen..

    Es ist schwierig, als nicht JAVA-Kenner (auch PHP) was zu finden, wenn man nicht weiss, wie man suchen soll. Daher bitte ich um Hilfe: Im Link http://www.hotelgasthof-zur-sonne.de...ngsanfrage.php seht Ihr meine neue Seite für das Geschäft. Im Kontaktform möchte ich, dass man mittels Auswahl der Option (ALLGEMEIN oder BUCHUNGSANFRAGE) gewisse Felder aktiviert werden. Ich habe das Form mit http://formanizr.firchow.net/index.php erstellt. im jedem INPUT Feld kann man mit <input type="text"... disabled="disabled"> das betreffende Feld deaktivieren. Ich möchte dem Kunden die Möglichkeit geben, dass bei einer allgemeinen Auskunft nur Name und email und Textfeld aktiviert sind, bei einer Buchungsanfrage hingegen sollen alle Felder aktiviert sein. Die MEINE DATEN -Felder sind alle mit "requiered" gekennzeichnet. Daher dürfte es bei einer Deaktivierung der Felder keine Fehlermeldung kommen.

    Zudem fehlt noch ein Prüfscript und eine Absende-Skript. Ich danke für eure Hilfe.
    Gruß Romacasa

  • #2
    Javascript (im Head notieren):
    Code:
                        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
                        <script>
                            $(document).ready(function() {
                                $("input[type='radio'][name='account']").on("change", function() {
                                    if($(this).attr("id") == "account2") {
                                        $("div.fuerbuchung").show().find("input").attr("required", "required");
                                    } else {
                                        $("div.fuerbuchung").hide().find("input").removeAttr("required");
                                    }
                                });
                                $("div.fuerbuchung").hide().find("input").removeAttr("required");;
                            });
                        </script>
    Dazu musst Du den input-Elementen, die nur bei der Buchung angezeigt werden sollen, die Klasse "fuerbuchung" geben:
    HTML-Code:
            <form class="formanizr">
            <section class="formanizr fzr_tiny">
    
                                 <fieldset>    
                                    <legend>Buchungsanfrage / Allgemeine Anfrage</legend>
                                    <fieldset>
                                        <div class="fzr_row">
                                            <div class="fzr_col fzr_8">
                                             <legend>Bitte wählen Sie:</legend>
                                         </div>
                                     </div>
                                     <div class="fzr_row">
                                         <div class="fzr_col fzr_12">
                                             <input type="radio" name="account" id="account1" value="Allgemein" checked="true">
                                             <label for="switchNo">Allgemeine Auskunft</label>
                                         </div>
                                         <div class="fzr_col fzr_12">
                                             <input type="radio" name="account" id="account2" value="Buchungsanfrage">
                                             <label for="switchYes">Buchungsanfrage</label>
                                         </div>
                                     </div>
                                     </fieldset>
    
                                     <fieldset>
                                     <legend>Ihre Daten:</legend>
                                        <div class="fzr_row">
                                            <div class="fzr_col fzr_12 fzr_left fuerbuchung">
                                                <span class="fzr_mandatory"> Ausser E-Mail sind alle Felder Pflichtfelder!</span>
                                            </div>
                                        </div>
                                        <div class="fzr_row">
                                            <div class="fzr_col fzr_6">
                                                <label for="vorname">Vorname: </label>
                                                <input type="text" name="vorname" id="vorname" autocomplete="yes" requred="true">
                                            </div><!-- fzr_3 -> this row = 5 -->
    
                                            <div class="fzr_col fzr_6">
                                            <label for="nachname">Nachname: </label>
                                                <input type="text" name="nachname" id="nachname">
                                            </div><!-- fzr_4 -> this row = 12 -->
                                        </div>
    
    
                                         <div class="fzr_row">
                                            <div class="fzr_col fzr_8 fuerbuchung">
                                                <label for="str">Straße:</label>
                                                <input type="text" name="str" id="str" value="" requred="true">
                                            </div><!-- fzr_1 -> this row = 3 -->
    
                                            <div class="fzr_col fzr_4 fuerbuchung">
                                                <label for="str">Strassen-Nr.</label>
                                                <input type="text" name="hausnummer" id="hausnummer" value="" requred="true">
                                            </div><!-- fzr_2 -> this row = 5 -->
                                        </div>
                                        <div class="fzr_row">
                                            <div class="fzr_col fzr_4 fuerbuchung">
                                                <label for="plz">PLZ: </label>
                                                <input type="text" name="plz" id="plz" maxlength="8" value="" requred="true">
                                            </div><!-- fzr_3 -> this row = 9 -->
    
                                            <div class="fzr_col fzr_8 fuerbuchung">
                                                <label for="plz">Ort: </label>
                                                <input type="text" name="ort" id="plz" value="" requred="true">
                                            </div><!-- fzr_3 -> this row = 12 -->
    
                                        </div><!-- .fzr_row -->
    
    
                                        <div class="fzr_row">
                                            <div class="fzr_col fzr_6 fuerbuchung">
                                                <label for="str">Tele-Nr.</label>
                                                <input type="tel" name="tel" id="tel" value="" requred="true">
                                            </div><!-- fzr_1 -> this row = 3 -->
    
                                            <div class="fzr_col fzr_6">
                                                <label for="email">E-Mail</label>
                                                <input type="email" class="fzr_icon-email" name="email" id="email">
                                            </div><!-- fzr_10 -> this row = 12 -->
                                        </div><!-- .fzr_row -->
                                    </fieldset>
                                    <fieldset>
                                        <legend>Grund Ihrer Anfrage:</legend>
    
                                        <div class="fzr_row">
                                            <div class="fzr_col fzr_8 fuerbuchung" disabled="disabled">
                                                <label for="termin">Termin:</label>
                                                <input type="date" class="fzr_icon-date" placeholder="TT.MM.JJJJ bis (-) TT.MM.JJJJ" name="termin" id="termin" disabled="disabled">
                                            </div>
                                        </div>
    
                                        <div class="fzr_row">
                                            <div class="fzr_col fzr_12">
                                                <label for="message">Ihre Nachricht an uns:</label>
                                                <textarea id="message"></textarea>
                                            </div>
                                        </div>
    
                                        <div class="fzr_row">
                                            <div class="fzr_col fzr_12 fzr_left">
                                                <input type="reset" value="Zurücksetzen">
                                                <input type="submit" value="Senden!">
                                            </div>
                                        </div>
                                    </fieldset>
                                    <fieldset>
                                    <legend>
                                        <label for="datenschutz">Datenschutz-Erklärung</label>
                                    </legend>
                                        <div class="fzr_row">
                                            <div class="fzr_col fzr_12">
                                                <p> Personenbezogene Daten werden von uns nur dann und nur in dem Umfang erhoben, wie Sie sie uns mit Ihrer Kenntnis selbst zur Verfügung stellen. Insbesondere erfolgt eine Nutzung dieser personenbezogenen Daten nur, wenn Sie uns ausdrücklich hierzu Ihre Einwilligung erteilt haben. Sie haben jederzeit ein Widerrufsrecht hinsichtlich einer erteilten Einwilligung. Eine Weitergabe der Daten an Dritte erfolgt nicht ohne Ihre Einwilligung. Weiter Infos im Impressum!</p>
                                            </div>
                                        </div>
    
                                    </fieldset>
                                </fieldset>    
    
    
    
    
                <p></p>
                    </section></form>
    PS: Du hast da einen Schreibfehler:
    HTML-Code:
    requred="true"
    Zuletzt geändert von Sempervivum; 25.03.2017, 00:33.

    Kommentar


    • #3
      Herzlichen dank.

      Gruß Romacasa

      Kommentar

      homepage-forum.de - Hilfe für Webmaster! Statistiken

      Einklappen

      Themen: 56.632   Beiträge: 428.455   Mitglieder: 28.301   Aktive Mitglieder: 45
      Willkommen an unser neuestes Mitglied, phl92.

      Online-Benutzer

      Einklappen

      152 Benutzer sind jetzt online. Registrierte Benutzer: 5, Gäste: 147.

      Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

      Die neuesten Themen

      Einklappen

      Die neuesten Beiträge

      Einklappen

      Lädt...
      X