Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Odświeżanie Wartości w Formularzu.
brudnyharry
post
Post #1





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 18.12.2015

Ostrzeżenie: (0%)
-----

Witam, własnie próbuje swoich sił w "pustym" php bez żadnych dodatków typu baza danych itd. Chciałbym stworzyć formularz w którym posiadam kilka produktów ze stałą cena oraz które są * przez dana ilość jaką wybierze użytkownik.

Otworzyłem zatem tablice która zawiera 4 produkty z ustawiona "ceną" oraz które od razu są mnożone jak wspominałem przez ilość która się wpisze w formularzu.

Kod
<?php

$product = array('usg1' => 20 * $_POST['many1'], 'usg2' => 30 * $_POST['many2'], 'usg3' => 50 * $_POST['many3'], 'usg4' => 100 * $_POST['many4']);

?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/main.scss">
</head>
<body>
  <form method="post">
    <input type="number" name="many1" value="0" min="0">
    <?php  echo 'Total Price = ' . $product['usg1']; ?>
    <input type="number" name="many2" value="0" min="0">
    <?php  echo 'Total Price = ' . $product['usg2']; ?>
    <input type="number" name="many3" value="0" min="0">
    <?php  echo 'Total Price = ' . $product['usg3']; ?>
    <input type="number" name="many4" value="0" min="0">
    <?php  echo 'Total Price = ' . $product['usg4'];
    ?>
    <button type="submit" name="button">Sprawdz</button>
  </form>
</body>
</html>


Występuje mi problem z tym ze nie wiem jak aktualizować cenę która jest zależna od ilości bez naciskania na przycisk. Chciałbym by aktualizowanie cen poprzez zwiększanie / zmniejszanie ilości było coś w stylu real-time. Czyli działało bezpośrednio za zwiększeniem / zmniejszeniem. I na koniec z sumować wszystkie ceny produktów do jednej zmiennej.

Wiem ze rozwiązanie jakie zawarłem jest dosyć ubogie ale to początek i proszę o wyrozumiałość , to moje pierwsze kroki. Nie mam problemu z budowaniem systemu, tylko z umieszczeniem go w PHP czy odpowiednio go z definiować, moze po prostu nie znam na tyle tego języka by to zrobić.

Trosze o pomoc lub wyjaśnienie, czy nawet przykład. Z góry dziękuje.

Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 4)
darko
post
Post #2





Grupa: Zarejestrowani
Postów: 2 885
Pomógł: 463
Dołączył: 3.10.2009
Skąd: Wrocław

Ostrzeżenie: (0%)
----- 

[JAVASCRIPT] pobierz, plaintext 
  1. // Na początek sprawdź to:
  2. jQuery('input[name*=many]').change(function(){
  3.   console.log(this);
  4.   /*
  5.   jQuery.on('change',function(this){
  6.     
  7.   });
  8.   */
  9. });
[JAVASCRIPT] pobierz, plaintext


lub:

jQuery("input[name*='many']")
Go to the top of the page
+Quote Post
brudnyharry
post
Post #3





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 18.12.2015

Ostrzeżenie: (0%)
-----

Bez skutku. Tylko po zatwierdzeniu (przyciskiem) wartość ceny się zmienia. Czy to ma związek z sesja czy odświeżaniem strony? Czy po prostu normalnie można uzyskać zmiany w czasie rzeczywistym?

Ten post edytował brudnyharry 18.12.2015, 22:32:48
Go to the top of the page
+Quote Post
koodo218
post
Post #4





Grupa: Zarejestrowani
Postów: 114
Pomógł: 25
Dołączył: 22.11.2015

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1.  <form name="formularz" method="post">
  2.     <label id="many1"></label>
  3.     <input type="number" name="many1" value="0" min="0">
  4.     <label id="many2"></label>
  5.     <input type="number" name="many2" value="0" min="0">
  6.     <label id="many3"></label>
  7.     <input type="number" name="many3" value="0" min="0">
  8.     <label id="many4"></label>
  9.     <input type="number" name="many4" value="0" min="0">
  10.  </form>
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
  1. for(i=0;i<document.formularz.getElementsByTagName("input").length;i++){
  2. 	document.formularz.getElementsByTagName("input")[i].onchange = obsluga;
  3. }
  4.  
  5. function obsluga(){
  6. 	if(this.name == "many1") document.getElementById(this.name).innerHTML = 20*this.value;
  7. 	else if(this.name == "many2") document.getElementById(this.name).innerHTML = 30*this.value;
  8. 	else if(this.name == "many3") document.getElementById(this.name).innerHTML = 50*this.value;
  9. 	else if(this.name == "many4") document.getElementById(this.name).innerHTML = 100*this.value;
  10. }
[JAVASCRIPT] pobierz, plaintext
Go to the top of the page
+Quote Post
brudnyharry
post
Post #5





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 18.12.2015

Ostrzeżenie: (0%)
-----

Cytat(koodo218 @ 19.12.2015, 09:39:40 ) *
[HTML] pobierz, plaintext 
  1.  <form name="formularz" method="post">
  2.     <label id="many1"></label>
  3.     <input type="number" name="many1" value="0" min="0">
  4.     <label id="many2"></label>
  5.     <input type="number" name="many2" value="0" min="0">
  6.     <label id="many3"></label>
  7.     <input type="number" name="many3" value="0" min="0">
  8.     <label id="many4"></label>
  9.     <input type="number" name="many4" value="0" min="0">
  10.  </form>
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
  1. for(i=0;i<document.formularz.getElementsByTagName("input").length;i++){
  2. 	document.formularz.getElementsByTagName("input")[i].onchange = obsluga;
  3. }
  4.  
  5. function obsluga(){
  6. 	if(this.name == "many1") document.getElementById(this.name).innerHTML = 20*this.value;
  7. 	else if(this.name == "many2") document.getElementById(this.name).innerHTML = 30*this.value;
  8. 	else if(this.name == "many3") document.getElementById(this.name).innerHTML = 50*this.value;
  9. 	else if(this.name == "many4") document.getElementById(this.name).innerHTML = 100*this.value;
  10. }
[JAVASCRIPT] pobierz, plaintext


Wszystko chodzi jak trzeba. Rozumiem już nawet działanie tego, w sumie pominąłem JS dla tego moze napotkałem takie błędy. Dziękuje teraz będę miał oczy szeroko otwarte. Problem rozwiązany.

Edit. A gdybym chciał jeszcze dodać do tego sumę w id "sum-many" która tak samo będzie na bieżąco aktualizowana wraz z zwiększeniem poszczególnych id z "many".
Oczywiście chciałbym się odnieść się do tego kodu.

Utworzyłem tak jak powyżej do kodu "label" o id="sum-many" i chciałem w js utworzyć zmienna która będzie sumowała to wszystko podpinając się do funkcji "obsługa". W efekcie końcowym uzyskałem napis "NaN" zamiast jakiejkolwiek wartości.

Udało się. Na razie chodzi mi tylko o zrozumienie działania języka a nie możliwości w sposobności działaniu programu. Mam to jednak na uwadze, ale to będzie krok 2. Dołożyłem linijkę kodu do funkcji.

Kod
document.getElementById("many-sum").innerHTML = Number(document.getElementById("many1").innerHTML) + Number(document.getElementById("many2").innerHTML) + Number(document.getElementById("many3").innerHTML) + Number(document.getElementById("many4").innerHTML);


Dzięki serdeczne za pomoc. (IMG:style_emoticons/default/smile.gif)



Ten post edytował brudnyharry 19.12.2015, 18:02:42
Go to the top of the page
+Quote Post
« Następny starszy · PHP · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 25.08.2025 - 01:38
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn