Beiträge von ny_unity

ny_unity · 13. August 2020

Zitat von tk1234

Warum der Aufwand? Lass das action-Attribut doch einfach ganz weg wenn das Formular auf die gleiche URL zeigen soll …

Das hab ich im Nachhinein auch so gemacht, da es immer wieder Probleme mit dem "required" gab, es wurde immer erst nach zwei klicks reagiert....

Was ich noch hinzugefügt habe ist, dass wenn die Bewertungsseite nochmal aufgerufen wird, die bereits bewerteten Daten wieder angezeigt werden, vorher kam der Client immer wieder auf ein leeres Formular... jetzt sind die Sterne ggf. schon vorausgefüllt.

gelöst mit:

PHP

<input type="radio" id="star1bd" name="ratingbd" value="1" required="" <?php if($disponent == 1): ?> checked <?php endif; ?>/><label for="star1bd" title="Sehr gut!">1</label>

die $variable habe ich vorher natürlich ausgelesen aus der Datenbank

ny_unity · 12. August 2020

danke, damit hat es geklappt, habe aber nicht javascript genommen, sondern die html5 variante... auch ging nicht die Fehlermeldung zu nullen mit oninput sonder ich musste onvalid nehmen... hier der code:

Code

<div class="form-row">
                    <div class="col-12">
                        <div class="form-row">
                            <div class="col-12 col-sm-12 col-md-3">
                            <label for="bd">Bewertung</label>
                            </div>
                            <div class="col-12 col-sm-12 col-md-9 mt-n2 mt-md-0">
                                <div class="rating" style="vertical-align: top;">
                                      <input type="radio" id="star1bd" name="ratingbd" value="1" required="" oninvalid="this.setCustomValidity('Wie bewerten Sie uns?')" onvalid="setCustomValidity('')" /><label for="star1bd" title="Sehr gut!">1</label>
                                    <input type="radio" id="star2bd" name="ratingbd" value="2" required="" oninvalid="this.setCustomValidity('Wie bewerten Sie uns?')" onvalid="setCustomValidity('')" /><label for="star2bd" title="Gut!">2</label>
                                    <input type="radio" id="star3bd" name="ratingbd" value="3" required="" oninvalid="this.setCustomValidity('Wie bewerten Sie uns?')" onvalid="setCustomValidity('')" /><label for="star3bd" title="Befriedigend">3</label>
                                    <input type="radio" id="star4bd" name="ratingbd" value="4" required="" oninvalid="this.setCustomValidity('Wie bewerten Sie uns?')" onvalid="setCustomValidity('')" /><label for="star4bd" title="Ausreichend">4</label>
                                    <input type="radio" id="star5bd" name="ratingbd" value="5" required="" oninvalid="this.setCustomValidity('Wie bewerten Sie uns?')" onvalid="setCustomValidity('')" /><label for="star5bd" title="Mangelhaft">5</label>
                                    <input type="radio" id="star6bd" name="ratingbd" value="6" required="" oninvalid="this.setCustomValidity('Wie bewerten Sie uns?')" onvalid="setCustomValidity('')" /><label for="star6bd" title="Ungenügend">6</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Alles anzeigen

Vielen Dank für Eure Hilfe, habe sehr viel gelernt.

Zitat von basti1012

Ließ dir mal den Link von tk1234 durch.
Da wird beschrieben, wie es geht.
Wenn du es nicht hinbekommen solltest, dann erstelle mal einen aktuellen kompletten Code bei Codepen ( mit HTML und CSS).
Ganzer Code kann ab und zu wichtig sein, weil wenn das da oben dein aktueller Code ist fehlt schon mal dein <form> Element damit das klappt.

das <form> Element ist ganz oben im code, ist dabei

PHP

<body class="pt-md-5">
          <div class="container">
            <form class="form" method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>">
                <header class="py-md-5">

Also nochmal, vielen Dank an Euch... bis Bald

ny_unity · 12. August 2020

den link von tk1234 habe ich überlesen.... es lag an folgendem (im link von stackoverflow) schrieb jemand:

Zitat

If your radio buttons have been customised, for example the original icon for the radio button has been hidden via css display:none so that you can create your own radio button then you will might be getting the error.

The way to fix it is to replace display:none with opacity:0

Und, ich habe ja im CSS stehen:

Code

.rating:not(:checked) > input {
            position:absolute;
            display:none;
            clip:rect(0,0,0,0);
            }

Ich habe das in:

Code

.rating:not(:checked) > input {
            position:absolute;
            opacity:0;
            /*display:none;*/
            clip:rect(0,0,0,0);
            }

geändert, jetzt erscheint die Meldung, das ich einen Wert auswählen soll

Kurze Nachfrage noch: Kann ich die Meldung personalisieren und kann ich für verschiedenste required Felder unterschiedliche Meldungen bringen?

Bsp.:

Geschlecht required: Meldung: Bitte wählen Sie ein Geschlecht

Alter required: Bitte geben Sie ihr Alter an

ny_unity · 12. August 2020

Moin,

es ist richtig, dass mehr Sterne = bessere Bewertung. Ich hatte aber das Bewertungssystem vor ein paar Jahres erstellt, allerdings nur für Desktop, jetzt halt auch mobil. Damals hatte ich mit Dropdown/Select und Schulnoten 1-6 gearbeitet. Diese Werte werden in einer Datenbank gespeichert, auf die dann weitere Auswertungen laufen.

Ich wollte nicht alles umstellen, daher habe ich es so gelöst, dass 6 Sterne eine Schulnote 1 ist und so weiter...

Aber das Problem mit dem required ist noch nicht gelöst oder? Ich probiere heute wieder weitere, halte euch auf dem Laufenden.

Wäre cool, wenn wir das auch noch lösen würden

ny_unity · 11. August 2020

Nachtrag...

Ich komme aktuell nicht weiter bei der required Angabe...

Die radio buttons sind ja als sterne dargestellt... wenn ich das attribut required hinzufüge und dann am Ende des Formulars auf meinen button drucke, passiert nix, erhalte auch keine Fehlermeldung.

mein button am Ende des Formulars

Code

<div class="form-row">
                              <div class="col-md-3 offset-md-9 text-center">
                                <button type="submit" name="absenden" value="absenden" id="absenden" class="float-md-right btn btn-primary buttondremo">Bewertung an DREMO senden</button>
                            </div>
                        </div>

und die radio buttons:

Code

<div class="form-row">
                    <div class="col-12">
                        <div class="form-row">
                            <div class="col-12 col-sm-12 col-md-3">
                            <label for="bd">Bewertung</label>
                            </div>
                            <div class="col-12 col-sm-12 col-md-9 mt-n2 mt-md-0">
                                <div class="rating" style="vertical-align: top;">
                                      <input type="radio" id="star1bd" name="ratingbd" value="1" required/><label for="star1bd" title="Sehr gut!">1</label>
                                    <input type="radio" id="star2bd" name="ratingbd" value="2" /><label for="star2bd" title="Gut!">2</label>
                                    <input type="radio" id="star3bd" name="ratingbd" value="3" /><label for="star3bd" title="Befriedigend">3</label>
                                    <input type="radio" id="star4bd" name="ratingbd" value="4" /><label for="star4bd" title="Ausreichend">4</label>
                                    <input type="radio" id="star5bd" name="ratingbd" value="5" /><label for="star5bd" title="Mangelhaft">5</label>
                                    <input type="radio" id="star6bd" name="ratingbd" value="6" /><label for="star6bd" title="Ungenügend">6</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Alles anzeigen

Aber es passiert einfach nix... wenn ich beim button type=button statt submit mache, passiert nix... Bei submit zeit Chrome bei der "Untersuchungsfunktion" folgenden Fehler nach klick auf dem Button an:

An invalid form control with name='ratingbd' is not focusable.

hast du eine Idee, basti1012 ?

ny_unity · 11. August 2020

moin,

danke für den link, der hat geholfen... habe es hinbekommen, habe es gelöst mit:

PHP

<form class="form" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">

und dann im PHP

Code

if(isset($_POST['absenden']))
        {
        //Ansprechpartner
        if(isset($_POST['asp']) and !empty($_POST['asp']))
            {
            $asp_sql = "'".$_POST['asp']."'";
            }
        else
            {
            $asp_sql = 'NULL';
            }
        }

Alles anzeigen

Die daten abgerufen, wobei "absenden" der Button fes Formulars ist.

Dann einfach das UPDATE SQL über die mysql query ausgeführt... und anschließend auf eine andere Seite weitergeleitet... fertig!!!

1.000 Dank basti1012

Jetzt bastel ich noch ein paar Prüfmechanismen ein und dann ist meine erste HTML Seite mit Bootstrap und mobiler Ansicht fertig... den automatischen Dark-Mode habe ich auch schon mit drin

ny_unity · 10. August 2020

danke dir, das baue ich noch mit ein.

Kannst du mir ein kurzes Beispiel geben, wie ich aus meinem HTML Formular jetzt die Werte in die Datenbank (mysql, treiber pdo) einfüge bzw. aktuailisiere? DAs SQL statemant ist kein problem, aber wie ich nach dem speicher button das php ausführe weiß ich nicht... ist das mit javascript zu realisieren oder? Weil php ist ja serverseitig aber der client "drückt" ja auf update...

Danke,

Erik

ny_unity · 7. August 2020

Ich meinte, dass die Bewertungssterne nicht bündig mit der Eigenschaft waren:

html-seminar.de/woltlab/attachment/2590/

habe es gelöst mit negativen margin

Code

.rating {

float:left;

margin-top: -5px;

}

html-seminar.de/woltlab/attachment/2589/

ist doch, oder? Value =1 ist die Note 1, Ich speichere die Noten in der Datenbank, um später mit dem Schulnotenprinzip die Daten bewerten zu können

ny_unity · 7. August 2020

basti1012 danke dir, das klappt!

Noch eine Frage, meine Bewertung steht ja in einer spalte... kann ich diese links oben in der Spalte anordnen? Ich habe es jetzt mit margin ausgerichtet, aber eleganter und saubere wäre doch, wenn das objekt sich automatisch links oben anordnet oder? Ich habe aktuell vertig-align: top

aber es ist trotzdem nicht ganz links oben

ny_unity · 7. August 2020

Hallo zusammen,

ich habe mein erstes HTML Formular mit Bootstrap fertig gestellt. Es ist responsive und es klappt wirklich so gut wie alles. Habe mir online TuT von SelfHTML durchgelesen und probiert.

Im Formular kann bewertet werden, wenn der User eine Bewertung (Radio-Button) anklickt, springt die Seite automatisch an den Seitenanfang, natürlich nur, wenn die Seite nicht auf eine Seite passt. Auf dem Handy passiert das nicht, nur wenn ich Chrome so klein schiebe, dass gescrollt werden muss.

Die Bewertung ist mit CSS als Star dargestellt... hier mal mein Code für eine Bewertung

Spoiler anzeigen

Den header habe ich weggelassen, hier aber noch das CSS für das rating:

Spoiler anzeigen

Code

<style>
            body {
                background-color: #E4E8F1;
                font-family: 'Exo 2', sans-serif;
            }
            
            .selectfields {
                background-color: #9FA2A9;
                color: #fff;
                font-weight: bold;
                border-color: #fff;
                border-style: solid;
                border-width: 1px;
            }
            
            .selectfields:focus {
                background-color: #9FA2A9;
                color: #fff;
                font-weight: bold;
                border-color: #fff;
                border-style: solid;
                border-width: 1px;
            }
            
            h1{
                 color: #004088; 
                font-weight: bold;
            }
            
            label {
                font-weight: bold;
            }
            
            .buttondremo {
                color: #FFFFFF;
                font-weight: bold;
                border-width: 0px 0px 6px 0px;
                border-color: #013773;
                border-style: solid;
                border-radius: 0px;
                background-color: #1f508a;
                background-image: none;
                cursor: pointer;
            }
            
            .buttondremo:hover {
                color: #FFFFFF;
                font-weight: bold;
                border-width: 0px 0px 6px 0px;
                border-color: #013773;
                border-style: solid;
                border-radius: 0px;
                background-color: #ef7900;
                background-image: none;
                cursor: pointer;
            }
            
            .footerstyle {
                border-style: solid;
                border-width: 2px 0px 0px 0px;
                border-color: #fff;
                font-weight: bold;
            }
            
            .buttonsmall {
                display:flex; 
                justify-content: space-around;
            }
            
            .blockheader {
                background-color: #6E92BB;
                font-weight: bold;
                border-width: 1px;
                border-color: #000;
                border-style: solid;
                border-radius: 0px;
                background-image: none;
                padding: 4px;
                margin-bottom: 10px;
                margin-top: 10px
            }        
            
            .rating {
            float:left;
            }
            /* :not(:checked) is a filter, so that browsers that don't support :checked don't 
              follow these rules. Every browser that supports :checked also supports :not(), so
              it doesn't make the test unnecessarily selective */
            .rating:not(:checked) > input {
            position:absolute;
            top:-9999px;
            clip:rect(0,0,0,0);
            }

            .rating:not(:checked) > label {
            float:right;
            width:1.0em;
            /* padding:0 .1em; */
            overflow:hidden;
            white-space:nowrap;
            cursor:pointer;
            font-size:150%;
            /* line-height:1.2; */
            color:#9FA2A9;
            }

            .rating:not(:checked) > label:before {
            content: '★ ';
            }

            .rating > input:checked ~ label {
            color: #ef7900;
            }

            .rating:not(:checked) > label:hover,
    
            .rating:not(:checked) > label:hover ~ label {
            color: #ef7900;
            }
            
            .rating > input:checked + label:hover,
            
            .rating > input:checked + label:hover ~ label,
    
            .rating > input:checked ~ label:hover,
    
            .rating > input:checked ~ label:hover ~ label,
    
            .rating > label:hover ~ input:checked ~ label {
            color: #ef7900;
            }
            
            .rating > label:active {
            position:relative;
            top:0px;
            left:0px;
            }
    </style>

Alles anzeigen

Kann jemand mir erklären, warum er nach oben springt? Und wenn ja, warum nicht auf dem iPhone sondern nur auf der Desktop-Variante?

Vielen Dank,

Erik

ny_unity · 20. Mai 2020

Hallo zusammen,

ich habe jetzt zwei Tage damit verbracht meine Bilder in einer html E-Mail als CID image embedding einzubinden... leider komplett ohne erfolg, mir fehlt jeglicher Ansatz. Ich weiß, dass ich

Code

<img src="CID:bild.png">

schreiben muss, um das Bild an der richtigen Stelle einzufügen. Aber, ich weiß nicht wie ich mein Bild, welches auf dem Webserver (bspw. http://www.example.com/_bilder/person1.png) in die E-Mail als CID bekomme.

Ich versende meine E-Mails alle über den MS SQL Server über dbmail.

Hat jemand einen Denkanstoß für mich?

Danke!

Erik

ny_unity · 26. September 2019

Hallo zusammen,

nach dem ich vieles über google lösen konnte und schon die ein oder andere schöne HTML E-Mail erstellt habe, komme ich jetzt an meine Grenzen, vielleicht liegts auch nicht an mir sondern am E-Mailprogramm.

Mein E-Mailprogramm (Software von Landwehr) bietet den Versand von HTML Emails an, dazu kann man eigene Vorlagen einbinden, welche dann entsprechend umgewandelt und versandt werden. Man schreibt dann nur einfach seinen Text und die Textmarke wird dann korrekt in die HTML Vorlage eingebettet.

Jetzt habe ich aber in meinem reinen Text das Vorhaben, einen HTML Code einzubinden, also nach der Art: Hallo Herr Meier, bitte klicken Sie hier.

Wo bei das hier dann so sein sollte:

Code

<a href="www.google.de">hier</a>

Das E-Mailprogramm wandelt den Code jetzt <a in <a um, er wandelt es also in Text um.

Meine Frage:

Kann man vor dem Code einen Befehl setzen, dass diese Umwandlung/Interpretation umgangen bzw, ausgeschalten wird?

Vielen Dank!

Viele Grüße

Erik

Beiträge von ny_unity

Nach Klick auf Rdaio Button Sprung nach oben

Nach Klick auf Rdaio Button Sprung nach oben

Nach Klick auf Rdaio Button Sprung nach oben

Nach Klick auf Rdaio Button Sprung nach oben

Nach Klick auf Rdaio Button Sprung nach oben

Nach Klick auf Rdaio Button Sprung nach oben

Nach Klick auf Rdaio Button Sprung nach oben

Nach Klick auf Rdaio Button Sprung nach oben

Nach Klick auf Rdaio Button Sprung nach oben

Nach Klick auf Rdaio Button Sprung nach oben

html email with content id

HTML-Code wird im HTML-Code als Text interpretiert