Ankündigung

Einklappen
Keine Ankündigung bisher.

Button click Werte für jquery abfrage!!! (

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

  • Button click Werte für jquery abfrage!!! (

    Hallo,

    ich habe viele Buttons die eine Datenbankabfrage starten.
    Code:
    <button type="button" class="btn" onclick="myfunc(1)">DE</button>
    <button type="button" class="btn" onclick="myfunc(2)">CE</button>
    <button type="button" class="btn" onclick="myfunc(3)">GE</button>
    ....
    Zur Zeit kann ich leider nur einen Button anklicken und mir werden die Passende Informationen angezeigt.
    Jetzt möchte ich so umsetzen das ich mehre Buttons anklicke und dadurch die Abfrage sich anpasst.
    Theoretisch sollen meine Buttons wie mehrere checkboxen arbeiten!

    Wenn ich also einen Button anklicke (myfunc(1)) soll der Button z.B. Rot markierte werden, Datenbankabfrage wird durchgeführt.
    Dann klicke ich einen Zweiten Button (myfunc(3)) an und der wird auch Rot markiert und die Datenbankabfrage passt sich an mit dem Werten „1, 3“ und bei nochmaligen klick das entfernen aus der Abfrage.

    Gibt es eine Möglichkeit das so umzusetzen?
    Kann ich Werte in javascript speichern (um zu merken was schon angeklickt wurde).

    Ich hoffe ihr könnt mir helfen,
    für jeden Tipp, Link, Beispiel bin ich sehr Dankbar.

    MfG c01001.
    Ob eine Sache gelingt, erfährst du nicht, wenn du darüber nachdenkst, sondern wenn du es ausprobierst.


  • #2
    Das kann man alles umsetzen, wenn man HTML, CSS, PHP und SQL kann.
    Wenn du auf der Seite bleiben willst, dann musst du noch Javascript dazu nehmen und das mit AJAX oder fetch umsetzen.
    Dein onclick ist aber veraltete Technik, heute nimmt man Eventlistener und setzt das damit um.
    Zur Zeit kann ich leider nur einen Button anklicken und mir werden die Passende Informationen angezeigt.
    Zeigst du auch den Code dazu?
    Welche Datenbank nutzt du?

    Auf https://wiki.selfhtml.org/wiki/JavaScript findest jede Menge Infos und Tutorials.

    Kommentar


    • #3
      Hallo,

      habe da leider mein Notebook nicht dabei, sonst hätte ich code gepostet!
      Ist aber nicht viel da ich gerade anfing und keine Lösung für das Problem hatte.
      Dein onclick ist aber veraltete Technik, heute nimmt man Eventlistener und setzt das damit um.
      Eventlistener werde ich anschauen.

      Welche Datenbank nutzt du?
      Mysql Datenbank und PHP.

      Auf https://wiki.selfhtml.org/wiki/JavaScript findest jede Menge Infos und Tutorials.
      Danke für den Link, kam mehrmals über google drüber

      Leider war das nicht hilfreich um die Umsetzung von mein Problem
      Ob eine Sache gelingt, erfährst du nicht, wenn du darüber nachdenkst, sondern wenn du es ausprobierst.

      Kommentar


      • #4
        Zitat von c01001 Beitrag anzeigen
        Theoretisch sollen meine Buttons wie mehrere checkboxen arbeiten!
        Warum verwendest du dann keine Checkboxes? Das ist so wie man sagt, man möchte ein Motorrad, das wie ein Auto funktioniert. Also 4 Räder und einen Kofferraum hat und 4 Personen Platz haben. Aber warum dann mühsam ein Motorrad umbauen statt ein Auto verwenden?

        Kommentar


        • #5
          Wenn ich also einen Button anklicke (myfunc(1)) soll der Button z.B. Rot markierte werden, Datenbankabfrage wird durchgeführt.
          Dann klicke ich einen Zweiten Button (myfunc(3)) an und der wird auch Rot markiert und die Datenbankabfrage passt sich an mit dem Werten „1, 3“ und bei nochmaligen klick das entfernen aus der Abfrage.
          Nutze event delagation anstatt jeden button einzeln inline was dranzuhängen.
          trenne js und html.

          zur frage, ich denke schon das sowas geht.

          Kommentar


          • #6
            Ob man jetzt Checkboxen verwendet oder einen normalen Absatz ist im Grunde egal, dank CSS ist vieles möglich. Wenn es sich um eine App handelt, würde ich den kürzesten Ressourcen sparenden Weg gehen. Ist SEO im Spiel dann Checkboxen.

            Ein kleines Beispiel:

            HTML-Code:
            <!DOCTYPE html>
            <html lang="de">
             <meta charset="utf-8">  
              <title>Button</title>
              <style>
                #myButtons{
                  max-width: 500px;
                  display:grid;
                  grid-template-columns: 1fr 1fr 1fr;
                  font-family:Calibri, sans-serif;}
                #myButtons p {
                  margin:10px;
                  padding:1em;
                  border-radius: 3px;
                  transition: 0.2s;
                  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
                  text-align: center;
                  background-color: #44f;
                  color: white;
                  cursor:pointer;}
                #myButtons p:hover {
                  box-shadow: 1px 6px 15px rgba(0,0,0,0.5);}
                #myButtons p.clicked{background-color: #f00;}
              </style>
              <div id=myButtons>
                <p>Berlin
                <p>Hamburg
                <p>München
                <p>Köln
                <p>Frankfurt
                <p>Stuttgart
                <p>Düsseldorf
                <p>Dortmund
                <p>Essen
              </div>
              <p id=msg>
            <script>
                myButtons.onclick = function(e) {
                  if (e.target.tagName=='P'){
                    if (e.target.classList.contains('clicked'))
                      msg.innerHTML=msg.innerHTML.replace(e.target.innerHTML,'')
                    else
                      msg.innerHTML+=e.target.innerHTML
                    e.target.classList.toggle('clicked')
                  }
                }
              </script>
            https://jsfiddle.net/kvzymLbr/

            Kommentar


            • #7
              Ob man jetzt Checkboxen verwendet oder einen normalen Absatz ist im Grunde egal, dank CSS ist vieles möglich. Wenn es sich um eine App handelt, würde ich den kürzesten Ressourcen sparenden Weg gehen. Ist SEO im Spiel dann Checkboxen.
              Habe auch mit Checkbox getestet.

              Genau so und der Aufbau passte auch , habe ich gesucht.
              Eigentlich Perfekt die Lösung, für mich.

              Danke, und danke an die anderen mit links und feedbacks

              MfG c01001.
              Ob eine Sache gelingt, erfährst du nicht, wenn du darüber nachdenkst, sondern wenn du es ausprobierst.

              Kommentar


              • #8
                Viele Dank.
                Done!!
                Ob eine Sache gelingt, erfährst du nicht, wenn du darüber nachdenkst, sondern wenn du es ausprobierst.

                Kommentar


                • #9
                  Zitat von c01001 Beitrag anzeigen

                  Frage geht deine Lösung auch mit


                  da ich noch "value" brauche, für even handler!
                  Hast Du schon irgendwie versucht den Code umzubauen ?
                  Wenigstens wie oben angesprochen die Ps wie checkboxes zu stylen ?

                  Kommentar


                  • #10
                    Data Attributes

                    Kommentar

                    Lädt...
                    X