HUOM! Voit itse lisätä ja muuttaa sisältöä muokkaa-painikkeiden avulla

 Olet itse vastuussa tämän teoksen käytöstä aiheutuvista vahingoista Lue lisää.

JQuery

Kohteesta Wikikko - kansan taitopankki
Versio hetkellä 6. tammikuuta 2020 kello 17.51 – tehnyt 95.175.104.119 (keskustelu) (→‎Lisää kenttiä)
(ero) ← Vanhempi versio | Nykyinen versio (ero) | Uudempi versio → (ero)
Siirry navigaatioon Siirry hakuun

Yleinen[muokkaa]

https://jquery.com/download

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.

Lähde: https://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery
// 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>