pobieranie danych z formularza z podstrony w javascript

Question

Witam, czy da się otworzyć poprzez onclick:
 

<button onclick="kategoria()">SPRAWDŹ</button>

funkcję w innym pliku do którego dostajemy się po naciśnięciu buttona:
 

<form action='plik2.php' method='POST'>

drugi plik:
 

<script>
function kategoria()
{
	
	document.write("dziala xdddddd");
}
</script>

i w ten sposób po wyborze odpowiedniego przycisku będzie się wywoływać odpowiednia funkcja lub po prostu jakoś pobrać dane z formularza z 1 strony gdy odpowiedni button zostanie naciśnięty?

Answer 1

Możesz sobie zrobić button typu submit i po jego kliknięciu poleci request do serwera, ale dzisiaj częściej robi się to XHR'em, na taki button wystarczy że zapniesz event click czy submit formularza i wyślesz XHR'em dane jeśli to np. POST. Następnie jak dostaniesz zwrotkę z sewera, np. JSON to odpowiednio aktualizujesz front.

Generalnie to jest podstawowa praca z XHR, musiałbyś dokładniej napisać z czym masz problem to pomożemy.

No i pytanie kiedy ma się odpalać funkcja kategoria()? To ma być funkcja na success response czy jak?

Comments

Cóż, jak dotąd jeszcze nie miałem do czynienia z JSON ani XHR, ale mam nadzieję że tu można to jakoś pominąć. Chcę by po wyborze którejś z kategorii słówek do ang kod:
 

<form action='fiszki.php' method='POST'>
			<article>
			<h4>Food / Jedzenie</h4>
			<hr/>
			<input type='submit' value='start' id='food'/>
			<button onclick="kategoria()">SPRAWDŹ</button>
			</article>
			
			<article>
			<h4>Sport / Sport</h4>
			<hr/>
			<input type='submit' value='start' name='sport'/>
			</article>
			
			<article>
			<h4>Nature / Przyroda</h4>
			<hr/>
			<input type='submit' value='start' name='nature'/>
			</article>
			
			<article>
			<h4>Profession / Zawód</h4>
			<hr/>
			<input type='submit' value='start' name='profession'/>
			</article>
			
			<article>
			<h4>House / Dom</h4>
			<hr/>
			<input type='submit' value='start' name='house'/>
			</article>
			
			<article>
			<h4>Holidays / Wakacje</h4>
			<hr/>
			<input type='submit' value='start' name='holidays'/>
			</article>
			
			<article>
			<h4>Means of transport / Środki transportu</h4>
			<hr/>
			<input type='submit' value='start' name='transport'/>
			</article>
			
			<article>
			<h4>Animals / Zwierzęta</h4>
			<hr/>
			<input type='submit' value='start' name='animals'/>
			</article>
			
			<article>
			<h4>Names of states / Nazwy państw</h4>
			<hr/>
			<input type='submit' value='start' name='states'/>
			</article>
			
			<article>
			<h4>Informatics / Informatyka</h4>
			<hr/>
			<input type='submit' value='start' name='informatics'/>
			</article>
			
			<article>
			<h4>Personality / Osobowość</h4>
			<hr/>
			<input type='submit' value='start' name='personality'/>
			</article>
			
			<article>
			<h4>Body parts / Części ciała</h4>
			<hr/>
			<input type='submit' value='start' name='body'/>
		</form>

submit lub button przerzucał nas na drugą stronę i na niej po wyborze odpowiedniej kategorii ustawiało się odpowiednie tło(to już mam) oraz pytania z bazy danych.

Planowałem by zrobić to tak że każdy button lub submit wywołuje funkcję przygotowaną do każdej kategorii lub by po naciśnięciu buttona pobierać np: name wybranej kategorii i ustawiać tło i pytania do niej.
Da się to tak zrobić?
edit: a może da się to zrobić przez sesje?

---

Tak jak piszesz, że chcesz to możesz POSTem odebrać na drugiej stronie i wrzucić w pole hidden, aby przeszło do JS.

Name taki sam dla wszystkich. Value różne.

$yourValue = $_POST['start'];

echo '<input id="yourID " type="hidden" value="'. $yourValue.'">';

Potem w js.

function kategoria(variable)
{
    // tu ifami albo casem wg przekazanego parametru
	if(variable == "sport"){
   		document.write("dziala xdddddd");
		//kod dla sportu np.
		document.getElementById("to_co_zmieniasz_tło").style.background =  "";
		document.body.style.background = "";
		document.body.style.backgroundColor = "";

	}
	if(variable == "nature"){
		document.write("dziala xdddddd");
		//kod dla natury
	}
	//itd
}



document.addEventListener("DOMContentLoaded", function() { // gdy załaduje się DOM*
	var yourValue = document.getElementById("yourID").value;
	kategoria(yourValue);
});

* I wtedy to:

<script src="JS/scroll.js"></script>

<script src="JS/slider.js"></script>

do heada pierwszej strony

A to out: onclick="kategoria()

---

Tak, dzięki, udało się! Jednak musiałem zmienić kod bo ten oryginalny nie działał mi więc jest trochę dłużej:
strona 1:
 

<form action='fiszki.php' method='POST'>
			<article>
			<h4>Food / Jedzenie</h4>
			<hr/>
			<input type='submit' value='start' name='food' />
			</article>
			
			<article>
			<h4>Sport / Sport</h4>
			<hr/>
			<input type='submit' value='start' name='sport'/>
			</article>
			
			<article>
			<h4>Nature / Przyroda</h4>
			<hr/>
			<input type='submit' value='start' name='nature'/>
			</article>
                         //itd. reszta kategorii

 

strona 2:

<?php

$typ=0;
	if(isset($_POST['food']))
		{
			$typ="food";
		}
	if(isset($_POST['sport']))
		{
			$typ="sport";
		}
	if(isset($_POST['nature']))
		{
			$typ="nature";
		}
	if(isset($_POST['profession']))
		{
			$typ="profession";
		}
	if(isset($_POST['house']))
		{
			$typ="house";
		}
	if(isset($_POST['holidays']))
		{
			$typ="holidays";
		}
	if(isset($_POST['transport']))
		{
			$typ="transport";
		}
	if(isset($_POST['animals']))
		{
			$typ="animals";
		}
	if(isset($_POST['states']))
		{
			$typ="states";
		}
	if(isset($_POST['informatics']))
		{
			$typ="informatics";
		}
	if(isset($_POST['personality']))
		{
			$typ="personality";
		}
	if(isset($_POST['body']))
		{
			$typ="body";
		}
echo '<input id="yourID" type="hidden" value="'.$typ.'">';	
echo $typ;

?>

&
 

<script>
function kategoria(variable)
{
    if(variable == "food"){
        document.body.style.backgroundImage = "url('../grafika/food.jpg')";
    }
    if(variable == "sport"){
        document.body.style.backgroundImage = "url('../grafika/sport.jpg')";
    }
	if(variable == "nature"){
        document.body.style.backgroundImage = "url('../grafika/nature.jpg')";
    }
	if(variable == "profession"){
        document.body.style.backgroundImage = "url('../grafika/profession.jpg')";
    }
    if(variable == "house"){
        document.body.style.backgroundImage = "url('../grafika/house.jpg')";
    }
	if(variable == "holidays"){
        document.body.style.backgroundImage = "url('../grafika/holidays.jpg')";
    }
	if(variable == "transport"){
        document.body.style.backgroundImage = "url('../grafika/transport.jpg')";
    }
    if(variable == "animals"){
        document.body.style.backgroundImage = "url('../grafika/animals.jpg')";
    }
	if(variable == "states"){
        document.body.style.backgroundImage = "url('../grafika/states.jpg')";
    }
	if(variable == "informatics"){
        document.body.style.backgroundImage = "url('../grafika/informatics.jpg')";
    }
    if(variable == "personality"){
        document.body.style.backgroundImage = "url('../grafika/personality.jpg')";
    }
	if(variable == "body"){
        document.body.style.backgroundImage = "url('../grafika/body.jpg')";
    }

}

	document.addEventListener("DOMContentLoaded", function() {
		var typ = document.getElementById("yourID").value;
		kategoria(typ);
	});
</script>

Na pewno da się to ukrócić, ale nwm jak.
 

---

Nie działał Ci, bo nie przeczytałeś dokładnie - napisałem name taki sam, value różne.