Beiträge von mentle

mentle · 31. März 2018

Heißt was?

mentle · 31. März 2018

Hallo zusammen,

ich habe ein Formular gebastelt, bei dem eine PLZ eingegeben wird und der dazugehörige Wohnort automatisch eingetragen wird.

Falls ein zweiter Wohnsitz besteht, kann das Formular durch Buttonklick nochmals erzeugt werden.

Das Problem ist, dass beim ersten Formular die Erkennung der PLZ funktioniert und die passende Stadt dazu eingetragen wird.

Für das 2. und die ff. Formulare passiert allerdings rein gar nichts.

Kann das damit zusammenhängen, dass das 2. und ff. Formular beim Laden der Seite noch gar nicht vorhanden war? Falls das das Problem ist, wie umschiffe ich das?

Grüße,

Michael

Code

         <div class="wohnsitzinputelements">
             <span>Bitte geben Sie Ihren Wohnort an</span><br>
             <input type="number" name="plz-0" id="plz" required placeholder="Postleitzahl"><br>
         </div>
         <div class="wohnsitzinputelements">
             <span></span><br>
             <input type="text" id="wohnort" name="wohnort-0" required placeholder="Wohnort"><br>
         </div>
         <div class="neuerwohnsitz">
             <button id="addwohnsitz" type="button"  onclick="addWohnsitz(this)" data-wsi-add="0">Reiseprofil hinzufügen</button>
             <input type="hidden" name="anz_zus_ws" value="0">
             <button id="removewohnsitz" type="button"  onclick="removeWohnsitz(this)" style="display: none" data-wsi-remove="0">Eintrag löschen</button>
         </div>

Alles anzeigen

Code

$('#plz').bind('keyup change', function(e) {
    if ($(this).val().length > 4) {
        var ort = $('#wohnort');
        $.getJSON('http://www.geonames.org/postalCodeLookupJSON?&country=DE&callback=?', {postalcode: this.value }, function(response) {
            if (response && response.postalcodes.length && response.postalcodes[0].placeName) {
                ort.val(response.postalcodes[0].placeName);
            }
        })
    } else {
        $('#wohnort').val('');
    }
});

Alles anzeigen

Code

function addWohnsitz(button_number) {

    var nbr = button_number.getAttribute("data-wsi-add");
    nbr = Number(nbr);
    var elmnt = document.getElementsByClassName("wohnsitzinput")[nbr];
    var cln = elmnt.cloneNode(true);
    nbr = nbr + 1;

    var btn_parent = cln.getElementsByTagName("div")[29];
    var inpt = btn_parent.getElementsByTagName("input")[0];
    var btn_add = btn_parent.getElementsByTagName("button")[0];
    var btn_rem = btn_parent.getElementsByTagName("button")[1];
    btn_add.setAttribute("data-wsi-add",nbr);
    btn_rem.setAttribute("data-wsi-remove",nbr);
    inpt.setAttribute("value", nbr);

    var date_input_parent = cln.getElementsByTagName("div")[0];
    var date_input = date_input_parent.getElementsByTagName("input")[0];
    date_input_parent.removeChild(date_input);
    var date_input = document.createElement("input");
    date_input.type = "text";
    date_input.name = "wohnsitz_ab-" + nbr;
    date_input.setAttribute("required", "");
    $(date_input).datepicker();
    date_input_parent.appendChild(date_input);

    var plz = cln.getElementsByTagName("div")[2];
    var plz_inpt = plz.getElementsByTagName("input")[0];
    plz_inpt.setAttribute("name", "plz-" + nbr);
    plz_inpt.value = "";

    var wohnort = cln.getElementsByTagName("div")[3];
    var wohnort_inpt = wohnort.getElementsByTagName("input")[0];
    wohnort_inpt.setAttribute("name", "wohnort-" + nbr);
    wohnort_inpt.value = "";

    var flgz_zmdnst = cln.getElementsByTagName("div")[5];
    var fl_zmd_ja = flgz_zmdnst.getElementsByTagName("input")[0];
    var fl_zmd_nein = flgz_zmdnst.getElementsByTagName("input")[1];
    fl_zmd_ja.setAttribute("name", "flugzumdienst-" + nbr);
    fl_zmd_nein.setAttribute("name", "flugzumdienst-" + nbr);
    fl_zmd_ja.setAttribute("data-anr-flgz", nbr);
    fl_zmd_nein.setAttribute("data-anr-auto", nbr);
    fl_zmd_nein.checked = true;

    var flgz_zmdnst_entf = cln.getElementsByTagName("div")[6];
    var flgz_zmdnst_text = flgz_zmdnst_entf.getElementsByTagName("span")[0];
    flgz_zmdnst_text.innerHTML = "Entfernung Wohnsitz - Homebase";

    var ent_ws_hb = cln.getElementsByTagName("div")[6];
    var ent_inpt = ent_ws_hb.getElementsByTagName("input")[0];
    ent_inpt.value = "";
    ent_inpt.setAttribute("name", "entfernung_ws_hb-" + nbr);

    var dauer_ws_hb = cln.getElementsByTagName("div")[9];
    var dauer_inpt = dauer_ws_hb.getElementsByTagName("input")[0];
    dauer_inpt.value = "";
    dauer_inpt.setAttribute("name", "reisezeit_ws_hb-" + nbr);

    var stb_hb = cln.getElementsByTagName("div")[11];
    var stb_hb_ja = stb_hb.getElementsByTagName("input")[0];
    var stb_hb_nein = stb_hb.getElementsByTagName("input")[1];
    stb_hb_ja.setAttribute("name", "standbyhomebase-" + nbr);
    stb_hb_nein.setAttribute("name", "standbyhomebase-" + nbr);
    stb_hb_nein.checked = true;

    var anr_vt = cln.getElementsByTagName("div")[13];
    var anr_vt_ja = anr_vt.getElementsByTagName("input")[0];
    var anr_vt_nein = anr_vt.getElementsByTagName("input")[1];
    anr_vt_ja.setAttribute("name", "anreisevortag-" + nbr);
    anr_vt_nein.setAttribute("name", "anreisevortag-" + nbr);
    anr_vt_ja.setAttribute("data-ea-ci-on", nbr);
    anr_vt_nein.setAttribute("data-ea-ci-off", nbr);
    anr_vt_nein.checked = true

    var anr_vt_uz = cln.getElementsByTagName("div")[14];
    var uz_inpt = anr_vt_uz.getElementsByTagName("input")[0];
    uz_inpt.setAttribute("name", "earlycheckin-" + nbr);
    anr_vt_uz.style.display = "none";

    var abr_ft = cln.getElementsByTagName("div")[16];
    var abr_ft_ja = abr_ft.getElementsByTagName("input")[0];
    var abr_ft_nein = abr_ft.getElementsByTagName("input")[1];
    abr_ft_ja.setAttribute("name", "abreisefolgetag-" + nbr);
    abr_ft_nein.setAttribute("name", "abreisefolgetag-" + nbr);
    abr_ft_ja.setAttribute("data-lt-co-on", nbr);
    abr_ft_nein.setAttribute("data-lt-co-off", nbr);
    abr_ft_nein.checked = true;

    var abr_ft_uz = cln.getElementsByTagName("div")[17];
    var uz_inpt2 = abr_ft_uz.getElementsByTagName("input")[0];
    uz_inpt2.setAttribute("name", "latecheckout-" + nbr);
    abr_ft_uz.style.display = "none";

    var stbb = cln.getElementsByTagName("div")[19];
    var stbb_ja = stbb.getElementsByTagName("input")[0];
    var stbb_nein = stbb.getElementsByTagName("input")[1];
    stbb_ja.setAttribute("name", "standbybude-" + nbr);
    stbb_nein.setAttribute("name", "standbybude-" + nbr);
    stbb_ja.setAttribute("data-stb-bd-on", nbr);
    stbb_nein.setAttribute("data-stb-bd-off", nbr);
    stbb_nein.checked = true;

    var ang_stb = cln.getElementsByTagName("div")[20];
    ang_stb.style.display = "none";

    var mtb = cln.getElementsByTagName("div")[21];
    var mtb_uz_inpt = mtb.getElementsByTagName("input")[0];
    mtb_uz_inpt.setAttribute("name", "min_time_between-" + nbr);

    var stbb_oder_hotel = cln.getElementsByTagName("div")[23];
    var hotel = stbb_oder_hotel.getElementsByTagName("input")[0];
    var stb_bude = stbb_oder_hotel.getElementsByTagName("input")[1];
    hotel.setAttribute("name", "unterkunft-" + nbr);
    stb_bude.setAttribute("name", "unterkunft-" + nbr);
    stb_bude.checked = true;

    var ent_ws_stb = cln.getElementsByTagName("div")[24];
    var ent_ws_stb_inpt = ent_ws_stb.getElementsByTagName("input")[0];
    ent_ws_stb_inpt.setAttribute("name", "entfernung_ws_stb-" + nbr);

    var ent_stb_hb = cln.getElementsByTagName("div")[27];
    var ent_stb_hb_inpt = ent_stb_hb.getElementsByTagName("input")[0];
    ent_stb_hb_inpt.setAttribute("name", "entfernung_stb_hb-" + nbr);

    var zuf = document.getElementsByClassName("wohnsitzinhalt")[0];
    zuf.appendChild(cln);


    var btn_parent = elmnt.getElementsByTagName("DIV")[29];
    var btn_alt = btn_parent.getElementsByTagName("button")[0];

    if(nbr == 1){
        btn_alt.style.display = "none";
        btn_rem.style.display = "block";

    }

    if(nbr > 1){
        var elmnt = document.getElementsByClassName("wohnsitzinput")[nbr-1];
        var add_parent = elmnt.getElementsByTagName("div")[29];
        var add_button = add_parent.getElementsByTagName("button")[0];
        add_button.style.display = "none";
    }
}

Alles anzeigen

mentle · 25. Januar 2018

Super! Das war's, Danke!

Eine Frage noch: Wenn ich die Scripte und CSS nicht extern einbinden möchte, welche Dateien muss ich dazu lokal installieren. Wenn ich es so mache

Code

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

funktioniert es. Die beiden folgenden Dateien sind im Download von der DatePicker Seite enthalten.

jQuery-ui.js
jQuery-ui.css

Die Datei

jquery-1.12.4.js

ist es nicht.

Wenn ich die beiden ersten allerdings lokal auf dem Server habe und die dritte extern verlinke, funktioniert der Datepicker nicht. Wo liegt mein Denkfehler, oder: Woher bekomme ich die dritte Datei?

Oder: Welche Dateien muss ich lokal installieren, wenn ich nicht extern verlinken möchte?

mentle · 24. Januar 2018

Servus in die Runde.

Folgendes Problem:

Ich glaube, ich verstehe die Arbeits- bzw. Funktionsweise des DatePickers nicht richtig.

Ich bastle gerade an einer Seite, bei der ich mittels eines Forms ein "Bewegungsprofil" abfrage. Sollte der User nur dieses eine Profil angeben wollen, gilt dies ab 01. Januar, was als default Wert statisch gesetzt ist.

Sollte der User allerdings unter dem Jahr umgezogen sein, muss er die Möglichkeit haben, dieses Profil anzupassen. Dazu habe ich die Möglichkeit geschaffen, im Prinzip das komplette Profil nochmals einzugeben, allerdings soll diesmal mit angegeben werden, ab welchem Datum dies gilt. Dazu habe ich mittels JavaScript die Eingabemöglichkeit geclont.

Hier das Script:

Code

<script>
var a = 0;
function addbase() {
    var elmnt = document.getElementsByClassName("input")[a];
    var cln = elmnt.cloneNode(true);
    var zuf = document.getElementsByClassName("inhalt")[0];
    zuf.appendChild(cln);
    var btn = elmnt.getElementsByTagName("DIV")[4];

    if(a  == 0){
        elmnt.removeChild(btn);
        var trash = document.createElement("button");
        var att = document.createAttribute("ID");
        var att2 = document.createAttribute("onClick");
        att.value = "removebase";
        att2.value = "removeBase()";
        trash.setAttributeNode(att2);
        trash.setAttributeNode(att);
        var node = document.createTextNode("Diesen Eintrag löschen");
        trash.appendChild(node);
        var zuf = document.getElementsByClassName("neuebase")[a];
        zuf.appendChild(trash);

        var date = document.getElementsByClassName("input")[a+1];
        var dateinput = date.getElementsByTagName("DIV")[1];
        var span = dateinput.getElementsByTagName("SPAN")[0];

        var inputdate = document.createElement("input");
        inputdate.type = "text";
        var att3 = document.createAttribute("name");
        var att4 = document.createAttribute("ID");
        att3.value = "basedfrom-" + a+1;
        att4.value = "datepicker";
        inputdate.setAttributeNode(att3);
        inputdate.setAttributeNode(att4);
        dateinput.appendChild(inputdate);
        dateinput.removeChild(span);


    }
    a = a+1;
}
</script>

Alles anzeigen

Allerdings lässt sich der Datepicker nicht aktivieren. D.h., wenn ich auf "Zufügen" klicke, öffnet sich zwar das geclonte DIV Element und auch das Input Feld erscheint, allerdings öffnet sich der Kalender nicht.

Ich habe folgenden Verdacht:

Ich schätze mal, dass der Date Picker mit einem Event Handler arbeitet (was das angeht, habe ich leider nicht all zu viel Ahnung) und es irgendetwas damit zu tun hat, dass das DIV, in dem das Input Feld liegt, beim Laden des Dokuments noch nicht vorhanden war. Geht das in die richtige Richtung?

Falls ja, was kann ich dagegen tun?

Grüße,

Michael

mentle · 6. Januar 2018

Das Input Feld wurde am falschen Node eingesetzt.

mentle · 6. Januar 2018

OK, hat sich erledigt. Hab es hinbekommen.

Danke trotzdem an alle....

Code

large.onclick = function() {
    var content = document.getElementsByClassName("modal-content")[0];
    content.style.height = "60%";
    var neu = document.createElement("INPUT");
    var att = document.createAttribute("class");
    var att2 = document.createAttribute("required");
    att.value = "input_fields_login";
    neu.setAttributeNode(att);
    neu.setAttributeNode(att2);
    neu.type = "password";
    neu.name = "password2";
    neu.placeholder = "Bitte Passwort wiederholen";
    var vorh = document.getElementById("logInForm");
    vorh.appendChild(neu);
    

}

Alles anzeigen

mentle · 6. Januar 2018

Servus zusammen,

Danke schon mal für die Antworten.

Also, das ganze soll so aussehen:

Beim Klicken von LogIn öffnet sich ein Modal mit Header, Body, Footer. Im Body der Text "Bitte eMail Adr. und PW eingeben" und entsprechend die beiden Input Zeilen.

Im Footer der Sumbit Button und ein Button "Noch kein Konto?"

Beim Klicken von "Noch kein Konto?" erweitert sich dar Modal-Body, der Button "Noch kein Konto?" verschwindet und im Body erscheint eine zweite Input Zeile, in der das Passwort nochmals eingegeben werden soll.

Hier der komplette Code:

PHP

<?php
session_start();
?>

<!doctype html>
<html lang="de">

<head>
    <meta charset="UTF-8">

    <meta http-equiv="content-type"
        content="text/html; charset=utf-8">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="style-dpl2.css">



</head>

<body>

<header>

</header>

<main>

<nav id="oberenav">
<ul>
    <li><a class="active" href="dpl-index2.php">Home</a></li><li><a href="about-dpl2.php">About</a></li><li><a href="auswertung2.php">Auswertung</a></li><li><a href="auswertung.php">Noch eine Kategorie</a></li><li><a id="logInButton">Log-In</a></li>
</ul>
</nav>
<div id="inhalt">
<img id="bild1" src="flugzeug2.jpg">
<div id="inhalt-text">
<div>
<?php
if(isset($_SESSION["user"])){
echo "Angemeldet als: " . $_SESSION["user"];
}
?>
</div>

<div id="myModal" class="modal">
  <!-- Modal content -->
    <div class="modal-content">
          <div class="modal-header">
            <span class="close">&times;</span>
            <span>Log-In</span>
          </div>

          <div class="modal-body">
            <form id="logInForm" action="kundenpflege.php" method="post">
            <span style="font-size: 1.1em;">Bitte geben Sie Ihre e-Mail Adresse und Ihr Passwort ein</span>
            <input class="input_fields_login" type="email" name="email" autofocus placeholder="e-Mail Adresse" required>
              <input class="input_fields_login" type="password" name="password" placeholder="Passwort" required>
        </div>

          <div class="modal-footer">
            <div class="logInFormButton">
                <button id="neu_konto" type="button" name="neu_konto">Noch kein Konto?</button>
            </div>
            <div class="logInFormButton">
                <input type="submit" name="weiter" value="Senden">
            </form>
            </div>
          </div>
    </div>
</div>



<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("logInButton");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

//get the element that makes the modal larger
var large = document.getElementById("neu_konto");

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}


// when the user clicks the modal will get larger
large.onclick = function() {
    var content = document.getElementsByClassName("modal-content")[0];
    content.style.height = "60%";
    var neues_objekt = document.createElement("input");
    var att = document.createAttribute("class");
    att.value = "input_fields_login";
    neues_objekt.setAttributeNode(att);

    neues_objekt.type = "password";
    neues_objekt.name = "password2";
    neues_objekt.placeholder = "Bitte Passwort wiederholen";
    var vorh_obj = document.getElementsByClassName("input_fields_login")[1];
    vorh_obj.appendChild(neues_objekt);

}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

<div id="text">
</div>





<h1 style="text-align: center">Analyse</h1>





</div>


</div>




</main>

<footer>
    <nav class="untenrechts">
        <a href="kontakt.php">Kontakt  |</a>
        <a href="impressum.html">Impressum  |</a>
        <a href="datenschutz.php">Datenschutz  |</a>
        <a href="agb.php">AGB</a>
    </nav>
</footer>

</body>

</html>

Alles anzeigen

Code

/* The Modal (background) */
    .modal {
        box-sizing: border-box;
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 200px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color  */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }


    /* Modal Content */
    .modal-content {
        box-sizing: border-box;
        position: relative;
        background-color: gray;
        margin: auto;
        padding: 0;
        border: 1px solid #888;
        width: 30%;
        height: 50%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.6s
    }

    /* Add Animation */
    @-webkit-keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
    }

    @keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
    }

    /* The Close Button */
    .close {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    .modal-header {
        box-sizing: border-box;
        margin-top: 0;
        display: block;
        height: 20%;
        background-color: lightgray;
        color: white;
        text-align: center;
    }

    .modal-body {
        box-sizing: border-box;
        margin-top: 0;
        display: block;
        height: 60%;
        padding: 0;
    }

    .modal-footer {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        margin-top: 0;
        height: 20%;
        background-color: lightgray;
        color: white;
    }
    .logInFormButton {
        box-sizing: border-box;
        width: 35%;
        height: 80%;
        float: left;
        margin-left: 10%;
        text-align: center;


    }

    .logInFormButton input, .logInFormButton button {
        width: 100%;
        height: 100%;
        color: black;
        border: 1px darkgray solid;
    }


    .logInFormButton input:hover:not(.active), .logInFormButton button:hover:not(.active) {
        background-color: gray;
        color: white;
    }



    .input_fields_login {
        box-sizing: border-box;
        width: 90%;
        margin-top: 10px;
        font-size: 1.2em;


    }
    #logInForm {
        text-align: center;
        margin-top: 1em;

    }

Alles anzeigen

Funktionieren tut hierbei folgendes:

Das Modal kann geöffnet werden und beim Klicken von "Noch kein Konto?" erweitert es sich (von Height 50% auf 60%).

Allerdings wird das neue Element <INPUT> nicht erzeugt.

Danke für die Hilfe.

Grüße,

Michael

mentle · 6. Januar 2018

Servus,

die ID gibt es, ich habe diese Zeile nur vergessen hier reinzukopieren.

Wie gesagt, das erstmalige aufrufen des Modals klappt ja auch, eben so wie das vergrößern.

Nur diese zusätzliche Input Zeile wird nicht generiert. Der Fehler muss im Script liegen.

mentle · 6. Januar 2018

Code

<div id="myModal" class="modal">
  <!-- Modal content -->
    <div class="modal-content">
          <div class="modal-header">
            <span class="close">&times;</span>
            <span>Log-In</span>
          </div>

          <div class="modal-body">
            <form id="logInForm" action="kundenpflege.php" method="post">
            <span style="font-size: 1.1em;">Bitte geben Sie Ihre e-Mail Adresse und Ihr Passwort ein</span>
            <input class="input_fields_login" type="email" name="email" autofocus placeholder="e-Mail Adresse" required>
              <input class="input_fields_login" type="password" name="password" placeholder="Passwort" required>
        </div>

          <div class="modal-footer">
            <div class="logInFormButton">
                <button id="neu_konto" type="button" name="neu_konto">Noch kein Konto?</button>
            </div>
            <div class="logInFormButton">
                <input type="submit" name="weiter" value="Senden">
            </form>
            </div>
          </div>
    </div>
</div>



<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("logInButton");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

//get the element that makes the modal larger
var large = document.getElementById("neu_konto");

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}


// when the user clicks the modal will get larger
large.onclick = function() {
    var content = document.getElementsByClassName("modal-content")[0];
    content.style.height = "60%";
    var neues_objekt = document.createElement("input");
    var att = document.createAttribute("class");
    att.value = "input_fields_login";
    neues_objekt.setAttributeNode(att);

    neues_objekt.type = "password";
    neues_objekt.name = "password2";
    neues_objekt.placeholder = "Bitte Passwort wiederholen";
    var vorh_obj = document.getElementsByClassName("input_fields_login")[1];
    vorh_obj.appendChild(neues_objekt);

}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

/* The Modal (background) */
    .modal {
        box-sizing: border-box;
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 200px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color  */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }


    /* Modal Content */
    .modal-content {
        box-sizing: border-box;
        position: relative;
        background-color: gray;
        margin: auto;
        padding: 0;
        border: 1px solid #888;
        width: 30%;
        height: 50%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.6s
    }

    /* Add Animation */
    @-webkit-keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
    }

    @keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
    }

    /* The Close Button */
    .close {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    .modal-header {
        box-sizing: border-box;
        margin-top: 0;
        display: block;
        height: 20%;
        background-color: lightgray;
        color: white;
        text-align: center;
    }

    .modal-body {
        box-sizing: border-box;
        margin-top: 0;
        display: block;
        height: 60%;
        padding: 0;
    }

    .modal-footer {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        margin-top: 0;
        height: 20%;
        background-color: lightgray;
        color: white;
    }
    .logInFormButton {
        box-sizing: border-box;
        width: 35%;
        height: 80%;
        float: left;
        margin-left: 10%;
        text-align: center;


    }

    .logInFormButton input, .logInFormButton button {
        width: 100%;
        height: 100%;
        color: black;
        border: 1px darkgray solid;
    }


    .logInFormButton input:hover:not(.active), .logInFormButton button:hover:not(.active) {
        background-color: gray;
        color: white;
    }



    .input_fields_login {
        box-sizing: border-box;
        width: 90%;
        margin-top: 10px;
        font-size: 1.2em;


    }
    #logInForm {
        text-align: center;
        margin-top: 1em;

    }

Alles anzeigen

mentle · 5. Januar 2018

leider nicht

mentle · 5. Januar 2018

Nein, das funktioniert

mentle · 5. Januar 2018

Hallo zusammen,

ich bin dabei, eine Log-In Seite zu schreiben. Ich habe mich dafür entschieden, dafür ein Modal zu nutzen. Wenn jetzt z.B. ein User auf LogIn klickt und noch kein Account hat, soll er in diesem ersten Modal einen Button drücken und daraufhin soll sich das erste Modal schließen und sofort das zweite öffnen, in dem er sich registrieren kann.

Der bisherige Code dazu sieht so aus:

Code

<div id="myModal" class="modal">
  <!-- Modal content -->
<div class="modal-content">
  <div class="modal-header">
    <span class="close_a">&times;</span>
    <span>Log-In</span>
  </div>
  <div class="modal-body">
    <form id="logInForm" action="">
        <span style="font-size: 1.1em;">Bitte geben Sie Ihre e-Mail Adresse und Ihr Passwort ein</span>
        <input class="input_fields_login" type="email" name="email" autofocus placeholder="e-Mail Adresse">
          <input class="input_fields_login" type="password" name="password" placeholder="Passwort">
    </form>
  </div>
  <div class="modal-footer">
    <div class="logInFormButton"><a id="account_new" href="">Noch kein Kunde?</a></div><div class="logInFormButton">
        <a href="" class="close_b">Weiter</a>
    </div>
  </div>
</div>


<div id="myModal2" class="modal2">
  <!-- Modal content -->
<div class="modal-content">
  <div class="modal-header">
    <span class="close">&times;</span>
    <span>Registieren</span>
  </div>
  <div class="modal-body">
    <form id="logInForm2" action="">
        <span style="font-size: 1.1em;">Bitte geben Sie Ihre e-Mail Adresse und Ihr Passwort ein</span>
        <input class="input_fields_login" type="email" name="email" autofocus placeholder="e-Mail Adresse">
          <input class="input_fields_login" type="password" name="password" placeholder="Passwort">
          <input class="input_fields_login" type="password" name="password2" placeholder="Passwort wiederholen">

    </form>
  </div>
  <div class="modal-footer">
    <div class="logInFormButton"><a id="account_new2" href="">Doch ein Konto vorhanden?</a></div><div class="logInFormButton">
        <a href="">Weiter</a>
    </div>
  </div>
</div>


<script>
// Get the modal
var modal = document.getElementById("myModal");
var modal2 = document.getElementById("myModal2");

// Get the button that opens the modal
var btn = document.getElementById("logInButton");
var btn2 = document.getElementById("account_new");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}
btn2.onclick = function() {
    modal.style.display = "none";
    modal2.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span_a.onclick = function() {
    modal.style.display = "none";
}
span_b.onclick = function() {
    modal.style.display = "none";
}




// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

Alles anzeigen

Der Fehler ist der, dass das erste Modal ohne Probleme öffnet und auch schließt. Allerdings schließt es auch, wenn man auf den Button "Noch kein Konto" drückt, aber das zweite Modal öffnet sich nicht.

Ich könnte auch sehr gut damit leben, wenn sich beim Klicken auf "Noch kein Konto" das erste Modal verändert, z.B. einfach ein anderer Text dasteht und die zweite Passwort Zeile erscheint. Daran beiße ich mir jetzt schon den ganzen Tag die Zähne aus.

Hat jemand den entscheidenden Tip?

mentle · 4. Dezember 2017

Jetzt wird die Datei erstellt und ist leer, var_dump ergibt

string(0) ""

mentle · 4. Dezember 2017

So, mittlerweile läuft das alles soweit, dass ich nicht ausgeloggt werde. Auch die Text-Datei wird erstellt. Allerdings ist der Inhalt relativ überschaubar. Nämlich ein 1.

Ist die Variable $content lediglich der Rückgabewert, dass curl_exec erfolgreich ausgeführt wurde? Wo ist denn dann der Inhalt der Seite, die weiter oben definiert wurde?

mentle · 4. Dezember 2017

Hier ist der code für den login:

Code

<?PHP

if (isset($_POST["button"])){

$username = $_POST["username"];
$pin = (int)$_POST["pin"];
$password = (int)$pass;
$loginUrl = 'https://xyz.de/somepage/login.cgi';
$var = "username=" . $username . "&password=" . $pin . $password";


//init curl
$ch = curl_init();

//Set the URL to work with
curl_setopt($ch, CURLOPT_URL, $loginUrl);

curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/604.3.5 (KHTML, like Gecko) Version/11.0.1 Safari/604.3.5");

// ENABLE HTTP POST
curl_setopt($ch, CURLOPT_POST, 1);

//Set the post parameters
curl_setopt($ch, CURLOPT_POSTFIELDS, $var);

//Handle cookies for the login
curl_setopt($ch, CURLOPT_COOKIEJAR, 'cookie.txt');

//Setting CURLOPT_RETURNTRANSFER variable to 1 will force cURL
//not to print out the results of its query.
//Instead, it will return the results as a string return value
//from curl_exec() instead of the usual true/false.
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

//execute the request (the login)
$store = curl_exec($ch);


}

//the login is now done and you can continue to get the
//protected content.

//set the URL to the protected file
curl_setopt($ch, CURLOPT_URL, 'https://xyz.de/somepage/desired-site');

//execute the request
$content = curl_exec($ch);

curl_close($ch);

//save the data to disk
file_put_contents('/downloads/download.txt', $content);
?>

Alles anzeigen

Dieser code macht rein gar nichts. Mittlerweile bekomme ich nicht mal mehr die Meldung, dass die Sitzung abgelaufen ist. Die Datei download.txt wird weder erstellt, noch geschrieben.

Ich glaube, ich steht ganz gewaltig auf dem Schlauch?!? Kann jemand evtl. helfen?

Grüße,

Michael

mentle · 4. Dezember 2017

Servus Leute,

ich versuche mich gerade mittels PHP und cURL in das Intranet meiner Firma einzuloggen.

Den Login an sich habe ich mittlerweile geschafft. Allerdings bekomme ich sofort die Nachricht, dass die maximale Sitzungszeit abgelaufen wäre und werde wieder ausgeloggt.

Ich denke mal, dass der Beginn einer solchen Sitzung irgendwo geloggt wird. Diesen Marker werde ich zunächst auf Null setzen müssen, richtig?

Wo wird sowas in der Regel gespeichert? Cookie? Wie gehe ich da ran?

Grüße,

Michael

mentle · 11. März 2016

Hallo zusammen,
folgendes Problem:

Mittels <form> hat der user die Möglichkeit, mehrere Bilder, sowie erklärende Daten zu den Bildern hochzuladen.
Ich möchte jetzt, nachdem die Bilder auf den Server geladen wurden und noch einen temp_name haben, die Bilder und die Daten in einem zweiten <form> anzeigen lassen, so dass der user überprüfen kann, ob die Daten korrekt sind und sich für ein Bild als thumb entscheiden kann.

Das Einlesen der Daten in das form ist kein Problem.

Wie aber lasse ich ein Bild (bzw. mehrere Bilder) anzeigen, die noch nicht endgültig auf dem Server gespeichert wurden?

Grüße,
Michael

mentle · 4. März 2016

Liegt daran, dass es bei einem leeren Tag keinen firstChild.nodeValue gibt.
Mit innerHTML funktioniert es

mentle · 29. Februar 2016

folgende Fehlermeldung:

null is not an object (evaluating 'ausgabe.getElementsByTagName("bildtitel")[bildnummer-1].firstChild.nodeValue')

Habe die Abfrage mal folgendermaßen abgeändert:

JavaScript

$.ajax({url: "bilderdatenbanken/bilderdatenbank-tiere.xml", success: function(ausgabe) {

hilft aber auch nichts.

mentle · 28. Februar 2016

Funktioniert leider nicht

Beiträge von mentle

PLZ Autovervollständigung funktioniert nur teilweise

PLZ Autovervollständigung funktioniert nur teilweise

Probleme mit DatePicker

Probleme mit DatePicker

Modal öffnen funktioniert nicht

Modal öffnen funktioniert nicht

Modal öffnen funktioniert nicht

Modal öffnen funktioniert nicht

Modal öffnen funktioniert nicht

Modal öffnen funktioniert nicht

Modal öffnen funktioniert nicht

Modal öffnen funktioniert nicht

Mit PHP und cURL in Intranet einloggen

Mit PHP und cURL in Intranet einloggen

Mit PHP und cURL in Intranet einloggen

Mit PHP und cURL in Intranet einloggen

Bilder upload - nach upload direkt anzeigen ohne vorher zu speichern

jQuery Datenbankabfrage - Fehler wenn kein Eintrag

jQuery Datenbankabfrage - Fehler wenn kein Eintrag

jQuery Datenbankabfrage - Fehler wenn kein Eintrag