Pole zależne od innego pola z danymi z Mysql Opcje

[maxcv5123]

Mam formularz z polem kategorii typu select. Mam też drugie pole które ma się pojawić po wybraniu kategorii. Pole to może być select lub input zależnie od wybrania odpowiedniej kategorii. Jeśli drugie pole będzie select to dane do tego pola mają być pobierane z bazy danych zależnie od wybranej kategorii.
Szukam jakiegoś przykładu i szukam... jedynie co znalazłem to poradniki jak zrobić 'pole zależne od innego pola' działa to jednak tak, że przy wczytaniu strony ładuje wszystkie pola, a część z nich jest po prostu ukryta. A mi potrzeba czegoś innego, bo nie mogę ładować wszystkich danych od razu. Mam tego zbyt dużo. Bardzo bym prosił o nakierowania na jakiś przykład/poradnik, a dalej sobie poradzę.

Ten post edytował maxcv5123 1.06.2018, 10:45:52

[Crash89]

https://www.w3schools.com/xml/ajax_intro.asp

Po wybraniu opcji selecta, przez ajaxa ładujesz potrzebne dane.

Ten post edytował Crash89 1.06.2018, 10:58:53

[maxcv5123]

dzięki rozwiązałeś sporo moich problemów

EDIT: Jednak mam jeszcze jeden problem. Mam pole input typu autocomplet tak aby po wpisaniu pierwszych liter jakiegoś słowa pokazało podpowiedz pasujących słów.
Jeśli pole

[PHP] pobierz, plaintext 
<input type="text" id="autocomplete-custom1" >
	<input type="text" name="selectcustom1_id" id="selectcustom1_id" />
[PHP] pobierz, plaintext 

zostanie 'załadowane' za pomocą xmlhttp.open niestety nie chce działać poprawnie czyli nie pokazuje podpowiedz pasujących słów.

Fragment kodu z pliku formularza

[PHP] pobierz, plaintext 
 
<select name="lista" id="lista"  onchange="showCustomer(this.value)">
    <option value="0">jeden</option>
    <option value="1">dwa</option>
    <option value="2">trzy</option>
</select>
 
<div id="txtHint">  Tu pokaże  nowe pola po wybraniu czegoś z powyższej listy</div>
 
 
 
// Skrypt odpowiedzialny za załadowanie nowych danych do div'a 'txtHint'  po wybraniu czegoś z listy
<script>
function showCustomer(str) {
 if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {  // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","showfield.php&idfield="+str,true);
  xmlhttp.send();
}
</script>
 
// Skrypt odpowiedzialny za pole autocomplete, który wysyła dane  do fieldauto.php gdzie wszystko jest pobierane z bazy danych w pętli while
<script type='text/javascript' >
    $( function() {
        $( "#autocomplete-custom1" ).autocomplete({
            minLength: 2,
            source: function( request, response ) {
                $.ajax({
                    url: "fieldauto.php",
                    type: 'post',
                    dataType: "json",
                    data: {
                        search: request.term,
                    },
                    success: function( data ) {
                        response( data );
                    }
                });
            },
            select: function (event, ui) {
                $('#autocomplete-custom1').val(ui.item.label); // display the selected text
 
                $('#selectcustom1_id').val(ui.item.value); // save selected id to input
 
                return false;
            }
        });
 
    });
 
    function split( val ) {
      return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }
   </script>
[PHP] pobierz, plaintext 

W showfield.php
mam na razie jedynie taki kod

[PHP] pobierz, plaintext 
	echo '<input type="text" id="autocomplete-custom1" >
	<input type="text" name="selectcustom1_id" id="selectcustom1_id" />';
[PHP] pobierz, plaintext 

Podsumowując jeśli powyższy fragment umieszczam od razu w kodzie formularza, to pole działa. Ale mi nie chodzi o to by wszystkie pola wyświetlić od razu w formularzu, chcę je wyświetlić tylko wtedy jeśli użytkownik wybierze 'coś' z list. Po wybraniu czegoś z listy, pola 'magicznie' się pojawiają w formularzu, ale pole typu autocomplete nie pokazuje propozycji, zero reakcji. Jakiś konflikt script? co robię źle?

EDIT: Po 10 godzinach szukania rozwiązania już sobie poradziłem. Wszytko trzeba robić za pomocą "ajax post"

Ten post edytował maxcv5123 3.06.2018, 14:44:51