Umieszczenie listy rozwijanej w formularzu PHP z skryptem JS

0

Witam!
Mam problem z stworzeniem formularza, który jest podmieniany przez JS.
Sprawa wygląda tak:

  • W pliku index.php mam 2 buttony. Wyświetlają one przy pomocy JS i innerHTML do odpowiedniego DIV, formularz działa.
    Jeden służy do logowania (wyświeli 2 inputy i 2 labele login i hasło) i to działa jest okej.
    Drugi służy do dodawania oferty. Tytuł, cena itd i pole kategoria <- tutaj chcę aby można było z listy rozwijanej wybrać tą kategorię. Nazwa kategorii jest przechowywana w osobnej tabeli.
    Mam zrobione dodawanie oferty w oddzielnej stronie. Działa wraz z tą kategorią, jednak chcę ujednolicić stronę i zrobić tak jak z logowaniem "bez przeładowania strony".
    Problem pojawia się w tym że mam stronę .php a skrypt w JS i chcąc "wyciągnąć" nazwę kategorii wyświetla mi kod php na stronie.
document.getElementById("logowanie").addEventListener("click", function() {
  document.getElementById("content").innerHTML = "<form action='zaloguj.php' method='POST'><label>Login</label><input type='text' name='login' class='form-control'><br/><label>Hasło: </label><input type='password' name='haslo' class='form-control'><br><input type='submit' value='Zaloguj się' class='btn btn-primary'> <?php $mysqli = new mysqli('localhost', 'root', '', 'db_praca');        $sql_kategorie = 'Select id_kategoria, nazwa_kategorii from kategorie;';$sql_umowy = 'Select id_umowy, nazwa_umowy from umowy;';        $result_kategorie = $mysqli->query($sql_kategorie);        $result_umowy = $mysqli->query($sql_umowy);        $rows_kategorie = '';        $rows_umowy = '';        while ($row_kategorie = $result_kategorie->fetch_assoc()) {          $rows_kategorie .= '<option value=\'' . $row_kategorie['id_kategoria'] . '\'>' . $row_kategorie['nazwa_kategorii'] . '</option>';        }        while ($row_umowy = $result_umowy->fetch_assoc()) {          $rows_umowy .= '<option value=\'' . $row_umowy['id_umowy'] . '\'>' . $row_umowy['nazwa_umowy'] . '</option>';        }        $mysqli->close();        ?>        <label>Kategoria</label>        <select class='browser-default custom-select' name='kategoria' id='kategoria' name='kategoria'>          <?php echo $rows_kategorie; ?>        </select> </form>";
});

Efekt: (proszę nie patrzeć na napis, powinno być dodaj ofertę, nie zaloguj).
screenshot-20210103202811.png

W JS nie mogę uporządkować kodu tak jakbym chciał tylko musi być to tak "ściśnięte". Piszę w sublimie i mam podświetlaną składnie i widzę błędy na bieżąco.

Czy da się coś z tym zrobić? Próbuję kilka godzin z formatowaniem JS ale efekty są jakie widać :)

3

To Ci się nie uda w ten sposób. PHP działa po stronie serwera i tylko serwera. Serwer odczytując plik .php interpretuje zawarty tam kod i go wykonuje. W Twoim przypadku wykonuje zapytanie do bazy pobierając te kategorie.
Jak przeniesz taki kod do JS to wykona on się w przeglądarce osoby otwierającej stronę i tylko tu. Dlatego pojawia Ci się tekst z skryptem łączącym do bazy zamiast się wykonać.

3
  1. Aby w js można była korzystać z wielowierszowych stringów zamiast używania w każdej linijce konkatenacji można użyć zamiast cudzysłowiów/apostrowów ` (ten klawisz na tabem)
  2. To co próbujesz zrobić nie zadziała.
    Skrypt PHP wykonywany jest po stronie serwera, JS działa po stronie klienta (użytkownika).
    Nie możesz przy użyciu metody innerHTML wstawiać kodu PHP i zakładać że zostanie on wyrenderowany tak jak ma to miejsce po stronie serwera.

Aby to zadziałało musisz skorzystać np z ajaxa, który odpyta odpowiedni skrypt PHP na serwerze i zwróci już treść wygenerowaną (może to być np gotowy html do wstawienia lub jakiś json)

0

pomysł trochę głupi rzeczywiście. ale innego nie mam. możesz coś podpowiedzieć w jaki sposób to zrobić? jakich haseł szukać na internecie? może gdzieś to już istnieje takie rozwiązanie i podpatrze jak to jest zrobione.

2

Ja tutaj widzę 2 wyjścia (które sam bym zastosował)

  1. Jeśli kategorii jest mało (i ich liczba zmieniać się nie będzie) zawsze możesz je przy pomocy PHP pobrać i przypisać do zmiennej w JS
    Wtedy sobie generujesz z poziomu JS takiego selecta i wstawiasz przez innerHtml tam gdzie chcesz.

  2. Opcja dużo lepsza to pobieranie asynchronicznie tych kategorii. Tutaj z pomocą przychodzi AJAX
    https://www.w3schools.com/jquery/ajax_ajax.asp

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