Zahl mit plus oder minus hoch- bzw. runterzählen ERLEDIGT

Hallo, ich benötige für ein Formular eine spezielle Funktion.

Folgendes muss ich realisieren. Ich hab ein Feld, wo eine Zahl steht. davor soll ein "-" und dahiner ein "+" stehen. In der Mitte steht als Anfangswert eine "0".
Der User soll nur die Möglichkeit haben entweder auf das + oder - zu klicken. Die Zahl soll sich dann dementsprechend erhöhen bzw. verringern.

Wenn das Formular dann abgeschickt wird, soll der Empfänger die ausgewählte Zahl erhalten. Die Zahl darf aber vom User nicht eingetragen werden.

Wie kann ich sowas lösen?

Nimm ein normales Formularfeld und gebe den Typ "Dezimalzahl" an.

Hallo,

ich hab ein Textfeld erstellt und bei Eingabeprüfung "Numerische Zeichen" angegeben.
Aber leider hab ich nicht das gewünschte Ergebnis. Hier kommt dann eine Art Select menü, wo ich dann mit Pfeil auf oder Pfeil ab auswählen kann.

Es sollte aber so aussehen:

+ 0 -

Wobei hier nur auf + oder - geklickt werden darf. Dementsprechend ändert sich dann die Zahl dazwischen.

Dann hatte ich es falsch verstanden.
Es sieht mir so nach einem eigenen Formular-Widget aus, was Du Dir programmieren lassen müßtest.

Hallo, ich hab was gefunden und das wär genau das was ich bräuchte. Mein Problem ist nur, wie bekomme ich weitere Buttons in mein Formular:

HTML-Code:

---

<div class="value-change">
    <button type="button" class="value-decrement">–</button>
    <input type="text" value="0" size="3" />
    <button type="button" class="value-increment">+</button>
</div>

---

Code:

---

$(document).ready(function () {
    $('.value-change').each(function () {
        $('button.value-decrement', this).click(function () {
            var value = new Number($(this).siblings('input').attr('value'));
            value = value - 1;
            $(this).siblings('input').attr('value', value);
        });
        $('button.value-increment', this).click(function () {
            var value = new Number($(this).siblings('input').attr('value'));
            value = value + 1;
            $(this).siblings('input').attr('value', value);
        });
    });       
});

---

So, nun hatte ich eine Idee. Ich hab ein neues JQuery-Template mit dem Code angelegt und in meine Seite eingebunden.

Dann hab ich den HTML-Code als HTML in mein Formular eingefügt. Auf der Homepage sieht es gut aus und es funktioniert auch.

ABER

Leider kommt der Wert (die Zahl, die ich ausgewählt habe) nicht per E-Mail an. Kann mir hier jemand sagen, was hier noch fehlt?

HTML-Code:

---

<div class="widget value-change">
    <button type="button" class="value-decrement submit" id="ctrl_21">–</button>
    <input type="text" name="Bestellung1" id="ctrl_20" class="text" value="0">
    <button type="button" class="value-increment submit" id="ctrl_22">+</button>
</div>

---

So, nun hab ich es geschaft. Nach einiger durchsicht und mit änderungen von Templates.

und wenn Du jetzt noch Deine Lösung postest, habe andere mit der gleichen Fragestelllung auch etwas davon :)

Ich habe folgendes gemacht.

Ich hab das Template "form_row.html" neu erstellt und den <Div> Code am Anfang und am Ende gelöscht und dann als "form_row_spezial.html5" abgespeichert.
Weiters hab ich das Template "form_textfield.html5" neu erstellt und in der 1. Zeite ('form_row') auf ('form_row_spezial') ausgetauscht und als form_textfield_spezial.html5 abgespeichert.

Im Formulargenerator hab ich jetzt ein HTML mit folgendem Code erstellt:

HTML-Code:

---

<div class="widget widget-text value-change">
    <button type="button" class="value-decrement submit" id="ctrl_21">–</button>

---

Dannach hab ich ein Textfeld eingefügt und der CSS-Klasse "bestellung" gegeben.
Weiters hab ich hier bei "Individuelles Template" das "form_textfield_spezial(global)" ausgewählt.

Dannach hab ich wieder einen HTML-Code eingegeben:

HTML-Code:

---

<button type="button" class="value-increment submit" id="ctrl_22">+</button>
</div>

---

Unter Templates hab ich eine neue Datei erstellt mit dem Namen "j_formular_js.html5" und folgenden Inhalt hineingegeben:

Code:

---

<script>
$(document).ready(function () {
    $('.value-change').each(function () {
        $('button.value-decrement', this).click(function () {
            var value = new Number($(this).siblings('input.bestellung').attr('value'));
            value = value - 1;
            $(this).siblings('input').attr('value', value);
        });
        $('button.value-increment', this).click(function () {
            var value = new Number($(this).siblings('input.bestellung').attr('value'));
            value = value + 1;
            $(this).siblings('input.bestellung').attr('value', value);
        });
    });       
});
</script>

---

Diese Datei habe ich noch in meinem Seitenlayout eingebunden und fertig.

Vielleicht kann dies ja auch noch jemand benötigen, wobei die ID=".." im HTML-Bereich nicht wichtig ist. Diese darf sich (glaube ich) nicht mit den anderen ID's, welche automatisch angelegt werden, überschneiden.

Ein kleines Problem habe ich noch, und hab auch noch nichts dementsprechend gefunden:
Ich möchte in der JQuery-Datei hier ein Minimun von 0 haben und ein Maximum von 9, sonst könnte der User auch -3 oder 24 z.B. stehen haben. Dies möchte ich noch vermeiden. Vielleicht hat jemand eine Idee.

So, den letzten Teil hab ich auch noch gelöst.

So sieht nun die JQuery-Datei aus. Der User kann nicht unter 0 und nicht höher als 10 auswählen:

Code:

---

<script>
$(document).ready(function () {
    $('.value-change').each(function () {
        $('button.value-decrement', this).click(function () {
            var min = 0
            var value = new Number($(this).siblings('input.bestellung').attr('value'));
            value = value - 1;
            if (value >= min) {
                $(this).siblings('input').attr('value', value);
            } else {
            return;
            }
        });
        $('button.value-increment', this).click(function () {
            var max = 10;
            var value = new Number($(this).siblings('input.bestellung').attr('value'));
            value = value + 1;
            if (value <= max) {   
                $(this).siblings('input.bestellung').attr('value', value);
            } else {
            return;
            }
        });
    });       
});
</script>

---

Hallo,
danke für die tolle Beschreibung.
Ich habe das gut reproduzieren können, habe allerdings noch ein kleines Problem.

Sobald ich die Zahl händisch eintippe, lässt sich diese nicht mehr mit den Button + oder - verändern.


Um einen Lösungsvorschlag wäre ich sehr dankbar.

Code:

---

<script>
$(document).ready(function () {
    $('.value-change').each(function () {
        $('button.value-decrement', this).click(function () {
            var min = 0
            var value = new Number($(this).siblings('input.bestellung').val());
            value = value - 1;
            if (value >= min) {
                $(this).siblings('input').val(value);
            } else {
            return;
            }
        });
        $('button.value-increment', this).click(function () {
            var max = 10;
            var value = new Number($(this).siblings('input.bestellung').val());
            value = value + 1;
            if (value <= max) {   
                $(this).siblings('input.bestellung').val(value);
            } else {
            return;
            }
        });
    });       
});
</script>

---

Getter und Setter via

Code:

---

.val()

---

geändert. Getestet - sollte nun gehen.