• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Alle Formulare (SelectBoxen) mit foreach durchlaufen?

C

chpo7234

New member
Hallo Leute,

ich habe auf meiner Seite um so einige SelectBoxes, die alle nach "selectbox & variable" benannt wurden. Wie kann ich mit einer foreach jeder dieser SelectBoxes durchlaufen und einzeln ansprechen?

Lieben Gruß
 
Du kannst deinen Vorschlag gerne posten, jedoch habe ich bisher keine Ahnung von JS-Bibliotheken. :/

Edit: danke für deine Hilfestellung, Terra! Gegebenenfalls werde ich mich später noch mal melden! :)
 
Zuletzt bearbeitet:
Musst halt nur vorher JQuery in dein HTML Header mit einbinden.
HTML: 
<script src="http://code.jquery.com/jquery-latest.js"></script>

Dann könntest du es wie folgt lösen:
HTML: 
<select id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select id="sel2">
    <option>1</option>
    <option>2</option>
</select>
<select id="sel3">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

PHP: 
$("select[id^='sel']").change(function(data){
  var id = data.target.id;
  var val = data.target.value;
  console.log(id + ":" + val);
});

Beispiel: https://jsfiddle.net/y4q3xxyL/


Gruß,
Terra
 
Zuletzt bearbeitet:
Mit reinem JS sieht das so aus:
Code: 
Array.prototype.slice.call(document.querySelectorAll("select[id^='sel']")).forEach(function(sel){
	console.log(sel);
});
 
Moin moin,

vielen Dank für eure Rückmeldungen! Ein Problem habe ich nun leider noch...

Ich möchte gerne den Inhalt der SelectBoxes als JSON speichern. Die SelectBoxes sind bei mir nach Hostgruppen benannt: selPrinter, selSwitches, selComputer etc. Der Inhalt der SelectBoxen sind verschiedene Schlüssel-/Stichwörter. Letztendlich wollte ich zu jeder Hostgruppe (SelectBox-ID) die Stichwörter (SelectBox-Inhalt) als JSON speichern. Ich konnte mir das irgendwie nicht umsetzen, wie ich in JavaScript die Hostgruppen als Dictionary erstelle und die Stichwörter als Liste anhänge. Hier mein fehlgeschlagener Versuch (mit PHP):

Code: 
function erstelleJsonMittelsSelectBoxes() {
  Array.prototype.slice.call(document.querySelectorAll("select[id^='sel']")).forEach(function(sel) {
    for (var i=0 ; i<sel.options.length; i++) {
      <?php
        $geraet[sel.id][i] = sel.options[i].text;
        }
      echo json_encode($geraet);
    ?>
  }
}

Ich hoffe das passt hier noch rein - ansonsten erstelle ich natürlich einen neuen Thread..
Hat jemand einen Rat?
 
Zuletzt bearbeitet:
Als erstes musst du den Unterschied und die Trennung zwischen serverseitiger (PHP) und clientseitiger (JS) Programmierung verstehen. Du kannst in einer JS-Funktion kein PHP aufrufen (außer über einen separaten HTTP-Request, aber das ist ein anderes Thema).
Deswegen musst du auch ein JS-Objekt erstellen, in dem du das Ganze speicherst. Das geht eigentlich recht gut mit der reduce bzw. map Methode von Arrays:
Code: 
function erstelleJsonMittelsSelectBoxes() {
	var obj = Array.prototype.slice.call(document.querySelectorAll("select[id^='sel']")).reduce(function(o, sel){
		o[sel.id] = Array.prototype.slice.call(sel.options).map(function(option){
			return option.text;
		});
		return o;
	}, {});
	console.log(obj, JSON.stringify(obj));
}
PS: Außerdem hast du einen Syntaxfehler in deinem JS. Das sollte dir auch in der Fehlerkonsole angezeigt werden.
 
Vielen Dank für deine Rückmeldung!

Ich habe jetzt versucht das Ergebnis mittels jQuery an PHP zu übergeben - damit PHP JSON auf dem Server speichern kann. Aber irgendwie klappt die Einbindung von jQuery nicht:
ReferenzError: erstelleJsonMittelsSelectBoxen ist nicht definiert
Zum Vergrößern anklicken....

Und dabei wird denn auf die erste Zeile im Dokument hingewiesen:
<!DOCTYYPE html>
Zum Vergrößern anklicken....

Ich habe den Doctype mal entfernt, das hat aber auch nicht weiter geholfen.

Mein Seitenaufbau sieht ungefähr wie folgt aus:

Code: 
<html>
  <head>
    <title></title>
    <script language="JavaScript1.1" type="text/javascript">
      function funktion1() { // }
      function funktion2() { // }
    </script>

    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
 
      function erstelleJsonMittelsSelectBoxen() {
        var obj = Array.prototype.slice.call(document.querySelectorAll("select[id^='sel']")).reduce(function(o, sel) {
          o[sel.id] = Array.prototype.slice.call(sel.options).map(function(option) {
            return option.text;
          });
          return o;
        }, {});
        console.log(obj, JSON.stringify(obj));
 
        $.ajax({
          data: JSON.stringify(obj),
          url: 'index.php',
          method: 'POST',
          success: function(msg) {
            alert(msg);
          }
        });
      }
    </script>
  </head>
  <body></body>
</html>

Ich habe mir von jQuery.com/download auch eine "compressed" 1.11.3-Version geladen und genau dort abgespeichert, wo index.php und co. liegt. Diese habe ich dann wie folgt eingebunden:
Code: 
    <script src="jquery-1.11.3.min.js" type="text/javascript"> </script>

Das kam aber zum gleichen Ergebnis.
 
Ok, mittlerweile habe ich gerallt, dass man für jQuery keinen Methoden-Namen vergibt (wie im Beispiel "function erstelleJsonMittelsSelectBoxen()"), sondern direkt mit einem "$" beginnt..

Mit folgendem Code-Snippet erhalte ich nun zwar die SelectBox-ID's als Array, jedoch bekomme ich die Inhalte nicht ausgelesen..

Code: 
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#button").click(function() {
          var fields = {};
          $("select[id^='sel']").each(function() {
            var $select = $(this);
            fields[this.id] = " ";
          });
          console.log(fields);
        });
      });
    </script>

Lieben Gruß

EDIT

Mittlerweile habe ich die Lösung:

Code: 
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script>
      $(document).ready(function() {
        $("#button").click(function() {
          var fields = {};
          $("select").each(function() {
            var $select = $(this);
            fields[$select.attr('name')] = $select.find('option').map(function() {
              return $(this).val();
            }).get();
          });
          console.log(fields);
        });
      });
    </script>

SelectBox-ID musste hier mit zu einen Namen abgeändert werden

Lieben Gruß
 
Zuletzt bearbeitet:
chpo7234 schrieb:
dass man für jQuery keinen Methoden-Namen vergibt
Zum Vergrößern anklicken....
Nicht unbedingt. Dein Problem oben war, dass du die Funktion in einem separaten <script> definieren muss. Wenn das <script> ein src-Attribut hat, wird der Inhalt der Node komplett ignoriert.
chpo7234 schrieb:
SelectBox-ID musste hier mit zu einen Namen abgeändert werden
Zum Vergrößern anklicken....
Nicht unbedingt. Du hättest auch genauso mit der ID arbeiten können.

chpo7234 schrieb:
Mittlerweile habe ich die Lösung
Zum Vergrößern anklicken....
Schön, dass du sie hier zeigst.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben