Frage "If-Bedingung" mit Checkboxen?

123Doppelkeks · 3 Dezember 2016

Hallo liebes Forum,

ich möchte gerne einen GoPro-Buyers Guide auf HTML-Basis schreiben. Ich habe mich vorher noch nie mit HTML beschäftigt, habe aber in der Uni Erfahrungen mit C++ gemacht. Ich bin nun soweit, dass die Oberfläche des Guides quasi steht:

HTML:

<html>
<head>
<title>GoPro Buyers Guide</title>
</head>
<body>
<?php



?>

<h3>1. Question</h3>
<h4>Please select the one application you would use your ActionCam primarily.</h4>

<p>Usage:
    <select name="auswahl1">
      <option value="start1">-</option>
      <option value="AAS">Action/Adventure/Sports</option>
      <option value="VLOG">Vlogging</option>
      <option value="T-V">Travel-videos</option>
      <option value="TNH">Timelapses/Nightlapses/Hyperlapses</option>
      <option value="Foto">Photos</option>
    </select>
  </p>
<br>


<h3>2. Question</h3>
<h4>Do you already own a cam?</h4>

<p>Answer:
   <select name="auswahl2">
      <option value="start2">-</option>   
      <option value="No">No</option>
      <option value="H3">GoPro HERO 3/3+</option>
      <option value="H4S">GoPro HERO 4 Silver</option>
      <option value="H4B">GoPro HERO 4 Black</option>
      <option value="oth">other</option>
    </select>
</p>
<br>

<h3>3. Question</h3>
<h4>How much money would you spend on your new Cam?</h4>

<p>Answer: max.
   <select name="auswahl3">
      <option value="start3">-</option>
      <option value="b1">100$</option>
      <option value="b3">300$</option>
      <option value="b5">500$</option>
      <option value="mt5">no max.</option>
    </select>
</p>
<br>

<h3>4. Question</h3>
<h4>Which features should your new Cam contain?</h4>
<h5>(you can choose more then one option)</h5>

<p>
<input type="checkbox" name="Feat1" value="a">Display<br>
<input type="checkbox" name="Feat2" value="b">good Microphone<br>
<input type="checkbox" name="Feat3" value="c">4K (very high resolution)<br>
<input type="checkbox" name="Feat4" value="d">1080p (good resolution)<br>
<input type="checkbox" name="Feat5" value="e">high fps (=frames per second)<br>
<input type="checkbox" name="Feat6" value="f">watertightness<br>
<input type="checkbox" name="Feat7" value="g">image stabilization<br>
<input type="checkbox" name="Feat8" value="h">Photos in RAW<br>
<input type="checkbox" name="Feat9" value="i">No Fisheye-Lens<br>
<input type="checkbox" name="Feat0" value="j">many available accessories<br>
</p>
<br>


</form>
<?php

} else {
echo ;
}

?>
</body>
</html>

Meine Idee ist nun, dass ich quasi über ne Menge if-Bedingungen aus den Checkboxen ein Auswahlprofil erstelle, welches auch verschiedene GoPro-Modelle verweist. Also wenn z.B. die Punkte "4K" und "Display" angemarkt werden, dass dann auf die HERO 5 Black verwiesen wird. Da habe ich allerdings leider keine Ahnung mit der Implementierung. PhP ? Wäre über jeden Tipp sehr dankbar.

123Doppelkeks · 4 Dezember 2016

Hey danke für deine Antwort! Man muss sich das ganze am Ende so vorstellen, wie beispielsweise eine Zutatenliste für Pizza. Man kann verschiedene Zutaten auswählen und im Programm werden verschiedene Pizzen hinterlegt. Die Pizza die, die größte Schnittmenge mit den gewählten Zutaten hat, wird empfohlen.

Wie kann ich denn auf das vorgeschlagene Array referenzieren? Also wie rufe ich das auf ?

Tronjer · 4 Dezember 2016

123Doppelkeks schrieb:
Wie kann ich denn auf das vorgeschlagene Array referenzieren? Also wie rufe ich das auf ?

Ich denke, du hast bereits Programmiererfahrung in C++? Dann sollte das doch kein Problem darstellen.

Ein Objekt in JavaScript über mehrere Select-Listen zu filtern, ist gar nicht so schwer. Ich hatte das vor längerer Zeit mal in anderer Sache demonstriert.

Code:

<!doctype html>
<html ng-app="myApp">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  </head>
  <body ng-controller="CarController as vm" ng-cloak>
    <div class="container">
      <div class="row">
        <div class="form-group col-md-4">
          <label for="brand">Marke:</label>
          <select class="form-control" id="brand" ng-model="vm.brand" ng-options="b.name for b in vm.brands" ng-change="vm.selectBrand()">
          </select>
        </div>
        <div class="form-group col-md-4" ng-if="vm.cars">
          <label for="type">Typ:</label>
          <select class="form-control" id="type" ng-model="vm.car_model" ng-options="b.type for b in vm.cars | unique:'type'" ng-change="vm.selectType()">
          </select>
        </div>
        <div class="form-group col-md-4" ng-if="vm.cars">
          <label for="color">Farbe:</label>
          <select class="form-control" id="type" ng-model="vm.car_color" ng-options="b.color for b in vm.cars | unique:'color'" ng-change="vm.selectColor()">
          </select>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <p>KFZ gefunden:</p>
          <ul class="list-unstyled">
            <li ng-repeat="car in vm.cars | filter: {type: vm.modell} | filter: {color: vm.farbe}">
              <strong>Typ:</strong> {{ car.type}} : <strong>Farbe:</strong> {{ car.color }}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
    <script>
      var app = angular.module('myApp', ['angular.filter'])
        app.controller('CarController', ['Cars', function(Cars){
          var vm = this;

          vm.brands = Cars.car_brands;

          vm.selectBrand = function() {
            var brand = vm.brand.value;
            vm.farbe = '';
            vm.modell = '';
            vm.cars = Cars.car_list[brand];
          };

          vm.selectType = function() {
            if (vm.car_model !== null) {
              vm.modell = vm.car_model.type;
            }
          };

          vm.selectColor = function() {
           if (vm.car_color !== null) {
              vm.farbe = vm.car_color.color;
            }
          };
        }]);

        app.factory('Cars', function() {
          return {
            car_list: {
                bmw: [
                { type: '118i', color: 'Saphirschwarz Metallic' },
                { type: '118i', color: 'Alpinweiß' },
                { type: '320', color: 'Alpinweiß' },
                { type: '530d', color: 'Mediterranblau Metallic' }
              ],
              audi: [
                { type: 'A3', color: 'Daytonagrau Perleffekt' },
                { type: 'A3', color: 'Mythosschwarz Metallic' },
                { type: 'S5', color: 'Ibisweiß' },
                { type: 'Q5', color: 'Ibisweiß' }
              ]
            },
            car_brands: [
              { name: 'Audi', value: 'audi' },
              { name: 'BMW', value: 'bmw' }
            ]
          }
        });
    </script>
  </body>
</html>

Frage "If-Bedingung" mit Checkboxen?

123Doppelkeks

Neues Mitglied

123Doppelkeks

Neues Mitglied

Tronjer

Senior HTML'ler

Neueste Beiträge