| Autor | Zpráva | ||
|---|---|---|---|
| vodys Profil |
Zdravím.
Hledám řešení kalkulace dvou různých čísel v reálném čase s odesláním výsledku do formuláře. Bohužel javascriptu neholduji vůbec.. Názorný příklad: 
Ve sloupci "Vyberte variantu" si vyberu daný materiál, který bude mít 2 různé ceny dle množství. Tyto ceny se již v tabulce automaticky vypíší do daných polí. Ve sloupci "Vyplňte plochu" si v prvním inputu navolím počet. Hledám funkcionalitu, která mi bude dle zadané varianty a čísla množství okamžitě počítat výsledek bez nutnosti klikat na tlačítko "Spočítat" atd... Ovšem s tím rozdílem, že zadám-li do pole množství číslo 101 a vyšší, změní se kalkulovaná sazba dle varianty produktu. Poté bych potřeboval Variantu, množství, sazbu a výslednou cenu odeslat do formuláře - jakože jej předvyplnit. Přikládám kód, který zatím mám: <html>
<head>
<title>Návrh tabulky produktu</title>
<link href="https://fonts.googleapis.com/css?family=Exo&display=swap" rel="stylesheet">
<script type="text/javascript">
function multiply() {
a = Number(document.getElementById('QTY').value);
b = Number(document.getElementById('PPRICE').value);
c = a * b;
document.getElementById('TOTAL').value = c;
}
</script>
</head>
<body>
<center>
<div style="margin-top:50px;">
<table style="padding:10px;background-color:#f9f9f9; outline:1px solid #000;width:530px;">
<tr style="height:40px;">
<td style="width:90px;font-size:13px;"><b>Zvolte variantu</b></td>
<td colspan="3">
<select style="font-family: 'Exo', sans-serif;font-size:16px;color:#000;border:2px solid #e1e1e1;width:190px;height:40px!important;text-align-last:center;">
<option value="cervenohneda">Červenohnědá</option>
<option value="oranzova">Břidlicově černá</option>
<option value="hneda">Cihlově červená</option>
<img style="float:right;padding-right:5px;margin-top:5px;" src="https://image.flaticon.com/icons/png/512/16/16895.png" width="10"></select></td>
<td></td>
<td style="text-align:center;"><img src="https://www.imgup.cz/images/2019/05/31/skladem.png"></td>
</tr>
<tr style="height:30px;">
<td></td>
<td style="vertical-align:bottom;font-size:11px;text-align:center;">Počet m<sup>2</sup></td>
<td></td>
<td style="vertical-align:bottom;font-size:11px;text-align:center;">Cena za m<sup>2</sup></td>
<td></td>
<td style="vertical-align:bottom;font-size:11px;text-align:center;">Celkem vč. DPH</td>
</tr>
<tr style="height:40px;">
<td style="width:100px;font-size:13px;"><b>Vyplňte plochu</b></td>
<td><input type="text" style="font-family: 'Exo', sans-serif;font-size:16px;color:#000;border:2px solid red;width:60px;height:40px!important;text-align:center;" name="QTY" id="QTY" onKeyUp="multiply()"></td>
<td style="color:#dd2b06;font-size:18px;font-weight:bold;width:50px;text-align:center;">X</td>
<td><input type="text" style="font-family: 'Exo', sans-serif;font-size:16px;color:#000;border:2px solid #e1e1e1;width:70px;height:40px!important;text-align:center;" name="PPRICE" id="PPRICE" value="229.71" readonly/></td>
<td style="color:#dd2b06;font-size:18px;font-weight:bold;width:50px;text-align:center;">=</td>
<td><input type="text" style="font-family: 'Exo', sans-serif;font-size:19px;font-weight:bold;color:#dd2b06;border:2px solid #e1e1e1;width:160px;height:40px!important;text-align:center;" name="TOTAL" id="TOTAL" readonly/></td>
</tr>
<tr style="height:50px;">
<td style="vertical-align:bottom;width:90px;font-size:13px;"><b>Použitá sazba:</b></td>
<td style="vertical-align:bottom;" colspan="2"><b>229,71 Kč</b></td>
<td style="vertical-align:bottom;text-align:right;font-size:12px;color:#000;" colspan="3">Cena <b>pod</b> 100m<sup>2</sup>: <b><font color="#dd2b06">328,15</font> Kč vč. DPH</b><br />Cena <b>nad</b> 100m<sup>2</sup>: <b><font color="green">229,71</font> Kč vč. DPH</b></td>
</tr>
<tr style="height:60px;">
<td colspan="6" style="text-align:right;vertical-align:bottom;"><button style="font-weight:bold;border-style: solid;border-color: transparent;font-size:12px;background-color: #157515;padding: 10px 10px;color: #fff!important;border-radius: 5px;width:160px;"><span style="font-family: 'Exo', sans-serif;">POPTAT MATERIÁL</span></button> <button style="font-weight:bold;border-style: solid;border-color: transparent;font-size:12px;background-color: #cf2f03;padding: 10px 10px;color: #fff!important;border-radius: 5px;width:160px;"><span style="font-family: 'Exo', sans-serif;">PŘIDAT DO KOŠÍKU</span></button></td>
</tr>
</table>
<style>
body {
font-family: 'Exo', sans-serif;
}
</style>
</body>
</html>Za každou pomoc budu vděčný! Díky moc |
||
| Tomášeek Profil |
#2 · Zasláno: 2. 6. 2019, 18:04:26
vodys:
Jsem jen na tabletu, takže ti pomůžu kdyžtak později z počítače. Ale, pri proletnuti kódu se mi zda, ze z toho JS (a jde jen o základní operace) nemáš vůbec nic? Nějaký náznak snahy a pokusu bych tam rad viděl, předložit ti cely kód se mi upřímně nechce, protože za chvíli přijdes s dalším banálním dotazem. Cele je to o výběru elementů, jejich hodnot, porovnávání (<>100), atd. Nic složitého. |
||
| vodys Profil |
#3 · Zasláno: 2. 6. 2019, 18:08:48
Tomášeek:
Bohužel z toho opravdu nic nemám. Jako samouk na všechno přicházím. Jednou si nechám poradit a příště vím a rozvíjím. |
||
| Tomášeek Profil |
#4 · Zasláno: 2. 6. 2019, 18:13:09
vodys:
Základ jsem ti napsal. Nauč se vybrat element (podle jména, podle ID, případně kontextu - pozor, někde výběrem celou kolekci, kterou je třeba projít cyklem), nauč se přistupovat k hodnotě toho elementu (bavíme se o formulářích, čili value). Nauč se porovnávat (zápis stejný jako na prvním stupni v matematice). Násobit už umíš. Více není potřeba. Jen doplním, ze ta funkce multiply by měla mít správně 2 parametry - buď elementy, nebo rovnou jejich hodnoty, a sice počet kusů a cenu aktualni cenu (vztaženou na počet kusu). |
||
| vodys Profil |
#5 · Zasláno: 2. 6. 2019, 18:35:08
Tomášeek:
Tak díky. Jak jsem psal. Nemám z toho nic, a to ani z toho, co jsi mi "poradil". Každopádně díky za snahu. |
||
| Tomášeek Profil |
#6 · Zasláno: 2. 6. 2019, 18:38:22
vodys:
Možná později z počítače nějaký kousek kódu ukazu, na tabletu ho psát nebudu. Ale to, co píší v #4 jsou přesně ty easy tasky, které potřebuješ zpracovat. A jde skutečně o základ jazyka, první 3 kapitoly každé Js učebnice. |
||
| vodys Profil |
#7 · Zasláno: 2. 6. 2019, 19:05:44
Tomášeek:
Pokud je to tak jednoduchý úkon a já bych na tom strávil dlouhé hodiny, domluvíme se finančně? Napište mi na email: vodysm@seznam.cz |
||
|
Časová prodleva: 5 dní
|
|||
| Kajman Profil |
#8 · Zasláno: 7. 6. 2019, 09:35:35
vodys:
Můžete vygenerovat pro ty ceny objekt přímo v javascriptu, nebo je to potřeba i parsovat nepříliš přívětivé html se seznam cen? Pak by to mohlo být jednoduché... function multiply() {
var ceny = [
{ od:0, cena: 328.15 },
{ od:100, cena: 229.71 }
];
var mnozstvi = Number(document.getElementById('QTY').value.replace(',','.'));
var nejlevnejsi = ceny.filter(r=>mnozstvi>=r.od).map(r=>r.cena).reduce((r,k)=>r<k?r:k);
document.getElementById('TOTAL').value = (mnozstvi * nejlevnejsi).toFixed(2);
} |
||
|
Časová prodleva: 5 let
|
|||
0