Übergabe von Values aus Formular

  • Guten Morgen alle zusammen.
    Nach längerem rum probieren versuche ich es nun auf diesem Wege. Vielleicht kann mir ja einer Helfen.

    Folgendes Problem:
    Ich möchte über ein Formular (nur Checkboxen) einen Link Zusammensetzen. Beispiel: http://www.example.de/checkbox1+checkbox2+checkbox3
    Jedoch sollen die Links nur eingetragen werden, wenn die Checkbox auch "gecheckt" ist.
    Ich habe es mit einer if Bedingung versucht, jedoch folgt daraus ein Fehler. Wenn ich nur checkbox 2 auswähle wird es nicht übergeben. Damit ich checkbox 2 auswählen kann muss checkbox 1 auch ausgewählt sein.

    Hier ist mein Code, vielleicht wird dadurch mein Problem deutlicher.

    Hoffentlich konnte ich mein Problem richtig erklären und jemand kann mir helfen.

    Bis dahin,
    Falco

  • Das ist der falsche Ansatz, eine URL mit mehrfach dem gleichen Parameter-Schlüssel zu haben.

    Es gibt die Möglichkeit, diese als Array zu übermitteln. Dein Formular würde ich bspw. in etwa so erstellen:

    HTML
    <form action="#" method="post" name="FORM">
      <p>Marke:</p>
      <input type="checkbox" name="t_manuf[]" id="vw" value="vw">VW
      <input type="checkbox" name="t_manuf[]" id="audi" value="audi">Audi
      <input type="checkbox" name="t_manuf[]" id="skoda" value="skoda">Skoda
    
      <input type="button" name="buttonSuche" value="Suchen">
    </form>

    Im Javascript kannst du dann nämlich auf alle t_manuf als NodeList zugreifen:

    JavaScript
    var _checks = document.querySelectorAll('[name^="t_manuf"]');

    Diese NodeList brauchst Du dann nur noch in einer Schleife durchlaufen und die Parameter zusammenbauen.

    Da gibt es natürlich viele Wege, ich würde auch hier wieder ein Array nehmen und bspw. so vorgehen:

    JavaScript
    var _values = [];
      
      _checks.forEach(i => {
        if (i.checked)
          _values.push(encodeURIComponent(i.value));
      });

    Im Prinzip brauchst Du dann nur noch das Array _values Komma separiert zusammenfügen, was über _values.join(',') relativ einfach geht.

    Deine URL sollte dann entweder den Parameter t_manuf abhängig von dem Inhalt des Array _values entweder leer oder gar nicht übergeben.


    Btw. onclick würde ich nicht verwenden, stattdessen addEventListener.

  • PS: Ich hätte das gleich testen sollen: Die verketteten += sind nicht das Problem, sondern die Variablen sind undefiniert, wenn die Checkbox nicht gecheckt ist. Und bei den keys ist das führende & überflüssig, weil die Parameter aus den Checkboxen es schon haben. Dieses liefert die gewünschte URL:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!