Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][jQuery]Zmiany w zawartości zależne od 5-ciu radio select
Forum PHP.pl > Forum > Przedszkole
nikos
Witam!
Czy ma ktoś pomysł na mniej skomplikowane rozwiązanie takiego problemu:

Mam formularz w którym mam 5 grup radio select każdy z nich ma dwie opcje wyboru Tak lub Nie.

W formularzu mam też pole cena która jest pobierana z bazy danych i wyświetla się. Chciałbym mieć możliwość modyfikacji tej ceny ze względu na wybrane pola radio.
Jest dużo możliwości wyboru czy jest jakiś sposób aby uniknąć sprawdzania wszystkich możliwości ? Może jakoś inaczej to zaprojektować...
  1. <div class="cenapoczatkowa">1500.00
  2. </div>
  3. </div>
  4. <div class="col-sm-6 form-group">
  5. <input class="form-control" id="nazwatel" name="nazwatel" value="Nokia 3210" type="text" disabled>
  6. </div>
  7. <div class="col-sm-6 form-group">
  8. <input class="form-control" id="cena" name="cena" value="1500.00" type="text" disabled>
  9. </div>
  10. <div class="row">
  11. <form action="" method="post">
  12. <div class="col-sm-6 form-group">
  13. Czy telefon się uruchamia?
  14. </div>
  15.  
  16. <div class="col-sm-6 form-group">
  17. <label class="radio-inline">
  18. <input type="radio" name="uruchamia" value="1">Tak
  19. </label>
  20.  
  21. <label class="radio-inline">
  22. <input type="radio" name="uruchamia" value="0">Nie
  23. </label>
  24. </div>
  25.  
  26. <div class="col-sm-6 form-group">
  27. Czy wyświetlacz jest sprawny?
  28. </div>
  29.  
  30. <div class="col-sm-6 form-group">
  31. <label class="radio-inline">
  32. <input type="radio" name="wyswietlacz" value="1">Tak
  33. </label>
  34.  
  35. <label class="radio-inline">
  36. <input type="radio" name="wyswietlacz" value="0">Nie
  37. </label>
  38. </div>
  39.  
  40. <div class="col-sm-6 form-group">
  41. Czy bateria jest sprawna?
  42. </div>
  43.  
  44. <div class="col-sm-6 form-group">
  45. <label class="radio-inline">
  46. <input type="radio" name="bateria" value="1">Tak
  47. </label>
  48.  
  49. <label class="radio-inline">
  50. <input type="radio" name="bateria" value="0">Nie
  51. </label>
  52. </div>
  53. $(document).ready(function(){
  54. var cena =$('.cenapoczatkowa').html() ;
  55. var wyswietlacz = cena*0.2;
  56. var baterua = cena*0.2;
  57. var obudowa = cena*0.3;
  58. var zero = 0;
  59. $('input:radio[name="uruchamia"]').change(
  60. function(){
  61. if ($(this).val() == '1'){
  62. $("#cena").val(cena);
  63.  
  64. $('input:radio[name="wyswietlacz"]').change(
  65. function(){
  66. if ($(this).val() == '1'){
  67. $("#cena").val(cena);
  68. }
  69. else {
  70. $("#cena").val(wyswietlacz);
  71. }
  72. });
  73.  
  74.  
  75. }
  76. else {
  77. $("#cena").val(zero);
  78.  
  79. }
  80. });
  81.  
  82.  
  83.  
  84. });

Oto część kodu
https://jsfiddle.net/nikos83/oqyh76o5/

Proszę o wskazówki
Puszy
Czyli gdy cena bazowa jest 1500 a telefon ma niesprawny wyświetlacz to np odejmij od ceny 200 PLN, tak?

https://jsfiddle.net/oqyh76o5/3/

Prześledź zmiany związane z div.discount, data-discount-value oraz skrypt JS. Należy zmienić pytania albo przerobić skrypt żeby dodawał ceny. Ale masz to zainicjowane, tylko dostosuj pod siebie. Masz teraz trochę nieporządek, bo raz "TAK" powinno dodawać a raz odejmować cenę, zadaj pytania tak aby na przykład "NIE" zawsze odejmowało cenę.
nikos
Cytat(Puszy @ 13.07.2017, 11:02:57 ) *
Czyli gdy cena bazowa jest 1500 a telefon ma niesprawny wyświetlacz to np odejmij od ceny 200 PLN, tak?

https://jsfiddle.net/oqyh76o5/3/

Prześledź zmiany związane z div.discount, data-discount-value oraz skrypt JS. Należy zmienić pytania albo przerobić skrypt żeby dodawał ceny. Ale masz to zainicjowane, tylko dostosuj pod siebie. Masz teraz trochę nieporządek, bo raz "TAK" powinno dodawać a raz odejmować cenę, zadaj pytania tak aby na przykład "NIE" zawsze odejmowało cenę.

O fajny pomysł dzięki!

Czy jest jakaś możliwość aby te ceny np odejmowały procentową wartość ceny?
Np discount były 80% ?

Np
https://jsfiddle.net/nikos83/oqyh76o5/4/
Puszy
Tak dodaj np atrybut data-discount-percentage i odpowiednio zedytuj skrypt, tylko pamiętaj o tym żeby wyliczać procent od podstawy nie od nowej wartości. Po prostu zamiast

  1. var discountPrice = parseFloat($(this).closest('.discount').data('discount-value'));


będziesz miał

  1. var discountPrice = parseFloat($(this).closest('.discount').data('discount-percentage ')) * basePrice;



https://jsfiddle.net/oqyh76o5/5/

Pomijam tu obsługę floatów, zabezpieczeń żeby rabat nie wyniósł ponad 100% etc. Możesz też robić rabat procentowy od już wyliczonej ceny po wcześniejszym rabacie ale to już musisz sobie samemu pokombinować, masz dwa przykłady powinny Ci wystarczyć.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.