Jak wykonać - przeładowywanie stronny

Question

Witam.

Jestem początkującym i mam pewien problem.

Mianowicie mam stronę w php gdzie zadeklarowałem kilka zmiennych do obliczeń.

Czyli na pierwszej stronie podaje zmienne i na dole mam button OBLICZ  po kliknięciu przenosi mnie na stronę wynik.php gdzie oczywiście mam wyniki.

Chciałbym jednak aby po kliknięciu buttona wyniki pojawiły się na pierwszej stronie poniżej wprowadzonych danych.

Jak to zrobić?

Podobny przykład jest tutaj na stronie:

http://www.zhitov.ru/pl/drywall/

gdzie po kliknięciu oblicz przeładowuje się tylko fragment strony a nie wszystko.

Answer 1

Jeśli obliczenia wykonujesz po stronie serwera to zainteresuj się Ajax'em.

Answer 2

Albo napisz to w JS albo zapoznaj się z AJAXem

Answer 3

Obliczenia piszę w php.

Czyli rozumiem iż tutaj java script nie pomoże u muszę skorzystać z ajax? Tak?

Comments

What's AJAX?

 

AJAX stands for Asynchronous JavaScript And XML.

https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started

Answer 4

Jeżeli koniecznie musisz wykonywać obliczenia po stronie serwera, wykorzystując kod w drugim pliku PHP, a jednocześnie chcesz uzyskać wynik na pierwszej stronie asynchronicznie, to rzeczywiście posłuży Ci do tego Ajax:

function request(zmienna1, zmienna2){

let params = 'zmienna1='+encodeURIComponent(zmienna1)+'&zmienna2='+encodeURIComponent(zmienna2);

var xhr = new XMLHttpRequest();

xhr.open("POST", 'oblicz.php', true);

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhr.onload = function() {

document.getElementById('wynik').value = this.responseText; /* do pola z wynikiem przypisujesz wynik obliczeń z drugiego pliku (oblicz.php, w którym wynik zwracasz finalnie np. za pomocą echo)  

console.log(this.responseText); możesz opcjonalnie podejrzeć w konsoli co zwraca twój php, abyś był w stanie łatwo kontrolować błędy po drugiej stronie

*/

}

xhr.onerror =function() {

console.log("Info o błędzie requestu");

}

xhr.send(params); // Wysylasz żądanie do pliku oblicz.php wraz z Twoimi danymi (zmienna1, zmienna2, itd...)

}

Ostatecznie funkcje przypisz do właściwego eventu, np.:
document.getElementById('oblicz').addEventListener('click', request(zmienna1, zmienna2));

Comments

jak wpisałem send który mi podałeś wszystko działa.

W formularzu mam jeszcze listy rozwijalne typu select.

Z nich w taki sam sposób mam dodać wybrane opcje?

Bo jak tak robie to się nic nie pojawia.

Tak jakby nie pobierało danej z pola select

---

Mam jeszcze takie pytanie do poprzedniego obecnie mam taki send

xmlhttp.send("wysokosc="+ document.getElementById("wysokosc").value +"&szerokosc="+ document.getElementById("szerokosc").value + "srednicastrzemiona="+ document.getElementById("srednicastrzemiona").value );

gdzie srednicastrzemiona jest z listy rozwijalnej.

Otrzymuje zwrócone wartości z php:

To poniżej to wszystko z funkcji echo z php jako tekst ze zmiennymi:

na zielono poprawnie wstawia wartości zmiennych wysokosc i szerokosc natmiast zmienną srednicastrzemiona dokleja dalej zamiast wstawić ją na końcu gdzie jest na to miejsce. Jaki może być tego powód?

dodatkowo wyświetla błąd:

Notice: Undefined index: srednicastrzemiona in C:\xampp\htdocs\obliczenia\wynik.php on line 29

pomimo że wartość pobiera bo ją wpisuje tylko nie w tym miejscu co trzeba - na czerwono

USTALONO GEOMETRIĘ: 
Ustaliłeś wysokość belki na 30 cm, a szerokość na 15srednicastrzemiona=10 cm 
Pole powierzchni belki wynosi 450cm 2 co w przeliczeniu wynosi 0.045 m 2

USTALONO OBCIĄŻENIA: 
Obliczeniowy moment zginający wynosi: kNm

DANE MATERIAŁOWE STAL: 
Przyjąłeś średnicę prętów głównych Ø mm Średnica strzemione tutaj powinna być ta srednicastrzemiona! Ø mm 

 

---

<select name="choose" id="choose">
	<option value="8">eight</option>
</select>

xhr.send("eight="+document.getElementById('choose').value);

 

---

Mam takie pole select

<select name="srednicastrzemiona" id="srednicastrzemiona">
					<option value="6">6</option> 
					<option selected value="8">8</option>
		  			<option value="10">10</option>
		  			<option value="12">12</option> 
		  		</select>

A więc mój kod to:

xhr.send("6"+document.getElementById('srednicastrzemiona').value);

Po klejeniu tego nie działa też.. nie pobiera zmiennej

Notice: Undefined index: srednicastrzemiona in C:\xampp\htdocs\obliczenia\wynik.php on line 29

---

Już wiem co zmaściłem!!

Przy wpisywaniu kolenych wyrażeń do send nie dałem znaku & !! a teraz już działa