Program wyboru części samochodowych JavaScript PHP AJAX MYSQL

0

Dzień dobry wszystkim. Na wstępie zaznaczam że jestem tu nowy, nie zajmuję się wcale programowaniem i tego nie umiem ale niestety muszę stworzyć coś a'la otomoto do wyboru części samochodowych. Problem w tym że muszę mieć kilka zależnych od siebie list rozwijanych tak żeby po wybraniu marki na pierwszej mogło się dopiero wybrać pasujący do tej marki model itd. Mam stworzone w bazie na razie 2 tabele, 1 marki zawierającą pola "idMarki" oraz "nazwa" i 2 modele gdzie znajdują się kolumny "idModelu","idMarki(klucz obcy) oraz nazwa_modelu. Do tej pory udało mi się zrobić kod php który pokazuje listę rozwijaną z markami, teraz potrzebuję aby po wybraniu marki na drugiej liście pojawiały się modele pobrane z drugiej tabeli dopasowane do wybranej marki,domyślam się że miało by to być dopasowane po kluczu obcym jednak za nic nie mogę sobie z tym poradzić, z tego co wyczytałem przez ostatnie kilka dni walki z tym trzeba użyć AJAX JavaScript żeby to jakoś po ludzku działało jednak nie mam o tym zielonego pojęcia. Byłbym bardzo wdzięczny jeśli ktoś mógłby mi pomóc. Moj kod index php wygląda na ten moment tak:

<?php session_start(); if((isset($_SESSION['zalogowany']))&&($_SESSION['zalogowany']==true)) { header('Location:konto.php'); exit(); } ?> <!DOCTYPE HTML> <html lang="pl"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>Strona domowa </title> </head> <body>

Witaj w konfiguratorze tuningowym Twojego samochodu

Rejestracja - zaloz darmowe konto!

<form action="zaloguj.php" method="post"> 
    Login:<br /><input type="text" name="login" /> <br />
    Haslo:<br /><input type="password" name="haslo" /> <br /><br />
    <input type="submit" value="Zaloguj sie"/>
     
</form>
 
<h2>Wybierz markÄ™ pojazdu</h2>
<?php require_once"connect.php"; $polaczenie = @new mysqli($host,$db_user,$db_password,$db_name); $rezultat = @$polaczenie->query( sprintf("SELECT * FROM marki ")); echo '<select name="nazwa">'."
"; echo '<option value="">Wybierz Marke</option>'; while($option = mysqli_fetch_assoc($rezultat)) { echo '<option value="'.$option['idMarki'].'">'.$option['nazwa'].'</option>'; } echo '</select>'."
"; //echo '</form>'; $nazwa = $option['nazwa']; ?> 
<input type="submit" value="Pokaz pasujace czesci"/>
 
<h3>kontakt
nazwa firmy
adres
telefon
e-mail</h3>
<?php if(isset($_SESSION['blad'])) echo$_SESSION['blad']; ?> </body> </html>
1

Będziesz musiał wykonać/stworzyć następujące rzeczy:

  1. Napiszesz funkcję pobierająca z bazy marki pojazdów - funkcja może Ci zwracać np. tablicę asocjacyjną (id_marki->nazwa).
  2. Wyświetlasz pierwszego selecta na bazie danych z pkt.1
  3. W js'ie korzystasz z eventu onChange, dzięki czemu po zmianie wartości w pierwszym selekcie będziesz mógł wykonać żądanie ajaxowego do metody z pkt.4
  4. Przygotowujesz funkcje, która pobierze parametr jakim będzie id marki, owe ID wykorzystasz w zapytaniu do bazy typu SELECT id,model FROM modele WHERE id=_TwojeID_
  5. Zwrócisz listę wyników zapytania z pkt4. w postaci JSON'a
  6. W JS, w kodzie który odpowiada za obsługę odpowiedzi na ajaxa wysłanego w punkcie 3. aktualizujesz drugiego selecta.

W razie jakbyś nie wiedział, funkcja wygląda tak:

function giveMeSomething($parameter1, $parameter2){
    $localFunctionVariable = 5;
    
return $localFunctionVariable + $parameter1 + $parameter2;
}
//a tu jej wywolanie w kodzie

$weirdNumber = giveMeSometing(10,2);

//$weirdNumber jest teraz równa 17

A tu już masz w miarę łopatologiczne objaśnienie - https://www.codexworld.com/dynamic-dependent-select-box-using-jquery-ajax-php/ (jest tam też działające demo)

0

Dzięki za stronke,demo działa.Teraz próbuję go przerobić pod siebie,marki mi już wczytuje jednak nie mogę sie dostać do modelu,na drugim przycisku ciągle mam napis "wybierz najpierw marke" tak jakby nie widział że została już wybrana. Nie wiem gdzie mam błąd,kod index.php zrobiłem tak

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#country').on('change',function(){ var countryID = $(this).val(); if(countryID){ $.ajax({ type:'POST', url:'ajaxData.php', data:'idMarki'+countryID, success:function(html){ $('#state').html(html); $('#city').html('<option value="">Select state first</option>'); } }); }else{ $('#state').html('<option value="">Select country first</option>'); $('#city').html('<option value="">Select state first</option>'); } }); $('#state').on('change',function(){ var stateID = $(this).val(); if(stateID){ $.ajax({ type:'POST', url:'ajaxData.php', data:'state_id='+stateID, success:function(html){ $('#city').html(html); } }); }else{ $('#city').html('<option value="">Select state first</option>'); } }); }); </script> <?php //Include the database configuration file include 'dbConfig.php'; //Fetch all the country data $query = $db->query("SELECT * FROM marki "); //Count total number of rows $rowCount = $query->num_rows; ?> <select id="marka"> <option value="">Wybierz marke</option> <?php if($rowCount > 0){ while($row = $query->fetch_assoc()){ echo '<option value="'.$row['idMarki'].'">'.$row['nazwa'].'</option>'; } }else{ echo '<option value="">Country not available</option>'; } ?> </select> <select id="state"> <option value="">wybierz najpeirw marke</option> </select> <select id="city"> <option value="">Select state first</option> </select>

natomiast ajaxData.php tak

<?php //Include the database configuration file include 'dbConfig.php'; if(!empty($_POST["idMarki"])){ //Fetch all state data $query = $db->query("SELECT * FROM modele WHERE idMarki = ".$_POST['idMarki']); //Count total number of rows $rowCount = $query->num_rows; //State option list if($rowCount > 0){ echo '<option value="">Select state</option>'; while($row = $query->fetch_assoc()){ echo '<option value="'.$row['state_id'].'">'.$row['state_name'].'</option>'; } }else{ echo '<option value="">Marka nie wybrana</option>'; } }elseif(!empty($_POST["state_id"])){ //Fetch all city data $query = $db->query("SELECT * FROM cities WHERE state_id = ".$_POST['state_id']." AND status = 1 ORDER BY city_name ASC"); //Count total number of rows $rowCount = $query->num_rows; //City option list if($rowCount > 0){ echo '<option value="">Select city</option>'; while($row = $query->fetch_assoc()){ echo '<option value="'.$row['city_id'].'">'.$row['city_name'].'</option>'; } }else{ echo '<option value="">City not available</option>'; } } ?>

jak zmienię w index.php <select id="marka"> na <select id="country"> to wtedy ten napis "wybierz najpierw marke" znika i na przycisku nic nie pisze

1 użytkowników online, w tym zalogowanych: 0, gości: 1