Dynamiczna zmiana tła za pomocą Javascript

Question

Witam, tworzę coś na wzór quizu w którym to inputy przekierowywują użytkownika do pliku php w którym tło ma się ustawiać w zależności od "name" np: food - pytania i tło o profilu spożywczym. Jest możliwe napisanie czegoś takiego w js? By zmieniały się w zależności od różnych kategorii (name). Myślałem o zrobieniu kilku takich if w osobnym pliku js tylko jak to połączyć: 

if(name=="food")
{
	
}

<input type='submit' value='start' name='food' onClick=self.location.href=('fiszki.php')/>

 

Answer 1

Nie za bardzo wiem jak to ma działać, name w formularzach służy do tego aby odwołać się do danego pola np mamy taki formularz.:

<form action="test.php" method="POST">
  <input type="text" name="zakup">
  <input type="submit" value="Wyslij">
</form>

I teraz w pliku php po wysłaniu go możemy to odebrać przy pomocy tablicy $_POST['zakup'] ~ dzięki temu mamy to co użytkownik wprowadzi w pole typu `text` którego name to `zakup` w formularzu.

<?

if(isset($_POST['zakupy'])){

  $dane = $_POST['zakupy']; // Tutaj beda twoje dane z pola formularza
  echo $dane;

} else {
exit(0);
}

?>

Sry jeżeli będą jakieś błędy ale nie piszę w PHP na co dzień, a kod wklepałem z palca.

Zakładam, że każda twoja kategoria to inna nazwa pliku php ~ sugeruje się fiszki.php. Tylko jeżeli wysyłasz formularz z automatu lądujesz na stronie w php (odpowiada za to atrybut action), musiałbyś to rozwiązać jakoś inaczej tak aby strona pozostawała (asynchronicznie) np. w JS. No chyba, że chcesz obsługiwać zmianę obrazka w skrypcie PHP (raczej też z pomocą JS). 

Comments

Znaczy się chciałem by to działało w ten sposób że input (inputów jest kilka) przekierowywuje użytkownika zawsze do pliku fiszki.php i w nim na podstawie name (każdy input ma indywidualne name) php odbiera dane i przy pomocy funkcji isset:

	if(isset($_POST['sport']))
	{
			
	}

będzie dobierać do odpowiedniej kategorii pytania z bazy danych sql. Dodatkowo zastanawiam się czy na podobnej zasadzie można ustawić tło w javascript o odpowiedniej tematyce również na podstawie "name"

---

Zazwyczaj spotykałem się z tym, że w bazie danych była sama nazwa obrazka z rozszerzeniem i leciało to jako kolejne zapytanie do bazy, a potem to zależy np. jeżeli kolejną stronę renderujesz już docelowo w PHP to można coś takiego zrobić:

echo "<script>document.body.style.backgroundImage = \"url('img/".$dane_tlo."')\";</script>";

W przeciwnym razie pozostaje odpytywanie php'owego skryptu z poziomu następnej podstrony z JS'em.

---

Ogólnie działa, ale po wysłaniu formularza w pliku fiszki.php tło robi się czarne. Da się temu jakoś zapobiec? Użyłem takiego kodu w isset:

echo "<script>document.body.style.backgroundImage = \"url('../grafika/food.jpg')\";</script>";

Jeszcze nie podłączyłem bazy danych ani nic nie robiłem z tymi formularzami*

---

To znaki ucieczki, przydatne gdy zaczyna się mętlik z apostrofami i cudzysłowami. W skrócie jeżeli chcesz napisać coś to zazwyczaj korzystając z echo i cudzysłowia jeżeli wiesz, że jest to string natomiast sprawa nieco komplikuje się gdy potrzebujesz do tego wstawić jakąś zmienną czy mieszasz języki html&js w kodzie PHP wtedy np. w niektórych elementach html'a są podwójne cudzysłowia:

<input type="text" name="test">

No i w tym momencie jeżeli chcesz to umieścić w PHP jak wyżej to można to zrobić na dwa sposoby:

<?

echo '<input type="text" name="test">';

echo "<input type='text' name='test'>";

Albo cudzysłowia po zewnątrz i wew apostrofy albo na odwrót (potem analogicznie), problem pojawia się gdy chcesz do tego jeszcze wyświetlić zwykły cudzysłów/apostrof wewnątrz tego ciągu znaków - bo jeżeli zostanie dodany gdzieś w środku kolejny raz to po prostu ciąg będzie trwał aż do jego napotkania a reszta pozostanie sklasyfikowana jako błąd składniowy / inny.

echo "<input type='text' "name='test'>";

Jeżeli dasz znak ucieczki (backslash) przed znakiem zostanie wyświetlony pomimo tego (w tym konkretnym przypadku i tak byłby błędny ale mniejsza z tym).

 

EDIT :

Jesteś pewien że ścieżka do obrazka jest prawidłowa względem skryptu w którym się to znajduje (w DevTool'sach - > Consola) dokładnie można to sprawdzić.

---

nie jestem pewien co do skryptu, ustaliłem ścieżkę zgodnie z położeniem obrazku w folderze oraz patrzyłem w devtoolsach i nic nie ma w console:

---

W takim razie wszystko jest poprawnie (na zdj widać obrazek, brak błędów więc wszystko działa jest trzeba).

---

nie do końca... jak się wciśnie Sprawdź to tło robi się czarne - bezpowrotnie, przyczyną może być np: form wyżej? Dlatego że jest poza issetem? 

<form action="" method="post">
		<input type="text" name="odp" autocomplete="off"/><br/>
		<input type="submit" name="sprawdz" value="SPRAWDŹ"/>
	</form>
	
	<?php
	
	if(isset($_POST['food']))
		{
			echo "<script>document.body.style.backgroundImage = \"url('../grafika/food.jpg')\";</script>";
		}
	if(isset($_POST['sport']))
		{
			echo "<script>document.body.style.backgroundImage = \"url('../grafika/tlo.jpg')\";</script>";
		}
     ?>

---

Obstawiam, że nic nie wpisujesz w polu `odp` i nie masz obsłużonej tej odpowiedzi którą podajesz ~ bo nic nie przychodzi do php (jeżeli bazujesz na if'ach). Ewentualnie jeżeli łączysz całość w jednym pliku (nie rozdzielasz tego) kolejność html/php jest zamieniona.

---

Tak to najpewniej to, dzięki za pomoc!