Warunek w formularzu

Question

Witam,

w jaki sposób można najefektywniej zrobić, aby po wyborze w pierwszym <select> opcji "Audi", da nam do wyboru w drugim <select> opcje A3,A4,A6 na przykład. Żeby pierwszy wybór z listy warunkował, co wyświetli się w drugiej liście rozwijanej w formularzu. Zgaduję, że muszę umieścić za pierwszym <select> pętle if w tagach <script>?

<form action="wyszukaj.php" method="post">
	<select name="marka">
		<option value="audi">Audi</option>
		<option value="bmw">BMW</option>
		<option value="mercedes">Mercedes-Benz</option>
	</select><br />
		
	<select name="model">
		<option value="a3">A3</option>
		<option value="a4">A4</option>
		<option value="a6">A6</option>
	</select>
		
	<br /><br />
	<input type="submit" value="Wyszukaj" />
</form>

PS. Chodzi mi o rozwiązanie, które jest np. na portalu otomoto.pl

 

Comments

Proponuję taki zapis

 

<style>
  select {
    display: block;
    margin: 1em 0;
  }
  input {
    margin: 2em 0;
  }
  select[hidden] {
    display: none;
  }
  .warning {
    color: red;
    font: 400 0.85em/1 system-ui;
  }
</style>

<form action="wyszukaj.php" method="post">
  <select name="marka">
    <option value="">Wybierz ...</option>
    <option value="audi">Audi</option>
    <option value="bmw">BMW</option>
    <option value="mercedes">Mercedes-Benz</option>
  </select>

  <select name="model" id="audi" hidden>
    <option value="">Wybierz ...</option>
    <option value="a3">A3</option>
    <option value="a4">A4</option>
    <option value="a6">A6</option>
  </select>

  <select name="model" id="bmw" hidden>
    <option value="">Wybierz ...</option>
    <option value="m1">M1</option>
    <option value="m2">M2</option>
    <option value="m3">M3</option>
  </select>

  <select name="model" id="mercedes" hidden>
    <option value="">Wybierz ...</option>
    <option value="sls">SLS</option>
    <option value="g">G</option>
    <option value="a">A</option>
  </select>

  <input type="submit" value="Wyszukaj" />
</form>

<script>
  const form = document.querySelector('form'),
        models = form.querySelectorAll('[name="model"]');

  form.addEventListener('change', ({target}) => {
    if (target.matches('[name="marka"]')) {
      for (model of models) {
        model.setAttribute('hidden', '');
        if (model.id == target.value)
          model.removeAttribute('hidden');
      }
    }
  });

  form.addEventListener('submit', _ => {
    for (model of models)
      if (model.matches('[hidden]'))
        model.remove();
  });
</script>

 

sugerowany początkowy kod php dla wyszukaj.php

  if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $marka = $_POST['marka'] ?? null;
    $model = $_POST['model'] ?? null;

    if ($marka && $model) {
      // dla demonstarcji
      var_dump($_POST, $marka, $model);

    } else {
      echo '<p class="warning">Proszę wybrać markę i model</p>';
    }
  }

 

Answer 1

Szukaj: język JavaScript -> metoda addEventListener -> zdarzenie change.

Answer 2

Może to wyglądać w ten sposób choć pewnie dało by się to zrobić o wiele lepiej :) 

<form action="wyszukaj.php" method="post">
        <select name="marka">
            <option value="audi">Audi</option>
            <option value="bmw">BMW</option>
            <option value="mercedes">Mercedes-Benz</option>
        </select><br />
             
        <select name="model" id="audi" hidden>
            <option value="a3">A3</option>
            <option value="a4">A4</option>
            <option value="a6">A6</option>
        </select>

        <select name="model" id="bmw" hidden>
                <option value="m1">M1</option>
                <option value="m2">M2</option>
                <option value="m3">M3</option>
        </select>

        <select name="model" id="mb" hidden>
                <option value="sls">SLS</option>
                <option value="g">G</option>
                <option value="a">A</option>
        </select>
             
        <br /><br />
        <input type="submit" value="Wyszukaj" />
    </form>
    <script>
    
    var model = document.getElementsByName('model');
    var marka = document.getElementsByName('marka')[0];

    marka.addEventListener('change',()=> {

        if ( marka.value === "audi" ) {

        model[1].hidden = true;
        model[2].hidden = true;
        model[0].hidden = false;

        }

        if ( marka.value === "bmw" ) {

        model[0].hidden = true;
        model[2].hidden = true;
        model[1].hidden = false;

        }

        if ( marka.value === "mercedes" ) {

        model[0].hidden = true;
        model[1].hidden = true;
        model[2].hidden = false;

        }

    });
    </script>