Beiträge von Sempervivum

Sempervivum

Ich vermutete eher, dass ein Webserver auf der SPS läuft. Wenn Du die Datenbausteine hast, verstehst Du auch was sie machen und wie sie funktionieren? Z. B. ob einer einen Webserver implementiert.

Sempervivum

Wer entwickelt denn diese SPS? Oder ist das ein Standardprodukt? Gibt es dazu eine Dokumentation? Häufig läuft dann ein Webserver und man kann Daten über eine URL abfragen.

Sempervivum

Das rot färben sollte kein Problem sein. Aber um deine Fragen zu beantworten, braucht es mehr Informationen:

Ist das dein eigener Server? Oder ein Dienstleister, der die Daten zur Verfügung stellt?
In welcher Form liegen die Daten vor? Datenbank, Textdatei CSV/JSON?

Datatables ist sehr mächtig und unterstützt auch das Laden der Daten durch Ajax und serverseitige Bearbeitung:

https://datatables.net

Sempervivum

Wenn ich den ersten Fehler korrigiere, funktioniert es einwandfrei.

Möglicher Weise war da noch eine Variable undefiniert: $from beim Senden.

Senden der Mail auskommentiert.

PHP

<?php
    ini_set('display_errors', '1');
    error_reporting(E_ALL);

    if( !empty ($_POST['von']) && !empty($_POST['mail']) && !empty($_POST['nachricht']) ) {
    $empf = "info@blickpunkt-grafikdesign.de";
    $betreff = '=?UFT-8?B?'. base64_encode('Kontaktanfrage') . '?=';
            $von = htmlspecialchars(stripslashes(trim($_POST['von'])));
            $mail = htmlspecialchars(stripslashes(trim($_POST['mail'])));
            $text = htmlspecialchars(stripslashes(trim($_POST['nachricht'])));
            if (filter_var($mail, FILTER_VALIDATE_EMAIL)) {
                $headers = implode("\r\n", [
                    'MIME-Version: 1.0',
                    'Content-type: text/plain; charset=utf-8',
                    "From: {$von} <{$mail}>",
                    "Reply-To: {$mail}",
                    "Subject: {$betreff}",
                    'X-Mailer: PHP/' . phpversion()
                ]);
                if (TRUE /*mail($empf, $betreff, $text, $von)*/) {
                    echo '<p>Vielen Dank für Ihre Anfrage</p>';
                } else {
                    echo '<p>Beim Versand der E-Mail ist ein Fehler aufgetreten!</p>';
                }
            } else {
                echo '<p>E-Mail ungültig!</p>';
            }
       } else {
            echo '<p>Bitte füllen Sie alle Felder aus!</p>';
        }
       
    ?>

Alles anzeigen

Sempervivum

Zeile 9: Für das erste !empty fehlt die schließende runde Klammer.

Zeile 35: Folgefehler?

Sempervivum

Bei diesem hier:

Code

// @require    https://code.jquery.com/jquery-3.2.1.min.js
// @require    https://code.jquery.com/jquery-1.10.2.js
// @require    https://code.jquery.com/ui/1.11.4/jquery-ui.js
// @require    https://code.jquery.com/ui/1.1…/smoothness/jquery-ui.css
// @require    https://code.jquery.com/jquery-1.10.2.js

hast Du den Fehler gemacht, dass Du jQuery gleich drei Mal eingebunden hast. Das verhängnisvolle ist das letzte, weil dabei alles, was jQuery-UI und smoothness hinzu gefügt haben, verloren geht.

Bei dem Fiddle in dem ersten Posting musst Du jQuery einbinden. Du erkennst das, wenn du auf das Zahnradsymbol rechts oben im Javascript-Fenster klickst.

Außerdem jquery.table.nd - das erkennst Du in dem linken Fenster unter "External Resources".

Sempervivum

Ja, bei mir hatte es funktioniert. Da ist ein Syntaxfehler im Javascript: Schließende geschweifte Klammer fehlt. So ist es richtig:

Code

$(document).ready(function() { 
            // bind 'kontaktformular' and provide a simple callback function 
            $('#kontaktformular').ajaxForm(function(output) { 
                $("#response").html(output);
                $("#kontaktformular")[0].reset();
                if (output.indexOf("Bitte füllen Sie alle Felder aus") != -1) {
                    $("#button").addClass("wrong");
                }
            }); 
        });

Sempervivum

Zitat

Ich hätten nun also gerne wenn der Kunde die Felder nicht ausfüllt und trotzdem auf senden klickt, dass der Button läd und dann allerdings rot wird und ein "X" erscheint statt dem Haken.

Oder ist das jetzt zu viel verlangt

Nein, ist nicht zuviel verlangt. Weil dabei alles zusammen spielen muss, habe ich eine Testdatei angelegt. Du musst dir das Notwendige heraus ziehen und vor allem den Namen der PHP-Datei durch deinen ersetzen.

HTML

<!doctype html>
<html>
<head>
    <title>Registrierung</title>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
</head>
<body>
    <section class="contact" id="contact">
        <div id="response"></div>
        <h3>KONTAKT</h3>
        <form id="myForm" method="post" action="ajaxform-blickpunkt.php">
            <input type="text" name="von" placeholder="Name" class="name" /><br />
            <br />
            <input type="text" name="mail" placeholder="E-Mail" class="mail" /><br />
            <br />
            <textarea name="nachricht" placeholder="Nachricht"></textarea>
            <br />
            <button type="submit" id="button"></button>
        </form>
    </section>

    <script>
        // wait for the DOM to be loaded
        $(document).ready(function() {
            // bind 'myForm' and provide a simple callback function
            $('#myForm').ajaxForm(function(output) {
                $("#response").html(output);
                $("#myForm")[0].reset();
                if (output.indexOf("Bitte füllen Sie alle Felder aus") != -1) {
                    $("#button").addClass("wrong");
                }
            });

            $( "#button" ).click(function() {
                $( "#button" ).addClass( "onclic", 250, validate);
            });
            function validate() {
                setTimeout(function() {
                    $( "#button" ).removeClass( "onclic" );
                    $( "#button" ).addClass( "validate", 450, callback );
                }, 2250 );
            }
            function callback() {
                setTimeout(function() {
                    $( "#button" ).removeClass( "validate wrong" );
                }, 1250 );
            }
        });
    </script>
    <style>
        button {
            outline: none;
            height: 40px;
            text-align: center;
            width: 130px;
            border-radius: 40px;
            background: #fff;
            border: 2px solid #1ECD97;
            color: #1ECD97;
            letter-spacing: 1px;
            text-shadow: 0;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.25s ease;
        }

            button:hover {
                color: white;
                background: #1ECD97;
            }

            button:active {
                letter-spacing: 2px;
            }

            button:after {
                content: "SUBMIT";
            }

        .onclic {
            width: 40px;
            border-color: #bbbbbb;
            border-width: 3px;
            font-size: 0;
            border-left-color: #1ECD97;
            animation: rotating 2s 0.25s linear infinite;
        }

            .onclic:after {
                content: "";
            }

            .onclic:hover {
                color: #1ECD97;
                background: white;
            }

        .validate {
            font-size: 13px;
            color: white;
            background: #1ECD97;
        }

            .validate:after {
                font-family: 'FontAwesome';
                content: "\f00c";
            }

        .validate.wrong {
            font-size: 13px;
            color: white;
            background-color: salmon !important;
            border-color: red;
        }

            .validate.wrong:after {
                font-family: 'FontAwesome';
                content: "\f00d";
            }

        @keyframes rotating {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    </style>
</body>
</html>

Alles anzeigen

Sempervivum

Gute Nacht! Die nächste Frage kannst Du ja morgen stellen ...

Sempervivum

Zitat

Genau das habe ich auch gesehen, dass es SCSS ist. Ich habe dann mit Dreamweaver eine neue SCSS Datei erstellt, den Code reinkopiert und als ich es gespeichert habe, kam eine Meldung das die Datei in CSS kompiliert wurde und ich hatte dann css und scss.

Tut mir Leid, ich hatte nicht damit gerechnet, dass Du dich mit SCSS auskennst. Ich selber nämlich so gut wie nicht.

Freut mich, dass es jetzt funktioniert.

Ja, Du kannst die Einzüge im Head lassen. Am besten auch die anderen dort hin bringen, dann ist es übersichtlicher.

Sempervivum

Nein, ich meine auf der codepen-Seite das CSS. Das ist SCSS und muss kompiliert werden. Das habe ich mal gemacht und ein fiddle gemacht, daraus kannst Du das CSS kopieren:

http://jsfiddle.net/dtsLy10q/

Das codepen braucht noch eine Reihe mehr Einzüge, eine wahre Materialschlacht. Du musst dieses noch ergänzen:

Code

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.csss">

Sempervivum

Zitat

https://codepen.io/valentingalmand/pen/MYMZZK

Ich sehe, das ist SCSS. Das musst Du kompilieren, z. B. hier:

http://beautifytools.com/scss-compiler.php

Sempervivum

Zitat

Du meinst die URL von meiner Website, oder?

http://www.blickpunkt-grafikdesign.de

Ich bin ja dumm, die hattest Du ja längst gepostet.

Der Fehler liegt hier:

Code

<button type="submit" id="button"></button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script>
      $(function() {
      $( "#button" ).click(function() {
      $( "#button" ).addClass( "onclic", 250, validate);
      });
     function validate() {
      setTimeout(function() {
      $( "#button" ).removeClass( "onclic" );
      $( "#button" ).addClass( "validate", 450, callback);
      }, 2250 );
      }
      function callback() {
      setTimeout(function() {
        $( "#button" ).removeClass( "validate" );
      }, 1250 );
    }
  });
      </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <!-- loeschen -->
    <script src="http://malsup.github.com/jquery.form.js"></script> 
    <script>

Alles anzeigen

Ganz unten ziehst Du jQuery zum zweiten Mal ein. Dabei wird alles, was von jQuery-UI umgeändert oder hinzugefügt wurde, wieder gelöscht. Lösche diese Zeile.

Sempervivum

Zitat

Von mehr als einem Parameter bei der Funktion addClass() ist mir nichts bekannt

Dabei hatte ich mich auf die Doku von jQuery verlassen.

jQuery-UI kennt jedoch diese Parameter:

http://api.jqueryui.com/addclass/

Wie ich sehe, hast Du jQuery-UI auch eingebunden. Dann muss es einen anderen Grund haben, wenn es nicht funktioniert. Hast Du es online und kannst die URL posten?

Sempervivum

Zitat

ich hatte den code von codepen.io

Ah ja, kannst Du mal die URL posten?

Sempervivum

Wenn ich dich richtig verstehe:

soll der Button zu rotieren beginnen, wenn man ihn drückt durch Hinzufügen der Klasse "onclic"
soll der Button einen Haken anzeigen durch Austausch dieser Klasse gegen "validate" wenn die Antwort vom Server kommt
soll der Haken nach Ablauf einer Verzögerungszeit wieder verschwinden durch Löschen der Klasser "validate"

Zwei Einwände:

Von mehr als einem Parameter bei der Funktion addClass() ist mir nichts bekannt: https://api.jquery.com/addclass/
Ich erwarte, dass bei diesem kurzen Skript die Antwort vom Server sehr schnell kommen wird, so dass der rotierende Button nur ganz kurz aufblitzen wird

Oder möchtest Du alles zeitgesteuert machen, d. h. beim Drücken beginnt er zu rotieren, nach Ablauf einer Zeit zeigt er den Haken, nach Ablauf einer weiteren Zeit verschwindet der Haken wieder?

Sempervivum

Zitat

Kann man das auch noch so einfach ändern, dass die Felder wieder leer sind?

Auch das ist kein Problem mit der Funktion reset():

Code

<script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function(output) { 
                $("#response").html(output);
                $("form")[0].reset();
            }); 
        }); 
    </script>

Sempervivum

Das ist überhaupt kein Problem. Mit dem jQuery-Plugin Ajaxform kannst Du mit wenigen Zeilen Javascript das Formular über Ajax abschicken und die Antwort auf der ursprüngliche Seite sichtbar machen:

http://malsup.com/jquery/form/

Würde dann so aussehen:

Code

<section class="contact" id="contact">
<div id="response"></div>
<h3>KONTAKT</h3>
<form method="post" action="kontaktformular.php">
<input type="text" name="von" placeholder="Name" class="name"/><br />
<br />
<input type="text" name="mail" placeholder="E-Mail" class="mail"/><br />
<br />
<textarea name="nachricht" placeholder="Nachricht"></textarea>
<br />
<button type="submit" id="button"></button>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
 
    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function(output) { 
                $("#response").html(output); 
            }); 
        }); 
    </script>

Alles anzeigen

Sempervivum

Gern geschehen! Wie ich sehe, funktioniert es jetzt.

Sempervivum

Du hast hier den Thread von Redland gekapert. Mache lieber einen neuen auf mit deinen Fragen.

Beiträge von Sempervivum

Farbwechsel der Schrift

Farbwechsel der Schrift

Farbwechsel der Schrift

Kontaktformular: nach "senden" auf der selben Seite bleiben

Kontaktformular: nach "senden" auf der selben Seite bleiben

Einbinden.. Wie ? Wann ? Wo ? und vorallem Was genau ??

Kontaktformular: nach "senden" auf der selben Seite bleiben

Kontaktformular: nach "senden" auf der selben Seite bleiben

Kontaktformular: nach "senden" auf der selben Seite bleiben

Kontaktformular: nach "senden" auf der selben Seite bleiben

Kontaktformular: nach "senden" auf der selben Seite bleiben

Kontaktformular: nach "senden" auf der selben Seite bleiben

Kontaktformular: nach "senden" auf der selben Seite bleiben

Kontaktformular: nach "senden" auf der selben Seite bleiben

Kontaktformular: nach "senden" auf der selben Seite bleiben

Kontaktformular: nach "senden" auf der selben Seite bleiben

Kontaktformular: nach "senden" auf der selben Seite bleiben

Kontaktformular: nach "senden" auf der selben Seite bleiben

Navigation

Navigation