Mit einem Input, einen anderen Input ändern?

Hallo zusammen,

ich bin relativ frisch in Javascript und brauche dringend eure Hilfe.

Ich schreibe mir grade ein Rechnungssystem in PHP und brauche dafür eure Hilfe.

Das dynamische einfügen der Produkte funktioniert perfekt. Nur möchte ich noch eine kleine Funktion einbauen.
Und zwar wenn ich den Einzelpreis änder, dass sich die Summe autom. mit ändert.

Wenn ihr wissen wollt, wie ich meine Produkte hinzufüge, dann sieht da so aus:
HTML:
<script type="text/javascript">
    $(document).ready(function() {
        var preise = new Array();	
        <?php
        $preis_query = mysql_query("SELECT * FROM produkte");
        while($preis = mysql_fetch_array($preis_query)) {
            echo "preise[".$preis['ID']."] = ".$preis['preis'].";\n";
        }
        ?>
        var sumarum = 0;
		<?php
		 if(isset($_GET['id'])){
			  $read = mysql_query("SELECT * FROM manuell WHERE rech_id='".$_GET['id']."'");
			  while($row = mysql_fetch_array($read)) {
				  $summe += $row["summe"];
			  }
		 ?>
		  $("#sumarum").text(sumarum+<?=$summe?>);
          $('#sumarum2').val(sumarum+<?=$summe?>); //updating the value of the textbox 
          $('#sumarum2').change(); 
		 <?php
		 }
		 ?>
           
		  
        var i = 0;
        $('#add').click(function (e) {
          e.preventDefault();
          i++;
          var artikel = $("#artikel :selected").html();
          var preis = preise[$("#artikel").val()];
          var menge = $("#menge").val();
          var summe = preis * menge;
          sumarum = sumarum + summe;
          $('#inputs').append("<tr><td><input size=\"25\" type=\"text\" name=\"name_"+i+"\" id=\"name_"+i+"\" value=" + artikel + " /></td><td><input size=\"1\" type=\"text\" name=\"menge_"+i+"\" id=\"menge_"+i+"\" value=" + menge + " /></td><td><input size=\"5\" type=\"text\" name=\"preis_"+i+"\" id=\"preis_"+i+"\" value=\"" + preis + "\" /> €</td><td><input size=\"5\" type=\"text\" name=\"summe_"+i+"\" id=\"summe_"+i+"\" value=\"" + summe + "\" /> €</td></tr>");
		  <?php if(isset($_GET['id'])){ ?>
          $("#sumarum").text(sumarum+<?=$summe?>);
          $('#sumarum2').val(sumarum+<?=$summe?>); //updating the value of the textbox 
          $('#sumarum2').change();  
		  <?php }else{ ?>
		  $("#sumarum").text(sumarum);
          $('#sumarum2').val(sumarum); //updating the value of the textbox 
          $('#sumarum2').change();  
		  <?php } ?>
        });
		 
        $('#save').click(function() {
            $('#add').append('<input type="hidden" name="eintraege" value="'+i+'"/>');
        });
    });
    
    </script>

So, und nun bin ich auf der Suche wie ich mittels der Einzelpreis Input den Gesamten Preis anpasse.
Hätte da evtl. einer Lust mir zu helfen? Wäre echt nett :)
 
Hi,

leider funktioniert das nicht, hängt das damit zusammen, dass ich die Inputs dynamisch hinzufüge?

HTML:
$('#inputs').append("<tr><td><input size=\"25\" type=\"text\" name=\"name_"+i+"\" id=\"name_"+i+"\" value=" + artikel + " /></td><td><input size=\"1\" type=\"text\" name=\"menge_"+i+"\" id=\"menge_"+i+"\" value=" + menge + " /></td><td><input size=\"5\" type=\"text\" name=\"preis_"+i+"\" id=\"preis_"+i+"\" value=\"" + preis + "\" /> €</td><td><input size=\"5\" type=\"text\" name=\"summe_"+i+"\" id=\"summe_"+i+"\" value=\"" + summe + "\" /> €</td></tr>");
		  $("#preis_"+i).on("change", function() {
		  	var valueOfInput1 =$("#summe_"+i).val();
		  	$("#summe_"+i).val(valueOfInput1);
		  });

So sieht das jetzt aus... Klappt halt nicht
 
Gib jedem der Textfelder eine CSS Klasse mit (immer die selbe) und du kannst über diese auf alle zugreifen!
 
Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
i = 0;

$(document).ready(function(){

$("body").on("change", ".rechnen", function() {
	id = $(this).attr("id").indexOf("_");
	id = $(this).attr("id").slice(id + 1);

	if (isNaN(parseFloat($("#menge_" + id).val())) == false && isNaN(parseFloat($("#preis_" + id).val())) == false) {
		$("#summe_" + id).val(parseFloat($("#menge_" + id).val()) * parseFloat($("#preis_" + id).val()));
	}

});

});

function neu() {
i++;

$('#inputs').append("<tr><td><input size='5' type='text' name='name_" + i + "' id='name_" + i + "' value='' /></td><td><input size='5' type='rechnen' class='text' name='menge_" + i + "' id='menge_" + i + "' value='' /></td><td><input size='5' type='text' class='rechnen' name='preis_" + i + "' id='preis_" + i + "' value='' /> €</td><td><input size='5' type='text' name='summe_" + i + "' id='summe_" + i + "' value='' /> €</td></tr>");

}
</script>

<table id="inputs">
	<tr>
		<td><input type="text" name="name_0" id="name_0" value="" size="5" maxlength="50" /></td>
		<td><input type="text" class="rechnen" name="menge_0" id="menge_0" value="" size="5" /></td>
		<td><input type="text" class="rechnen" name="preis_0" id="preis_0" value="" size="5" /> €</td>
		<td><input type="text" name="summe_0" id="summe_0" value="" size="5" /> €</td>
	</tr>
</table>
<div onclick="neu()">ADD</div>

In diesem Beispiel bekommen die Textfelder Menge und Preis die Klasse "rechnen" zugewiesen. Wird nun in einem dieser Felder der Wert geändert, wird neu gerechnet.

Hoffe du verstehst was sonst noch so passiert, wenn nicht, einfach fragen.
 
Hi,

dein Lösungsweg gefällt mir, nur fehlt mir noch die Gesamte Übersicht der Kosten.
Ich wüsste auch nicht wie ich anhand deines Beispiels sowas realisieren könnte.

Ich habe meins etwas erweitert, und nunja, wenn ich ein Preis änder, dann wird die Gesamtsumme falsch ausgegeben.

HTML:
        var i = 0;
        $('#add').click(function (e) {
          e.preventDefault();
          i++;
          var artikel = $("#artikel :selected").html();
          var preis = parseFloat(preise[$("#artikel").val()]);
          sumarum = sumarum + preis;
          $('#inputs').append("<tr><td><input size=\"25\" type=\"text\" name=\"name_"+i+"\" id=\"name_"+i+"\" value=" + artikel + " /></td><td><input size=\"5\" type=\"text\" name=\"preis_"+i+"\" id=\"preis_"+i+"\" value=\"" + preis + "\" /> €</td></tr>");
		  
		  <?php if(isset($_GET['id'])){ ?>
          $('#sumarum').val(sumarum+<?=$summe?>); //updating the value of the textbox 
          $('#sumarum').change();  
		  <?php }else{ ?>
          $('#sumarum').val(sumarum); //updating the value of the textbox 
          $('#sumarum').change();  
		  <?php } ?>
		  
		  var $sumarum = $("#sumarum"); //Ändern
			$("#preis_"+i+"").keyup(function() { //Eingabe
				var value = sumarum + parseFloat($(this).val());
				$sumarum.val(value);
				$sumarum.change();
			});
        });

Weiß einer wie man das ändern könnte, damit das funktioniert. Sonst lass ich es einfach sein und man muss den Gesamtpreis selber ausrechnen...
 
Hier das ganze mit Berechnung des Gesamtbetrages:

HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
i = 0;

$(document).ready(function(){

$("body").on("change", ".rechnen", function() {
    id = $(this).attr("id").indexOf("_");
    id = $(this).attr("id").slice(id + 1);

    if (isNaN(parseFloat($("#menge_" + id).val())) == false && isNaN(parseFloat($("#preis_" + id).val())) == false) {
        $("#summe_" + id).val(parseFloat($("#menge_" + id).val()) * parseFloat($("#preis_" + id).val()));
    }

var summe = 0;
    $.each($(".betrag"), function() {
        summe = summe + parseFloat($(this).val());
    });

    if (!isNaN(summe)) $("#gesamtbetrag").val(summe);

});

});

function neu() {
i++;

$('#gesamt').before("<tr><td><input size='5' type='text' name='name_" + i + "' id='name_" + i + "' value='' /></td><td><input size='5' type='text' class='rechnen' name='menge_" + i + "' id='menge_" + i + "' value='' /></td><td><input size='5' type='text' class='rechnen' name='preis_" + i + "' id='preis_" + i + "' value='' /> €</td><td><input size='5' type='text' class='betrag' name='summe_" + i + "' id='summe_" + i + "' value='' readonly /> €</td></tr>\n");

}
</script>

<table>
	<tr>
		<td>Text</td>
		<td>Menge</td>
		<td>Stückpreis</td>
		<td>Gesamtpreis</td>
	</tr>
    <tr>
        <td><input type="text" name="name_0" id="name_0" value="" size="5" maxlength="50" /></td>
        <td><input type="text" class="rechnen" name="menge_0" id="menge_0" value="" size="5" /></td>
        <td><input type="text" class="rechnen" name="preis_0" id="preis_0" value="" size="5" /> €</td>
        <td><input type="text" class="betrag" name="summe_0" id="summe_0" value="" size="5" readonly /> €</td>
    </tr>
    <tr id="gesamt">
        <td>Gesamtbetrag</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td><input type="text" id="gesamtbetrag" name="gesamtbetrag" value="" size="5" readonly /> €</td>
    </tr>
</table>
<div onclick="neu()">ADD</div>

Die Felder für den Gesamtbetrag haben jetzt auch eine Klasse über die dann die Berechnung gesteuert wird. Wichtig ist das diese Klasse auch bei der Tabellenzeile angegeben wird die dynamisch hinzugefügt wird!

Das Hinzufügen wird hier nicht mehr mit "append" sondern mit "before" gemacht. Dadurch wird die neue Zeile immer vor der Zeile mit dem Gesamtbetrag eingefügt.
 
Zuletzt bearbeitet:

Neue Beiträge

Zurück