Bernd: URL erweitern bei Klick auf Chekbox

Hallo,

ist es möglich wenn ich auf eine Checkbox klicke, dass ich dann einen Wert an eine URL hänge?

<label>
  <input type="checkbox" name="drucken" value="Nein, Hinweis nicht drucken">
</label>

Jetzt habe ich im HTML eine URL zum drucken

<a href="drucken.php?code=35d014df8846cdb9a260c10494941ed5" target="_blank">Datenblatt drucken</a>

Wenn jetzt oben die Checkbox geklickt wurde, soll sich der Link im HTMl wie folgt ändern

<a href="drucken.php?code=35d014df8846cdb9a260c10494941ed5&hinweis=1" target="_blank">Datenblatt drucken</a>

Ist dieses möglich? Ach, wenn ich die Checkbox wieder weg klicke, dann soll der Wert wieder verschwinden.

  1. Hi,

    ist es möglich wenn ich auf eine Checkbox klicke, dass ich dann einen Wert an eine URL hänge?

    im Prinzip ja. Es ist nur eine Frage der Mittel.

    <label>
      <input type="checkbox" name="drucken" value="Nein, Hinweis nicht drucken">
    </label>
    

    Jetzt habe ich im HTML eine URL zum drucken

    <a href="drucken.php?code=35d014df8846cdb9a260c10494941ed5" target="_blank">Datenblatt drucken</a>
    

    Wenn jetzt oben die Checkbox geklickt wurde, soll sich der Link im HTMl wie folgt ändern

    <a href="drucken.php?code=35d014df8846cdb9a260c10494941ed5&hinweis=1" target="_blank">Datenblatt drucken</a>
    

    Ist dieses möglich?

    Mit HTML allein nicht. Aber mit Javascript natürlich schon. Die nötigen Ingredienzen wären wohl der onclick-Handler des Checkbox-Objekts sowie dessen checked-Eigenschaft.

    Ach, wenn ich die Checkbox wieder weg klicke, dann soll der Wert wieder verschwinden.

    Auch das wäre dann leicht möglich.

    Ciao,
     Martin

    --
    Ein Tag, an dem du nicht wenigstens einmal gelacht hast, ist ein verlorener Tag.
  2. Lieber Bernd,

    einen Wert an eine URL anhängen bedeutet die Seite zu verlassen, um zu einer neuen Seite (mit fast der selben Adresse) zu gelangen. Ich habe den Verdacht, dass Du das nicht willst, daher Deine Tags mit JavaScript/jQuery.

    Es ist üblich, Formulare mit entsprechenden Eingabefeldern wie eben auch Checkboxen abzuschicken, die dann zu einer Ergebnisseite führen, deren Adresse durchaus den selben Pfad haben darf (wie in Deinem Vorschlag oben). Das geht rein mit HTML.

    Wenn es Dir nur darum geht, dass Du Bereiche für einen Ausdruck (un)sichtbar machen willst, sollte es mit JavaScript genügen, die entsprechenden Elemente mit einem entsprechenden hidden-Attribut zu versehen, oder dieses zu entfernen. Man kann auch einen entsprechend eingerichteten Klassennamen verwenden, um das Gleiche zu erreichen.

    Wenn Du unbedingt URL-Parameter benötigst, dann verwende ein richtiges HTML-Formular und binde die entsprechenden Druckinhalte serverseitig ein. Ja, man könnte das durchaus mit JavaScript anreichern, um dem Anwender das Neuladen zu ersparen, aber wozu dann noch die URL-Parameter?

    Liebe Grüße

    Felix Riesterer

    1. Hallo Felix,

      Problem ist das _target="blank", d.h. die Druckausgabe wird in einem neuen Fenster geöffnet. Und je nach Checkbox wird ein Hinweis dargestellt oder nicht.

      Mein Vorschlag wäre ein Form mit method="get", das den Status der Checkbox automatisch in die action inkludiert. Da kann man target="_blank" ebenfalls angeben. Den Code muss man allerdings über ein hidden field einsteuern (zumindest hat es bei mir nicht geklappt, ihn in der action aufzuschreiben; bei Submit ging er verloren).

      <form id="datenblatt" method="get" action="http://localhost/drucken.php" target="_blank">
      <input type="hidden" name="code" value="35d014df8846cdb9a260c10494941ed5">
        <label>
        <input type="checkbox" name="hinweis" value="1"> Nein, Hinweis nicht drucken
        </label>
        <br>
        <button type="submit">Datenblatt drucken</button>
      </form>
      

      Ob man dem Button jetzt noch irgendwie mit aria eine andere Semantik verpassen muss, weiß ich nicht. Jedenfalls kann man ihn mit CSS so stylen, dass er einem Link ähnelt:

      #datenblatt button {
        margin-top: 1em;
        border: none;
        background-color: transparent;
        font: inherit;
        cursor: pointer;
        color: blue;
        text-decoration: underline;
      }
      

      Rolf

      --
      sumpsi - posui - clusi
      1. Hallo,

        bei einer form würde die Seite direkt neu geladen bzw. man kommt auf die Drucke Seite, was möchte ich zu diesem Zeitpunkt noch nicht. Deshalb möchte ich nur die URL an einer bestimmten Stelle ändern.

        1. Tach!

          bei einer form würde die Seite direkt neu geladen bzw. man kommt auf die Drucke Seite, was möchte ich zu diesem Zeitpunkt noch nicht. Deshalb möchte ich nur die URL an einer bestimmten Stelle ändern.

          Der link muss erst beim Absenden korrekt sein. Wozu soll er denn bereits vorher fertig sein? Also sollte ein Formular, das zum Zeitpunkt des Abschickens die Ziel-URL des Requests zusammensetzt, genau das tun, was du brauchst. Das Formular wird schließlich nicht schon beim Ändern der Checkbox gesendet, sondern erst wenn der Submit-Button betätigt wird. Letzteren kann man auch wie einen Link stylen, wenn das gewünscht ist.

          dedlfix.

          1. Warum kann es nicht einfach so hingenommen werden dass ich zu diesem Zeitpunkt wo der Haken gesetzt wird die Seite nicht abschicken möchte? Es geht mir nur darum eine URL zu ändern. Nicht mehr und nicht weniger.

            Es hat seine Gründe warum ich es genau so benötige.

            1. Tach!

              Warum kann es nicht einfach so hingenommen werden dass ich zu diesem Zeitpunkt wo der Haken gesetzt wird die Seite nicht abschicken möchte? Es geht mir nur darum eine URL zu ändern. Nicht mehr und nicht weniger.

              Das passiert doch gar nicht. Der Haken macht noch nichts. Erst beim Abschicken geschieht das ganz normale Form-Verhalten (bei method="GET"), dass die Formularwerte zu genau der URL zusammengebaut werden, die du eigentlich für das a haben möchtest. Du brauchst aber kein a mit magischem Javascript, weil ein Formular das gewünschte Verhalten von Haus aus mitbringt.

              Es hat seine Gründe warum ich es genau so benötige.

              Ich sehe hier ein XY-Problem. Du glaubst, die Lösung sei Y und sucht dafür die Vorgehensweise. Tatsächlich ist jedoch X die Lösung für das eigentliche Problem.

              Oder gibt es einen besonderen Grund, warum die URL im href vom a stehen muss? Du suchst doch, dass erst die Checkbox angehakt wird oder auch nicht, und später jemand den Link anklickt, so dass es einen Request gibt. Genauso funktioniert das beim Formular auch. Erst hakt jemand die Checkbox an oder auch nicht, dann klickt er irgendwann auf Submit und der Request geht auf die Reise.

              dedlfix.

              1. Moin Das Problem ist ich habe auf dieser Seite um die es geht schon diverse Formulare für Erinnerungen, Dokumente, Notizen und Fahrzeug. Wenn ich jetzt nach deinem /euren Vorschlag gehe noch ein Formular mit auf die Seite packen. Außerdem ist der Haken für den Hinweis ziemlich weit unten und der Link befindet sich direkt am Seitenanfang, der dort auch bleiben soll. Wenn ich es jetzt über das Formular machen müsste, dann müsste ich ständig auch wenn ich die Option nicht möchte nach unten scrollen um zu drucken, was ich sehr mühsam finde.

                1. Hallo,

                  eins vorweg: Eine so lange Textwurst ohne Struktur ist schlecht zu lesen. Mach es uns doch bitte etwas einfacher - ein Absatz hier und da hilft schon viel.

                  Das Problem ist ich habe auf dieser Seite um die es geht schon diverse Formulare für Erinnerungen, Dokumente, Notizen und Fahrzeug.

                  Ja ... und?

                  Wenn ich jetzt nach deinem /euren Vorschlag gehe noch ein Formular mit auf die Seite packen.

                  ... dann was?

                  Außerdem ist der Haken für den Hinweis ziemlich weit unten und der Link befindet sich direkt am Seitenanfang, der dort auch bleiben soll. Wenn ich es jetzt über das Formular machen müsste, dann müsste ich ständig auch wenn ich die Option nicht möchte nach unten scrollen um zu drucken, was ich sehr mühsam finde.

                  Ja, sehe ich ein. Aber ob Formular oder Javascript-Einsatz - die weit auseinanderliegende Plazierung dieser beiden Elemente ändert sich doch dadurch nicht. Oder anders gefragt: Wenn der fragliche Link ziemlich am Seitenanfang ist, warum ist der Haken nicht in der Nähe?

                  Ciao,
                   Martin

                  --
                  Ein Kreis ist ein rundes Quadrat.
                  1. Hallo,

                    Ja, sehe ich ein. Aber ob Formular oder Javascript-Einsatz - die weit auseinanderliegende Plazierung dieser beiden Elemente ändert sich doch dadurch nicht. Oder anders gefragt: Wenn der fragliche Link ziemlich am Seitenanfang ist, warum ist der Haken nicht in der Nähe?

                    weil der Hinweistext an einer Stelle sein muss wo er sinnvoll ist. Der Haken könnte ich natürlich ganz nach oben setzten aber dann wird der Text unten vielleicht nicht gelesen und schon passieren wieder Fehler die nicht sein müssen.

                    Wenn der Link so wie er jetzt ist oben bleibt kann ich diesen anklicken und der Hinweistext wird gedruckt, wie es zu 95% auch der Fall ist. Wenn ich sage ich benötige den Text nicht, dann scrolle ich nach unten, setze den Haken, scrolle wieder nach oben und klicke wie gewohnt auf den Link.

                    1. Lieber Bernd,

                      weil der Hinweistext an einer Stelle sein muss wo er sinnvoll ist. Der Haken könnte ich natürlich ganz nach oben setzten aber dann wird der Text unten vielleicht nicht gelesen und schon passieren wieder Fehler die nicht sein müssen.

                      das klingt für mich nach einer noch größeren Baustelle. Schade, dass Du uns fragliche Seite nicht als codepen- oder jsFiddle-Beispiel präsentiert. Das würde viel Herumgerede ersparen und die wirklichen Probleme sofort aufzeigen.

                      Wenn der Link so wie er jetzt ist oben bleibt kann ich diesen anklicken und der Hinweistext wird gedruckt, wie es zu 95% auch der Fall ist.

                      Also ist die Checkbox vorausgewählt. So weit so gut.

                      Wenn ich sage ich benötige den Text nicht, dann scrolle ich nach unten, setze den Haken, scrolle wieder nach oben und klicke wie gewohnt auf den Link.

                      Das ist jetzt nicht Dein Ernst!? Warum gibt es unten keine zweite Möglichkeit zum PDF zu gelangen? Ein Formular kann übrigens mehrere Submit-Buttons haben. Und ich habe mir sagen lassen, dass diese mittels eines passenden form-Attributs sich auch nicht mehr innerhalb ihres <form>...</form> befinden müssen.

                      Liebe Grüße

                      Felix Riesterer

                2. Tach!

                  Das Problem ist ich habe auf dieser Seite um die es geht schon diverse Formulare für Erinnerungen, Dokumente, Notizen und Fahrzeug. Wenn ich jetzt nach deinem /euren Vorschlag gehe noch ein Formular mit auf die Seite packen.

                  Was dann? Verschachtelt es die Formulare? Das ginge natürlich nicht, aber wenn es so wäre, warum ist die Checkbox dann bereits Teil eines Formulars, zu dem sie nicht gehört? Oder doch?

                  Außerdem ist der Haken für den Hinweis ziemlich weit unten und der Link befindet sich direkt am Seitenanfang, der dort auch bleiben soll.

                  Hört sich unintuitiv an.

                  Wenn ich es jetzt über das Formular machen müsste, dann müsste ich ständig auch wenn ich die Option nicht möchte nach unten scrollen um zu drucken, was ich sehr mühsam finde.

                  Nehmen wir mal an, das sei so sinnvoll, wie du das grad hast. Wenn die Checkbox nicht bereits Bestandteil eines Formulars ist, dann wäre eine Möglichkeit, das Formular um die Checkbox zu bauen, und der Link oben ruft submit() vom Formular auf. In dem Fall wäre das aber semantisch kein Link mehr sondern ein Button.

                  Andererseits kann man die Aufgabe auch so erledigen, wie du sie bisher vorhast. Man muss sie in entsprechende Teilaufgaben zerlegen, so wie man das mit jeder mehr oder weniger komplexen Aufgabe macht. Zuerst das Ändern der Checkbox erkennen. Dann das a-Element suchen, dann dessen href-Attribut manipulieren. Wenn checkbox-Wert enthalten, dann entfernen, sonst anhängen. Die Frage wäre dann aber, was genau ist das Problem, an dem du hängst?

                  dedlfix.

                  1. Tach!

                    Nehmen wir mal an, das sei so sinnvoll, wie du das grad hast. Wenn die Checkbox nicht bereits Bestandteil eines Formulars ist, dann wäre eine Möglichkeit, das Formular um die Checkbox zu bauen, und der Link oben ruft submit() vom Formular auf. In dem Fall wäre das aber semantisch kein Link mehr sondern ein Button.

                    Achja, da gibts ja so neumodisches Zeug in HTML, das der Felix grad angesprochen hat. Javascript braucht es hier auch nicht, wenn man das form-Attribut vom Button nimmt. Allerdings können die alten IEs damit nicht umgehen.

                    dedlfix.

    2. n'abend Felix,

      einen Wert an eine URL anhängen bedeutet die Seite zu verlassen, um zu einer neuen Seite (mit fast der selben Adresse) zu gelangen.

      könnte sein, dass Bernd auch das meinte - sein Code-Beispiel ließ mich aber eher vermuten, dass er nur das href-Attribut eines Links auf der Seite verändern möchte.

      Ciao,
       Martin

      --
      Ein Tag, an dem du nicht wenigstens einmal gelacht hast, ist ein verlorener Tag.
      1. Hallo,

        könnte sein, dass Bernd auch das meinte - sein Code-Beispiel ließ mich aber eher vermuten, dass er nur das href-Attribut eines Links auf der Seite verändern möchte.

        genau, ich möchte mit der Checkbox nur ein Wert für einen Link ändern, der dann weiter zu einer anderen Seite führt wo eine Druck-PDF Datei zusammen gestellt wird, mit ausblenden komme ich da nicht weiter, eine Daten hat im kleinsten Fall 500 MB im schlimmsten Fall 800 MB. Über die Parameter die am Link hängen kann ich vorab schon filtern was ich benötige und was nicht.

    3. Hallo,

      ich möchte die Seite aber erst einmal nicht abschicken, ich möchte nur eine URL ändern also Parameter hinzufügen oder wieder zu entfernen. Ein Formular geht nicht bzw. ist unschön denn da würde die Seite neu geladen was ich nicht möchte.

      1. Lieber Bernd,

        ich möchte die Seite aber erst einmal nicht abschicken, ich möchte nur eine URL ändern also Parameter hinzufügen oder wieder zu entfernen.

        also der Klassiker, ein Formular mit GET-Methode. Wird der Submit-Button betätigt, geht es zur Zielseite mit den gewählten Parametern. Wie dedlfix schon schrubte.

        Ein Formular geht nicht

        Soso...

        bzw. ist unschön denn da würde die Seite neu geladen was ich nicht möchte.

        Du willst eine PDF-Datei erstellen lassen, in Abhängigkeit von URL-Parametern. Wenn das mal nicht der Klassiker für den Einsatz eines Formulars ist!

        <form action="drucken.php?code=35d014df8846cdb9a260c10494941ed5" method="get">
          <ul>
            <li>
              <label>
                <input name="hinweis" value="1" type="checkbox">
                Hinweis anzeigen
              </label>
            </li>
            <li>
              <button>Datenblatt drucken (PDF erstellen)</button>
            </li>
          </ul>
        </form>
        

        Probier's doch mal aus. Dann wirst Du sehen, dass ein Formular die Sache sogar vereinfacht. Außerdem kannst Du so noch beliebige weitere Parameter für Dein PDF festlegen und bequem einstellen, bevor der Download angestoßen wird.

        Liebe Grüße

        Felix Riesterer

  3. Hallo,

    ich bin bis jetzt mit allen Vorschlägen irgendwie nicht zufrieden. Daher noch eine andere Idee. Es wird auf diesen Link geklickt

    <a href="drucken.php?code=35d014df8846cdb9a260c10494941ed5" target="_blank">Datenblatt drucken</a>
    

    Dann geht ein PopUp auf wo gefragt wird, soll mit oder ohne Hinweis gedruckt werden. Dann könnte ich den Wert über ein Formular abschicken? Ich müsste zudem nicht nach unten scrollen und könnten am Kopf der Seite bleiben.

    Was sagt ihr zu dieser Idee?

    1. Meine Idee: Ein Link zur PDF mit Hinweis, ein anderer Link zur PDF ohne Hinweis. So kann man das auswählen und auch gegenüberstellen. Oder beides zusammen in einer PDF.

      Und mach das nicht zu kompliziert 😉

      PS: Und bloß keine Popups!

      1. PS: Und bloß keine Popups!

        Ich finde Popups haben immer etwas interaktives 😉