Variablen addieren und Ergebnis automatisch in einem Textfeld anzeigen lassen

hanna765 · 20. März 2014

Hallo Quaese,

Danke für deine Hilfe

im Prinzip hätte ich in meinem Script nur:

result3 = val5/1 + val6/1;

mit:

result3 = result + result2;

ersetzen müssen oder?

Funktionieren tut es danach nämlich auch.

Vader · 24. März 2014

Hallo,
ein Thema was ich gerade gut gebrauchen kann

Ich habe eine Frage zu dem von BocaSpanky geposteten Code:

Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript"> 
    $(document).ready(function() {
        $('#m4j-188').change(function() { // WENN SELECT CHANGED
            $('#m4j-373').val(''); // TEXTFELD LEEREN
            var selectValue = $(this).val(); // VALUE AUS SELECT
            $('#m4j-373').val(selectValue); // TEXTFELD FÜLLEN 
        });
    });
</script>
</head>
<body>
<form name="m4jForm" method="post">
<select id="m4j-188" class="m4jSelection" lang="0" style="width: 125px;" name="m4j-188">
    <option value="">Anzahl waehlen</option>
    <option value="2.50">1x</option>
    <option value="5.00">2x</option>
    <option value="7.50">3x</option>
    <option value="10.00">4x</option>
    <option value="12.50">5x</option>
  </select>
<input type="text" id="m4j-373" name="m4j-373" value=""/><br>
</form>
</body>
</html>

In dieser Form übergibt er mir die Werte 2.50, 5.00, 7.50 usw. an das Textfeld.

Was muss man ändern, damit er 1x, 2x, 3x usw. übergibt (ohne die value Zahlen entfernen zu müssen)?

sheel · 26. März 2014

Eben das value wird ja übergeben...das muss geändert werden.
Man könnte höchstens beim Absenden (onsubmit) das ganze mit JS noch ändern.

Vader · 26. März 2014

Danke sheel.

Ich habe es hinbekommen:

Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</script>
<script type="text/javascript"> 
    $(document).ready(function() {
        $('#m4j-188').change(function() { // WENN SELECT CHANGED
            $('#m4j-373').val(''); // TEXTFELD LEEREN
            var selectValue = $('select#m4j-188 :selected').text(); // TEXT AUS SELECT
            $('#m4j-373').val(selectValue); // TEXTFELD FÜLLEN 
            $('#m4j-373').value; update(); // TEXTFELD UPDATE
                    });
    });
</script>

Bleibt nur noch ein Problem:

Er schreibt die Option

HTML:

<option value="">Anzahl waehlen</option>

mit in das Textfeld.

Kann man irgendwie verhindern, dass die Option "Anzahl waehlen" in das Textfeld übertragen wird?
Ich möchte nämlich nicht, dass diese Option beim Absenden des Formulars mit gesendet wird.

BocaSpanky · 27. März 2014

Hi, poste dochmal deinen ganzen Code incl. Html.

Vader · 27. März 2014

OK.

Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</script>
<script type="text/javascript"> 
    $(document).ready(function() {
        $('#m4j-188').change(function() { // WENN SELECT CHANGED
            $('#m4j-373').val(''); // TEXTFELD LEEREN
            var selectValue = $('select#m4j-188 :selected').text(); // TEXT AUS SELECT
            $('#m4j-373').val(selectValue); // TEXTFELD FÜLLEN 
            $('#m4j-373').value; update(); // TEXTFELD UPDATE
                    });
    });
</script>
</head>
<body>
<form name="m4jForm" method="post">
<select id="m4j-188" class="m4jSelection" style="width: 125px;" name="m4j-188">
    <option value="">Anzahl waehlen</option>
    <option value="2.50">1x</option>
    <option value="5.00">2x</option>
    <option value="7.50">3x</option>
    <option value="10.00">4x</option>
    <option value="12.50">5x</option>
  </select>
<input type="text" id="m4j-373" name="m4j-373" value=""/><br>
</form>
</body>
</html>

BocaSpanky · 27. März 2014

Hi,

grundsätzlich übergibt mann eigentlich die Value aus dem Dropdown:

var selectValue = $('select#m4j-188 :selected').text(); // TEXT AUS SELECT
geändert in:
var selectValue = $('select#m4j-188 :selected').val(); // VALUE AUS SELECT

PHP:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</script>
<script type="text/javascript"> 
    $(document).ready(function() {
        $('#m4j-188').change(function() { // WENN SELECT CHANGED
			$('#m4j-373').val(''); // TEXTFELD LEEREN
            var selectValue = $('select#m4j-188 :selected').val(); // TEXT AUS SELECT
            $('#m4j-373').val(selectValue); // TEXTFELD FÜLLEN 
            $('#m4j-373').value; // TEXTFELD UPDATE
        });
    });
</script>
</head>
<body>
<form name="m4jForm" method="post">
<select id="m4j-188" class="m4jSelection" style="width: 125px;" name="m4j-188">
    <option value="">Anzahl waehlen</option>
    <option value="2.50">1x</option>
    <option value="5.00">2x</option>
    <option value="7.50">3x</option>
    <option value="10.00">4x</option>
    <option value="12.50">5x</option>
  </select>
<input type="text" id="m4j-373" name="m4j-373" value=""/><br>
</form>
</body>
</html>

Ich weiß zwar nicht ob das in deinem Sinn istm aber so würds ich machen.

Natürlich kann mann auch den text() übergeben. Muss dann aber im Scriptteil abfragen ob der Wert dann z.B. ne bestimmte länge hat oder nem String gleicht.

So z.B.

PHP:

<script type="text/javascript"> 
    $(document).ready(function() {
        $('#m4j-188').change(function() { // WENN SELECT CHANGED
	    $('#m4j-373').val(''); // TEXTFELD LEEREN
            var selectValue = $('select#m4j-188 :selected').text(); // TEXT AUS SELECT
            
            if(selectValue == 'Anzahl waehlen') {
                selectValue = '';
            }

            $('#m4j-373').val(selectValue); // TEXTFELD FÜLLEN 
            $('#m4j-373').value; // TEXTFELD UPDATE
        });
    });
</script>

Grüße

Vader · 27. März 2014

Ist genau was ich gebraucht habe

Kent94 · 5. Dezember 2014

Guten Tag,

habe ein Problem und zwar möchte ich mehre Select Felder zusammen gerechnet haben sprich z.B Feld 1 Ram 1 Core (2,50 €) + Feld 2 GB 1 GB (2,50 €) = 5 € jedoch berechnet er nicht 5 sondern lässt 2 € stehen er nimmt immer nur Feld 1 oder Feld 2 ..

Code

Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $('#m4j-188, #m4j-189').change(function() { // WENN SELECT CHANGED
            $('#m4j-373').val(''); // TEXTFELD LEEREN
            var selectValue = $(this).val(); // VALUE AUS SELECT
            $('#m4j-373').val(selectValue); // TEXTFELD FÜLLEN
        });
    });
</script>
<form name="m4jForm" method="post">

<table style="text-align: left; width: 100%;" border="1"
cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td>Core&acute;s</td>
      <td>
<select id="m4j-188" class="m4jSelection" lang="0" style="width: 125px;" name="m4j-188">
    <option value="">Anzahl waehlen</option>
    <option value="2.50">1 Core (2,50 €)</option>
    <option value="5.00">2 Core (5,00 €)</option>
    <option value="7.50">3 Core (7,50 €)</option>
    <option value="10.00">4 Core</option>
    <option value="12.50">5 Core</option>
    </select>
      </td>
    </tr>
    <tr>
      <td>RAM</td>
      <td>
<select id="m4j-189" class="m4jSelection" lang="0" style="width: 125px;" name="m4j-189">
    <option value="">Anzahl waehlen</option>
    <option value="2.50">1 GB (2,50 €)</option>
    <option value="5.00">2 GB (5,00 €)</option>
    <option value="7.50">3 GB (7,50 €)</option>
    <option value="10.00">4 GB</option>
    <option value="12.50">5 GB</option>
    </select>
      </td>
    </tr>
    <tr>
      <td>SWAP</td>
      <td></td>
    </tr>
    <tr>
      <td>Speicher</td>
      <td></td>
    </tr>
    <tr>
      <td>IP-Adressen</td>
      <td></td>
    </tr>
    <tr>
      <td>Traffic</td>
      <td></td>
    </tr>
  </tbody>
</table>
</form>

<input type="text" id="m4j-373" name="m4j-373" value=""/><br>

</form>

Quaese · 6. Dezember 2014

Hi,

du könntest ein Array erstellen, in dem die IDs aller Felder enthalten sind, die in die Berechnung einfließen sollen. Tritt ein change-Event ein, wird dieses Array durchlaufen und die Werte der Felder addiert.

Beispiel:

Javascript:

$(document).ready(function() {
    // ID der Felder, die in die Berechnung einfließen sollen
    var calcFields = ['#m4j-188', '#m4j-189'];

    $('#m4j-188, #m4j-189').change(function() { // WENN SELECT CHANGED
        var result = 0;

        $.each(calcFields, function(index, value) {
            var val = Number($(value).val());

            // Werte der Felder addieren
            result += isNaN(val) ? 0 : val;
        });

        // Ergebnis in Textfeld schreiben
        $('#m4j-373').val(result);
    });
});

Ciao
Quaese

Variablen addieren und Ergebnis automatisch in einem Textfeld anzeigen lassen

hanna765

Grünschnabel

Vader

Grünschnabel

sheel

I love Asm

Vader

Grünschnabel

BocaSpanky

Mitglied

Vader

Grünschnabel

BocaSpanky

Mitglied

Vader

Grünschnabel

Kent94

Mitglied

Quaese

Moderator

Neue Beiträge