Voit itse lisätä ja muuttaa sisältöä muokkaa-painikkeiden avulla
Ennen tallennusta suositellaan ottamaan kopio muokkausruudusta (ctrl-a -> ctrl-c)
Olet itse vastuussa tämän teoksen käytöstä aiheutuvista vahingoista Lue lisää.
JQuery
Siirry navigaatioon
Siirry hakuun
Yleinen[muokkaa]
Kutsuminen[muokkaa]
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <head> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script> </head> <head> <script src="jquery-3.4.1.min.js"></script><!--Omalta palvelimelta--!> </head>
Append[muokkaa]
Esimerkki 1
$(wrapper).append('<tr><td><div>Tavaran nimike '+x+'<br><input type="text" name="tuote[]" size="50" autocapitalize onkeypress="return event.keyCode != 13;"><a href="#" class="remove_field"><img src="../img/rasti.png" title="" width="15" height="15"></a><br>Määrä<br><input type="number" name="maara[]" size="50" onkeypress="return event.keyCode != 13;"><br>Kpl-hinta<br><input type="text" name="hinta[]" size="50" onkeypress="return event.keyCode != 13;"><hr><div></td></tr>');
Lisää kenttiä[muokkaa]
Lomakkeessa (form) käyttäjä voi lisätä/poistaa kenttiä, joiden tieto tallennetaan muuttujiin.
// LOMAKESIVULLA:
$(document).ready(function() {
var max_fields = 6; // enimmäismäärä
var wrapper = $(".input_fields_wrap");
var add_button = $(".add_field_button"); // Lisätään painikkeen tunniste
var x = 1;
$(add_button).click(function(e){ // kun painetaan lisätään uusi
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<tr><td><div>Tuotteen nimi<br><input type="text" name="tuotteet[]" size="50" autocapitalize onkeypress="return event.keyCode != 13;"> <a href="#" class="remove_field"><img src="../img/rasti.png" title="poista tuote" width="15" height="15"></a><br>Määrä<br><input type="number" name="maarat[]" size="4" onkeypress="return event.keyCode != 13;"><br>Kpl-hinta<br><input type="text" name="hinnat[]" size="7" onkeypress="return event.keyCode != 13;"><hr><div></td></tr>'); // lisätään kenttä
}
});
$(wrapper).on("click",".remove_field", function(e){ // kun painetaan poistetaan
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
<!-- Tuotteet --!>
<table class="table">
<thead><tr><th class="th-lg">TUOTTEET</th></tr></thead><tbody>
<tr><td><div>Tuotteen nimi<br><input type="text" name="tuotteet[]" size="50" autocapitalize onkeypress="return event.keyCode != 13;">
<br>Määrä<br><input type="number" name="maarat[]" size="4" onkeypress="return event.keyCode != 13;">
<br>Kpl-hinta<br><input type="text" name="hinnat[]" id="hinnat" size="7" onkeypress="return event.keyCode != 13;" onchange="this.value = this.value.replace(/,/g, '.')"> <!-- muutetaan pilkku pisteeksi --!>
</div></td></tr>
<tr><td><div class="input_fields_wrap"><button class="add_field_button">Lisää uusi tuote</button><font size="2"> (max X)</font></div></td></tr>
</tbody></table>
// TULOSTESIVULLA:
// Noudetaan tuotteet uudella sivulla
$tuotteet = $post['tuotteet']; // tieto tuodaan "redirect"-sivun kautta, vaihda jos suoraan
$maarat = $post['maarat'];
$hinnat = $post['hinnat'];
// Käsitellään tuotteet
foreach($tuotteet as $x) { // muodostetaan sarake jossa tuotteet allekkain
$tuotteet2 .= $x."<br>";
}
foreach($maarat as $x) {
$maarat2 .= $x."<br>";
}
foreach($hinnat as $x) {
$hinnat2 .= number_format((float)$x, 2, '.', '')."<br>"; // lisätään desimaalit hintoihin
}
// Lasketaan tuotteiden rivihinnat, määrä x hinta
$rivihinnat = array();
$len = count($maarat);
for ($i=0; $i<$len; $i++) {
$rivihinnat[] = $maarat[$i] * $hinnat[$i];
}
// lisätään desiaalit rivihintoihin
foreach($rivihinnat as $x) {
$rivihinnat2 .= number_format((float)$x, 2, '.', '')."<br>";
}
// Lasketaan tuotteet yhteensä
$yhteensa = 0;
$yhteensa = number_format((float)array_sum($rivihinnat), 2, '.', '');
$yhteensa = $yhteensa != '0' ? $yhteensa : ''; // ei näytetä jos arvo on nolla
<!-- HTML --!>
<table>
<tr><td>$tuotteet2</td><td>$maarat2</td><td>$hinnat2</td><td>$rivihinnat2</td></tr>
<tr><td></td><td></td><td>Yhteensä €</td><td>$yhteensa</td></tr>
</table>