5
Jquery: Wert berechnen
Hallo zusammen,
irgendwie verzweifle ich gerade an einer scheinbar einfachen Sache:
Sobald im Select Bereich "Item" etwas ausgewählt wird, dann soll das Ergebnis des Ajax Calls in das Input Field name='itemprice' geschrieben werden.
Sobald der User dann noch einen Wert im Feld name='itemquantity' einträgt, soll der Gesamtwert also Preis * Menge berechnet und ins Input Feld name='itemsum' geschrieben werden.
Zu erwähnen ist noch, dass die Anzahl der tr nicht auf eins beschränkt ist, sondern es mehrere "kleine" Formen mit diesem Aufbau auf der gleichen Seite gibt.
Dafür habe ich jetzt 2 Functions erstellt:
Doch ich scheitere gerade schon dabei, das er per Ajax erhaltene Wert in das nächste input Feld [name='itemprice'] geschrieben wird.
Und hier ist mir irgendwie nicht klar, warum er keinen Wert des Feldes [name='itemprice'] findet. Im Alert erscheint durchgehend "Undefined".
Ich sehe meinen Fehler irgendwie gerade nicht, es wäre sehr nett, wenn mir jemand weiterhelfen kann.**
Danke und Grüße
René
irgendwie verzweifle ich gerade an einer scheinbar einfachen Sache:
<tr class="item">
<td>
<select class='form-control btn-success' name="Item" onChange="getfee(this.value)">
<option value=''>Choose type of item</option>
<option value='75dc7e37-b4d3-11e8-84f0-000c291d5f5c'>Test 1</option>
<option value='75dcba34-b4d3-11e8-84f0-000c291d5f5c'>Test 2</option>
</select></td>
<td><input class="itemtd" required name='itemprice' class='form-control itemprice' type='text' value='' disabled></td>
<td><input class="itemtd" required name='itemquantity' class='form-control' type='text' value='' onChange="calcitemsum(this)" ></td>
<td><input class="itemtd" required name='itemsum' class='form-control' type='text' value='' disabled></td>
</tr>Sobald der User dann noch einen Wert im Feld name='itemquantity' einträgt, soll der Gesamtwert also Preis * Menge berechnet und ins Input Feld name='itemsum' geschrieben werden.
Zu erwähnen ist noch, dass die Anzahl der tr nicht auf eins beschränkt ist, sondern es mehrere "kleine" Formen mit diesem Aufbau auf der gleichen Seite gibt.
Dafür habe ich jetzt 2 Functions erstellt:
function getfee(str){
var form =$(this)
$.ajax({
url : "services/management/getfee.php",
type: "POST",
cache: false,
data : {q:str},
success: function(data){
$(this).nextAll("input[name='itemprice']").first().val(data);}});} function calcitemsum(str){
var quantity = $("input[name='itemquantity']").val();
var price = $("input[name='itemprice']").val();
alert(price)
;}Ich sehe meinen Fehler irgendwie gerade nicht, es wäre sehr nett, wenn mir jemand weiterhelfen kann.**
Danke und Grüße
René
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 386040
Url: https://administrator.de/contentid/386040
Printed on: April 19, 2024 at 13:04 o'clock
5 Comments
Latest comment
Moin,
das tut ja auf den Augen weh:
https://de.wikipedia.org/wiki/Netiquette#Themen - Lesbarkeit
Formatting instructions in the posts
Gruß
das tut ja auf den Augen weh:
https://de.wikipedia.org/wiki/Netiquette#Themen - Lesbarkeit
Formatting instructions in the posts
Gruß
Besser? :D
nö, was soll das Geschrei? (alles in Fett)
Changed ;)
Deine Selektoren passen hinten und vorne nicht, auch td's sind Elemente und die sind dir bei deinen Verweisen im Weg. Auch der HTML-Markup ist übrigens an einigen Stellen fehlerhaft. Ich würde das ganze zwar ganz anders angehen und den Elementen eindeutige Namen zum Ansprechen verpassen aber na gut auch das geht:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
// Eventhandler registrieren für alle selects
$("select[name='Item[]']").change(function(e) {
getfee(this);
});
// Eventhandler registrieren für Änderungen an den Mengen
$("input[name='itemquantity']").change(function(){
var price = parseFloat($(this).parents("tr.item").find("input[name='itemprice']").val());
var objSum = $(this).parents("tr.item").find("input[name='itemsum']");
var quantity = parseInt(this.value);
if (! isNaN(price) && ! isNaN(quantity)){
var sum = quantity * price;
objSum.val(sum);
}
});
});
function getfee(obj){
// Ajax call hier -> obj.value <- hat den Wert
// Beispieldaten
data = 2;
var result = data;
// Preisfeld setzen
$(obj).parents("tr.item").find("input[name='itemprice']").val(result);
}
</script>
<body>
<p>
<table>
<tr class="item">
<td><select class='form-control btn-success' name="Item">
<option value=''>Choose type of item</option>
<option value='75dc7e37-b4d3-11e8-84f0-000c291d5f5c'>Test 1</option>
<option value='75dcba34-b4d3-11e8-84f0-000c291d5f5c'>Test 2</option>
</select>
</td>
<td><input required name="itemprice" class="form-control itemprice" type="text" value="" disabled/></td>
<td><input required name="itemquantity" class="form-control" type="text" value="" /></td>
<td><input required name="itemsum" class="form-control" type="text" value="" disabled/></td>
</tr>
</table>
</p>
</body>
</html>
