Jquery: Wert berechnen

Hallo zusammen,

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 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:

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);}});}	  

Doch ich scheitere gerade schon dabei, das er per Ajax erhaltene Wert in das nächste input Feld [name='itemprice'] geschrieben wird.

function calcitemsum(str){
	var quantity = $("input[name='itemquantity']").val();  
	var price = $("input[name='itemprice']").val();  
	alert(price)
	;}

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é

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 386040

Url: https://administrator.de/contentid/386040

Ausgedruckt am: 25.11.2024 um 14:11 Uhr

5 Kommentare

Neuester Kommentar

Moin,

das tut ja auf den Augen weh:
https://de.wikipedia.org/wiki/Netiquette#Themen - Lesbarkeit
Formatierungen in den Beiträgen

Gruß

Besser? :D

Zitat von @Lorderich:

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>