Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 24
Like Tree1Likes

Thema: click(function() und replaceWith mehrmals ausführen

  1. #1
    JackPott ist offline Jungspund
    registriert
    01-04-2017
    Beiträge
    12

    click(function() und replaceWith mehrmals ausführen

    Hallo,

    ich tue mich sehr schwer mit JavaScript und probiere deswegen sehr viel mit Codeschnipseln herum. Allerdings komme ich jetzt nicht weiter.

    Code:
    $(document).ready(function(){
    
       $('#test').click(function() {
    
    $("div:first").replaceWith('
    <form id="myForm" action="test2.php"><input type="radio" name="frage" value="Frage 1">Frage 1<input type="button" id="test" Value="Get Value" /></form>
    
    ');
    
       });
    
    });
    Ich habe eine Formular, das beim Absenden durch dasselbe Formular mit anderen Fragen ersetzt werden soll, wobei die Fragen dynamisch über PHP gewechselt werden. Dies funktioniert beim ersten Klick auf "Get Value" auch sehr gut. Allerdings passiert nichts, wenn ich ein weiteres Mal darauf klicke. Da habe ich mir gedacht, dass man das mit einer Schleife und einem Zähler ändern könnte. Jedoch geht es wiederum nicht über einen Klick hinaus. Wie kann ich es also erreichen, das man viermal auf "Get Value" klicken kann und jedes Mal das Formular erzeugt wird, ohne dass ich viermal hintereinander $("div:first").replaceWith schreiben muss?
    Geändert von mikdoe (10-04-2017 um 12:17 Uhr) Grund: gelöst gesetzt

  2. #2
    paul schmitz ist offline Doppel-As
    registriert
    29-03-2015
    Beiträge
    134

    AW: click(function() und replaceWith mehrmals ausführen

    Schreibe jedes Formular per PHP in einen eigenen div. Alle ausser einen stylest du unsichtbar. Wenn jetzt der Knopf gedrückt wird, machst den aktuell sichtbaren div unsichtbar und den nächsten sichtbar. Eine Erklärung dazu findet sich in meiner nächsten Antwort.
    Geändert von paul schmitz (02-04-2017 um 10:27 Uhr) Grund: Rechtschreibfehler korrigiert.
    Rubiks!
    Wer Rechtschreibfehler findet, darf sie behalten (und wegen mir auch aufessen)

  3. #3
    JackPott ist offline Jungspund
    registriert
    01-04-2017
    Beiträge
    12

    AW: click(function() und replaceWith mehrmals ausführen

    Hallo,

    vielen Dank für deine Antwort. Leider komme ich damit alleine noch nicht weiter. Deswegen noch einmal kurz, was passieren soll:

    Nutzer erhält eine Frage mit vier Antwortmöglichkeiten präsentiert. Bei einem Klick auf eine Antwort erfolgten die Prüfung, ob die Antwort richtig ist oder nicht. Egal, ob richtig oder nicht wird die nächste Frage angezeigt, ohne dass die Seite neu geladen werden muss.

    Das, was ich bisher gemacht habe, war die Umsetzung von Vorüberlegungen und schlichtes Ausprobieren.

    Gedacht hatte ich mir das so:

    1. Frage und Antworten befinden sich in einer Datenbank
    2. 10 Fragen werden zufällig mit PHP herausgezogen und in einem mehrdimensionalen Array bereitgestellt.
    3. Erste Frage wird dem Nutzer gezeigt
    4. bei Klick auf die Antwort erfolgt die Prüfung
    5. Nutzer wird die zweite Frage gezeigt usw.

    Alle Fragen + Antwort per Schleife als div auszugeben wäre für kein Problem, auch nicht das erste sichtbar und alle anderen unsichtbar zu machen. Jedoch weiß ich nicht, wie ich da jetzt mit Javascript weiterkomme.

    Mit replaceWith war ich schon so weit gekommen, dass ich theoretisch alle 10 Fragen anzeigen, prüfen und wieder verschwinden lassen kann. Jedoch müsste ich dann zehn Mal Folgendes schreiben:

    Code:
    $("div:first").replaceWith(' <form id="myForm" action="test2.php"><input type="radio" name="frage" value="Frage 1">Frage 1<input type="button" id="test" Value="Get Value" /></form> ');
    Und dies wollte ich verhindern.

    Ich hoffe, du verstehst mein Anliegen.

  4. #4
    paul schmitz ist offline Doppel-As
    registriert
    29-03-2015
    Beiträge
    134

    AW: click(function() und replaceWith mehrmals ausführen

    Ich dachte mir das so:
    Code:
    <div id="formular1">
      <form id="myForm" action="test2.php"><input type="radio" name="frage" value="Frage 1">Frage 1<input type="button" id="test" Value="Get Value" onclick="weiter();"/></form>
    </div>
    <div id="formular2">
      <!-- hier das zweite Formular einfügen -->
    </div>
    <!-- u.s.w. bis 10 -->
    <script>
    var aktuellesFormular=0;
    function weiter(){
      document.getElementById(aktuellesFormular++).style.display="none";
      document.getElementById(aktuellesFormular).style.display="block";
    }
    weiter();
    </script>
    <style>
    div {
      display:none;
    }
    </style>
    Du kannst aber natürlich die Fragen automatisch in Formulare umwandeln lassen:
    Code:
    <script>
    function optionsToForm(options){
      var html= "<form>",i;
      for(i=0;i<options.length;++i){
        html+="<input type='radio' name='frage' value='"+options[i]+"'/>"+options[i];
      }
      return html+"<input type='button' id='test' value='Get value'/></form>";
    }
    optionsToForm(["Frage 1","Frage 2","Frage 3"]); //Aufrufbeispiel
    </script>
    Wenn du dann die Fragen in PHP in einem 2dimensionalem Array nach JS gibst, kannst du die Funktion in weiter aufrufen:
    Code:
    <script>
    var fragen=[["Frage 1.1","Frage 1.2"],["Frage 2.1","Frage 2.2","Frage 2.3"],["Frage 3.1"]]]; //Von PHP generiert
    function weiter(){
      //Hier deine Prüfung einbauen
      document.getElementById(aktuellesFormular++).style.display="none";
      document.getElementById(aktuellesFormular).style.display="block";
      document.getElementById(aktuellesFormular).innerHTML=optionsToForm(fragen[aktuellesFormular]);
    }</script>
    Mit diesem Ansatz ist ein "zurück"-Knopf ebenfalls möglich:
    Code:
    <script>
    function zurueck(){
      document.getElementById(aktuellesFormular--).style.display="none";
      weiter(aktuellesFormular--);
    }
    </script>
    Geändert von paul schmitz (02-04-2017 um 10:29 Uhr) Grund: } mit ] vertauscht; ein "n" vergessen
    Rubiks!
    Wer Rechtschreibfehler findet, darf sie behalten (und wegen mir auch aufessen)

  5. #5
    JackPott ist offline Jungspund
    registriert
    01-04-2017
    Beiträge
    12

    AW: click(function() und replaceWith mehrmals ausführen

    Danke für die Rückmeldung. Sollte dein erstes Beispiel mit dem Verstecken bereits funktionieren oder fehlt da noch etwas? Denn so wird mir derzeit wegen display:none; gar nichts angezeigt.
    paul schmitz likes this.

  6. #6
    paul schmitz ist offline Doppel-As
    registriert
    29-03-2015
    Beiträge
    134

    AW: click(function() und replaceWith mehrmals ausführen

    So sollte es funktionieren. Der Grund war, dass die ID der Formulare noch "formular" davor hat, das aber nicht mit ausgewählt wurde. Die gleiche Änderung muss im dritten Code noch gemacht werden.
    Das display:none wird von dem durch JS gesetzten Inline-Style immer an der richtigen Stelle aufgehoben.
    Code:
    <div id="formular1">
      <form id="myForm" action="test2.php"><input type="radio" name="frage" value="Frage 1">Frage 1<input type="button" id="test" Value="Get Value" onclick="weiter();"/></form>
    </div>
    <div id="formular2">
      <!-- hier das zweite Formular einfügen -->
    </div>
    <!-- u.s.w. Es muss ! je ein div von formular0 bis formular10 vorhanden sein -->
    <script>
    var aktuellesFormular=0;
    function weiter(){
      document.getElementById("formular"+aktuellesFormular).style.display="none";
      aktuellesFormular++;
      document.getElementById("formular"+aktuellesFormular).style.display="block";
    }
    weiter();
    </script>
    <style>
    div {
      display:none;
    }
    </style>
    Code:
    <script>
    var fragen=[["Frage 1.1","Frage 1.2"],["Frage 2.1","Frage 2.2","Frage 2.3"],["Frage 3.1"]]]; //Von PHP generiert
    function weiter(){
      //Hier deine Prüfung einbauen
      document.getElementById("formular"+aktuellesFormular).style.display="none";
      aktuellesFormular++;
      document.getElementById("formular"+aktuellesFormular).style.display="block";
      document.getElementById("formular"+aktuellesFormular).innerHTML=optionsToForm(fragen[aktuellesFormular]);
    }
    </script>
    Geändert von paul schmitz (02-04-2017 um 14:09 Uhr) Grund: Hinweis eingearbeitet
    Rubiks!
    Wer Rechtschreibfehler findet, darf sie behalten (und wegen mir auch aufessen)

  7. #7
    JackPott ist offline Jungspund
    registriert
    01-04-2017
    Beiträge
    12

    AW: click(function() und replaceWith mehrmals ausführen

    Hm, auch so zeigt er mir nichts an.

  8. #8
    paul schmitz ist offline Doppel-As
    registriert
    29-03-2015
    Beiträge
    134

    AW: click(function() und replaceWith mehrmals ausführen

    Ich habe mich etwas undeutlich ausgedrückt. Du musst (!) die divs mit den IDs 0-10 erstellen. Ich habe den Kommentar in meinem Beitrag noch mal etwas deutlicher gemacht.
    Zur Deutlichkeit: Die divs müssen so aussehen:
    Code:
    <div id="formular0"></div>
    <div id="formular1"><form id="myForm" action="test2.php"><input type="radio" name="frage" value="Frage 1">Frage 1<input type="button" id="test" Value="Get Value" onclick="weiter();"/></form>
    </div>
    <div id="formular2">Form2</div>
    <div id="formular3">Form3</div>
    <div id="formular4">Form4</div>
    <div id="formular5">Form5</div>
    <div id="formular6">Form6</div>
    <div id="formular7">Form7</div>
    <div id="formular8">Form8</div>
    <div id="formular9">Form9</div>
    <div id="formular10">Form10</div>
    <script>
    var aktuellesFormular=0;
    function weiter(){
      document.getElementById("formular"+aktuellesFormular).style.display="none";
      aktuellesFormular++;
      document.getElementById("formular"+aktuellesFormular).style.display="block";
    }
    weiter();
    </script>
    <style>
    div {
      display:none;
    }
    </style>
    Rubiks!
    Wer Rechtschreibfehler findet, darf sie behalten (und wegen mir auch aufessen)

  9. #9
    JackPott ist offline Jungspund
    registriert
    01-04-2017
    Beiträge
    12

    AW: click(function() und replaceWith mehrmals ausführen

    Hallo Paul,

    vielen Dank, jetzt klappt es sehr schön und funktioniert toll. Jedoch stoße ich schon bei den kleinsten Dingen auf die nächsten Probleme, weil das, was vorher funktionierte (var selValue = $('input[name=antwort]:checked').val(), jetzt nicht mehr funktioniert. Sehr frustrierend. Wenn ich das weitermachen wollen würden, müsste ich die ganze Zeit fragen, wie das geht. Da ich dir/euch damit nicht auf die Nerven fallen möchte, werde ich es wohl einfach mit PHP realisieren. Da fühle ich mich deutlich sicherer und habe das Quiz in kurzer Zeit realisiert. Dann muss ich den Umstand, dass er die Seite nach jeder Frage neu lädt, wohl einfach hinnehmen. Trotzdem danke ich dir für deine Mühe. :-)

  10. #10
    paul schmitz ist offline Doppel-As
    registriert
    29-03-2015
    Beiträge
    134

    AW: click(function() und replaceWith mehrmals ausführen

    Da ich dir/euch damit nicht auf die Nerven fallen möchte
    Das Forum ist genau dazu da, die nervigen und schwierigeren Fragen zu lösen. Du nervst hier nicht, solange du Interesse an einer Lösung hast und Eigeneinsatz zeigst..

    weil das, was vorher funktionierte [...], jetzt nicht mehr funktioniert
    Das passiert nun mal, wenn man mal eben so die ganze Struktur ändert.

    Dann muss ich den Umstand, dass er die Seite nach jeder Frage neu lädt, wohl einfach hinnehmen.
    Das musst du nicht, du könntest es mit JS machen, und bei Fragen hier im Forum unterstützt werden. Du würdest zumindest einiges dabei Lernen.

    Letztendlich ist es aber deine Entscheidung, die du treffen kannst, wie du willst.
    Rubiks!
    Wer Rechtschreibfehler findet, darf sie behalten (und wegen mir auch aufessen)

  11. #11
    JackPott ist offline Jungspund
    registriert
    01-04-2017
    Beiträge
    12

    AW: click(function() und replaceWith mehrmals ausführen

    Hallo,

    ich habe mich gestern noch einmal daran gewagt und es auch so weit geschafft, dass alle Fragen abgerufen werden und ich richtig/falsch zählen kann. Allerdings setze ich dafür aber wieder replaceWith ein und habe eine sehr umständliche Form, aber das ist mir jetzt egal, da alles über Umwege läuft. ;-)

    Als nächstes (so war mein Plan) wollte ich den submit-Button wegfallen lassen, sodass bei klick auf die Antworten ein Absenden stattfindet. Über PHP habe ich wieder eine Lösung, jedoch scheitert es wieder am Javascript. ;-) Vielleicht darf ich deine Hilfe noch einmal beanspruchen?

    HTML:

    HTML-Code:
        <form action="validate.php" method="post">
              <input type="submit" name="submit" value="1"><br>
              <input type="submit" name="submit" value="2"><br>
              <input type="submit" name="submit" value="3"><br>
              <input type="submit" name="submit" value="4"><br>
              <input type="hidden" name="richtig" value="2">
        </form>
    Das Formular wird abgefangen mit:

    HTML-Code:
    $("form").submit(function(event) {
        // Das eigentliche Absenden verhindern
        event.preventDefault();
    
        // Das sendende Formular und die Metadaten bestimmen
        var form = $(this);
        var action = form.attr("action"), 
            method = form.attr("method"),
            data   = form.serialize();
    
        // Der eigentliche AJAX Aufruf
        $.ajax({
            url : action,
            type : method,
            data : data
        }).done(function (data) {
            //ausführender Code, falls abgesendet
                });
        });
    Frage ich in validate.php nach der gesendeten Variable kann ich das beispielsweise so machen:

    PHP-Code:
    <?php
    $bla 
    $_POST["submit"];
    echo 
    $bla;
    ?>
    In der validate.php wird dann auch der korrekte Wert (entweder 1, 2, 3 oder 4) angezeigt. Schreibe ich bei //ausführender Code, falls abgesendet dann alert('Ergebnis: ' + data); wird mir der Fehler Ergebnis: undefined index submit angezeigt.

  12. #12
    paul schmitz ist offline Doppel-As
    registriert
    29-03-2015
    Beiträge
    134

    AW: click(function() und replaceWith mehrmals ausführen

    Gib mal die per form.serialize() erzeugten daten aus. Darin steht: "richtig=2". Also nix von submit.
    Dann gibst du in PHP aber submit aus. Das gibt es nicht, daher wird eine Fehlermeldung erzeugt und zurückgegeben.

    Hier meine funktionierende Lösung:
    Code:
    <script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
    <form action="validate.php" method="post">
              <input type="submit" name="submit1" value="1"><br> <!-- Jedes Feld hat den übergebenen Wert im name-Attribut -->
              <input type="submit" name="submit2" value="2"><br>
              <input type="submit" name="submit3" value="3"><br>
              <input type="submit" name="submit4" value="4"><br>
              <input type="hidden" name="richtig" value="2">
        </form><script>
    $("form").submit(function(event) {
        // Das eigentliche Absenden verhindern
        event.preventDefault();
    
        // Das sendende Formular und die Metadaten bestimmen
        var form = $(this);
        var action = form.attr("action"),
            method = form.attr("method"),
            data   = {submit:event.originalEvent.explicitOriginalTarget.attributes.name.value}; // Das name-Attribut des geklickten Elements als submit-Daten übergeben
    
        // Der eigentliche AJAX Aufruf
        $.ajax({
            url : action,
            type : method,
            data : data
        }).done(function (data) {
            alert(data); // Die Daten ausgeben
        });
      });
    </script>
    Ausgegeben wird "submitN", wobei N eine Zahl ist, und zwar die des angeklickten Elements.
    Rubiks!
    Wer Rechtschreibfehler findet, darf sie behalten (und wegen mir auch aufessen)

  13. #13
    JackPott ist offline Jungspund
    registriert
    01-04-2017
    Beiträge
    12

    AW: click(function() und replaceWith mehrmals ausführen

    Super, das funktioniert! Vielen Dank!

    - - - Aktualisiert - - -

    So, die nächste Frage, bei der ich nicht weiterkomme, steht ins Haus.

    Bei

    Code:
    }).done(function (data) {
            alert(data); // Die Daten ausgeben
        });
    verzögere ich jetzt die Ausgabe der nächsten Frage mit setTimeout. Funktioniert auch gut.

    Optisch hatte ich mir jetzt vorgestellt, dass beim Überfahren der Buttons (=Antworten) mit der Maus sich die Farbe ändert (funktioniert durch CSS prima) und dass die angeklickte Antwort entweder grün für richtig oder rot für falsch so lange leuchtet, bis setTimeout vorüber ist und die nächste Frage kommt.

    Dazu hatte ich überlegt, nach der Abfrage (nur sinngemäß!) if(geklickte Antwort = Lösung) Folgendes zu schreiben:

    Code:
    $( "button" ).focus(function() {
      $( this ).css( "background-color", "green" );
    });
    
    else 
    
    $( "button" ).focus(function() {
      $( this ).css( "background-color", "red" );
    });
    Allerdings verändert er den Hintergrund des angeklickten Buttons selbst dann nicht, wenn ich die if-Bedingung weglasse und mich auf eine Farbe beschränke. Hast du eine Ahnung, woran das liegt?.

  14. #14
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.546

    AW: click(function() und replaceWith mehrmals ausführen

    Zitat Zitat von paul schmitz Beitrag anzeigen
    Jedes Feld hat den übergebenen Wert im name-Attribut
    Warum? Ich würde das orginal-HTML behalten und dafür
    Code:
    var data = {
    	submit: event.originalEvent.explicitOriginalTarget.value,
    	hidden: this.hidden.value
    };
    machen. Dann ist die JS-Kommunikations identisch zur nativen.

    Zitat Zitat von JackPott Beitrag anzeigen
    Hast du eine Ahnung, woran das liegt?.
    Du hast im HTML ja auch kein <button>...

  15. #15
    JackPott ist offline Jungspund
    registriert
    01-04-2017
    Beiträge
    12

    AW: click(function() und replaceWith mehrmals ausführen

    Zitat Zitat von kkapsner Beitrag anzeigen
    Du hast im HTML ja auch kein <button>...
    Hatte ich vergessen, zu erwähnen. Ich hatte von input auf button erfolgreich umgestellt. Schöne Grüße

    Sieht jetzt so aus:

    HTML-Code:
        <form action="validate.php" method="post">
              <h1 id="frage">Frage
              <hr />
              <button type="submit" name="submit1"><h2>Antwort 1</button><br>
              <button type="submit" name="submit2"><h2>Antwort 2</h2></button><br>
              <button type="submit" name="submit3"><h2>Antwort 3</h2></button><br>
              <button type="submit" name="submit4"><h2>Antwort 4</h2></button><br>
              <input type="hidden" name="richtig" value="submit2">
    
        </form>
    Ich hatte ja vermutet, dass irgendwo wieder ein Semikolon oder ein Schluss-Tag fehlt, aber ohne o.g. Code zum Färben funktioniert alles, wie es soll. Zur Sicherheit aber auch noch das JavaScript:

    Code:
    // 2. Aufruf
    $("form").submit(function(event) {
    
        // Das eigentliche Absenden verhindern
        event.preventDefault();
    
        // Das sendende Formular und die Metadaten bestimmen
        var form = $(this); // Dieser Zeiger $(this) oder $("form"), falls die ID form im HTML exisitiert, klappt übrigens auch ohne jQuery ;)
        var action = form.attr("action"), // attr() kann enweder den aktuellen Inhalt des gennanten Attributs auslesen, oder setzt ein neuen Wert, falls ein zweiter Parameter gegeben ist
            method = form.attr("method"),
            data   = {submit:event.originalEvent.explicitOriginalTarget.attributes.name.value};
    
        // Der eigentliche AJAX Aufruf
        $.ajax({
            url : action,
            type : method,
            data : data
        }).done(function (data) {
            var riAntwort = $('input[type="hidden"]').val();
            if(data == riAntwort) { iRichtig++; }
            else { iFalsch++; }
            
            i++;
            prozent = iRichtig * 100 / i;
            if(prozent >= note1) note = 1
            else if(prozent >= note2) note = 2
            else if(prozent >= note3) note = 3
            else if(prozent >= note4) note = 4
            else if(prozent >= note5) note = 5
            else note = 6;
    
            setTimeout(function(){ document.getElementById("statistik_richtig").innerHTML = iRichtig; }, 3000);
            setTimeout(function(){ document.getElementById("statistik_falsch").innerHTML = iFalsch; }, 3000);
            setTimeout(function(){ document.getElementById("statistik_gesamt").innerHTML = i; }, 3000);
            setTimeout(function(){ document.getElementById("statistik_note").innerHTML = note; }, 3000);
            setTimeout(function(){ $("form").replaceWith('neues Formular siehe oben'); }, 3000);
      });
        });
    Jetzt, wo ich das gerade sehe, fällt mir auf, dass ich wohl bloß ein einziges Mal setTimeout benötigen würde - aber das ist nicht das Problem.
    Geändert von JackPott (11-04-2017 um 07:54 Uhr)

Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. Antworten: 3
    Letzter Beitrag: 07-09-2015, 17:36
  2. Funktion mehrmals ausführen
    Von Taeli im Forum JavaScript
    Antworten: 12
    Letzter Beitrag: 14-07-2011, 15:11
  3. Ein JS mehrmals in Schleife ausführen
    Von COP im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 04-11-2008, 11:43
  4. function mehrmals ausführen
    Von Piti im Forum JavaScript
    Antworten: 7
    Letzter Beitrag: 07-04-2008, 13:34
  5. Countdown mehrmals ausführen
    Von Hatico im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 29-02-2008, 22:29

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •