javascript: dynamisch value von textbox ändern?

L

leo-magic

Aktives Mitglied
Thread Starter
Dabei seit
24.12.2004
Beiträge
1.178
Reaktionspunkte
4
Hallo!

Ich suche nach einer Möglichkeit, drei text-inputs "miteinander zu koppeln"

Beispiel:

box1: 100
box2: 50%
box3: 50 ->automatisch berechnet

box1: 100
box2: 50% ->automatisch berechnet
box3: 50

box2 bzw. box3 soll automatisch berechnet werden. Das Resultat soll gleich nach der Eingabe in das andere Feld erscheinen und bei Änderungen ohne reload aktualisiert werden.

Kann mir jemand weiterhelfen?

Danke!!
Léo
 
jQuery klingt gut. Kannst Du mir vielleicht sagen, wie die Funktion heisst?

Danke,
Léo
 
Wow! Viielen vielen Dank! Funktioniert super!!

Gruss,
Léo
 
Ou. da habe ich mich zu früh gefreut... Ich benutze für die Felder iMask. ( http://zendold.lojcomm.com.br/imask/ )
Wenn ich iMask.js und mootools.js vor jquery.js lade, funktioniert das iMask nicht mehr. Dafür Dein Script. Umgekehrt iMask aber Dein Script bewirkt nichts mehr.

Hast Du eine Idee wie ich das beheben könnte?

Danke!!
Léo
 
ja! super, wusste gar nicht dass es das auch für jquery gibt!

Problem: Dein Script sieht die . als Dezimalstellen und rechnet zB. bei 10.000 -> 10...

Léo
 
ein Punkt ist halt ein Punkt... da biegt iMask wohl was zurecht...
wenn du Zehntausend eingeben willst, musst du wohl oder übel 10000 eingeben. und sonst musst du vor dem berechnen halt noch den Punkt entfernen mittels replace() o.ä.
 
hmmm... sorry wenn ich da nachfrage aber habe von Javascript null Ahnung... in PHP wärs mir klar gewesen, denn Punkt rauszulöschen aber in JS... Habe die Funktion replace() gefunden. Nur wo soll ich die im Script einsetzen??

Danke!!! (und sorry für meine Unkenntnis...)
Léo
 
ahhhh.. habs sogar geschafft!! super!! Kann ich nach dem berechnen wieder die Punkte einfügen?

Also das Script würde dann:

Punkte entfernen -> berechnen -> Punkte wieder einfügen und ausgeben

Danke!!
Léo
 
Oke... und dass habe ich auch geschafft. Was man nicht alles kann als absoluter JS-Anfänger dank google... :p

Code: 
Number.prototype.formatMoney = function(c, d, t){
var n = this, c = isNaN(c = Math.abs(c)) ? 2 : c, d = d == undefined ? "," : d, t = t == undefined ? "." : t, s = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
   return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
 };

Code: 
endWert = endWert.formatMoney(0, '.', ',');

Funktioniert super!
Aber: nur im Millionen bereich. Ab 1 Milliarde versagt das Script und rechnet nicht mehr. Wieso?

Danke!!
Léo
 
Gut! Auch das konnte ich lösen...

Code: 
var totalWert = totalWert.replace(/\./g, "");
Ansonsten wurde immer nur der erste Punkt gelöscht, die weiteren aber nicht.

Gruss,
Léo
 
Hallo!

Habe doch noch eine Frage...
Ich habe nun eine ganze Tabelle mit 10 Zeilen. In jeder Zeile soll das Script funktionieren.
Gäbe es da einen einfachen Weg, das Script für alle Zeilen funktionstüchtig zu machen?

Danke!
Léo
 
dazu musst du den html und den jquery code ein wenig umbauen, um von den ids wegzukommen und mit class zu arbeiten...
habe das Beispiel in meinem Link angepasst, hier der Code dazu, damit dieser Thread auch in 2 Jahren noch Sinn macht :)

Beispiel:

Code: 
    <tr>
        <td><input class='input1'></td>
        <td><input class='input2'></td>
        <td><input class='input3'></td>
    </tr>
    <tr>
        <td><input class='input1'></td>
        <td><input class='input2'></td>
        <td><input class='input3'></td>
    </tr>
    <tr>
        <td><input class='input1'></td>
        <td><input class='input2'></td>
        <td><input class='input3'></td>
    </tr>

und jQuery:

Code: 
		$(document).ready(function(){
			$(".input1").keyup(function() {
				var totalWert = $(this).val();
				var prozentWert = $(this).parent().parent().find(".input2").val();
				var endWert = $(this).parent().parent().find(".input3").val();
				
				if(''!=prozentWert)
				{
					endWert = totalWert / 100 * prozentWert;
					$(this).parent().parent().find(".input3").val(endWert);
				}
				if(''!=endWert)
				{
					prozentWert = endWert / totalWert * 100;
					$(this).parent().parent().find(".input2").val(prozentWert);
				}
			});

			$(".input2").keyup(function() {
				var totalWert = $(this).parent().parent().find(".input1").val();
				var prozentWert = $(this).val();
				var endWert = $(this).parent().parent().find(".input3").val();
				
				if(''!=totalWert)
				{
					endWert = totalWert / 100 * prozentWert;
					$(this).parent().parent().find(".input3").val(endWert);
				}
			});

			$(".input3").keyup(function() {
				var totalWert = $(this).parent().parent().find(".input1").val();
				var prozentWert = $(this).parent().parent().find(".input2").val();
				var endWert = $(this).val();
				
				if(''!=totalWert)
				{
					prozentWert = endWert / totalWert * 100;
					$(this).parent().parent().find(".input2").val(prozentWert);
				}
			});
		});
 
kennst du den Danke-Button unten links an den Beiträgen? ;)
Ich hoffe, es funktioniert jetzt wie gewünscht... solche Scripts bewahre ich für mich immer auf, man weiss ja nie, wann man etwas brauchen kann... jedoch ist jQuery, wie du siehst, so einfach, dass es auch schnell getippt ist.
 
Jetzt kenn ich ihn den "Danke" button ;)

Habe allerdings noch ein Problem:

Ich habe die einzelnen Zeilen mit $('.hide01').hide(); ausgeblendet.
Bei einem Klick in eine Checkbox werden sie mit .show() eingeblendet. Nur bei diesen funktioniert Dein Script nicht...

Wieso?

Danke,
Léo
 
Hmm, bin leider noch immer nicht weitergekommen.
Denke aber, dass es an
Code: 
$(this).parent().parent().find(".input2").val();
liegt.
Da nun neu der HTML Code so aussieht:
Code: 
<td><div class="hide01"><input type="text" size="6" name="input01_2" id="input01_2" value="4,71" class="input2"/>%</div></td>

Jemand einen Tipp?

Danke!
Léo
 
Zurück
Oben Unten