Wert von click buttons aus Formular an Variable übergeben

Fragezeichen · 17 November 2012

Hallo allerseits.
Ich würde gerne Werte (entweder 5 oder 10) zweier click buttons aus einem Formular (frm) an die Variable D übergeben und dann anzeigen (alert).

Code:

function CalValue()
{
    
alert(D);}



<form name="frm">
<input type="button" name ="Button1" id="Button1" onclick="CalValue()" value ="5">
<input type="button" name ="Button2" id="Button2" onclick="CalValue()" value ="10">
</form>

Irgendwie steh ich da auf dem Schlauch trotz stundenlangem Googlen.

Irgendwie soll das mit document.getElementbyId gehen, leider scheitere ich aber bei allen Versuchen. Kann mir bitte jemand Hilfestellung leisten?

bdt600 · 17 November 2012

Übergebe einfach die ID

Code:

<input type="button" name ="Button1" id="Button1" onclick="CalValue('Button1')" value ="5">
<input type="button" name ="Button2" id="Button2" onclick="CalValue('Button2')" value ="10">

Code:

function CalValue(id)
{
   alert(id);
}

Fragezeichen · 17 November 2012

Danke, bdt600, für Deine schnelle Antwort. Bei mir wird allerdings als Ergebnis "undefined" angezeigt.??:-?

Außerdem würde ich das Ergebnis noch gerne an eine Variable übergeben um die Werte noch weiter zu berechnen.
Das Formular sieht als insgesamt so aus:

Code:

<form name="frm1">
<input type="button" name ="Button1" id="Button1" onclick="CalValue('Button1')" value ="5">
<input type="button" name ="Button2" id="Button2" onclick="CalValue('Button2')" value ="10">
<input type="text" name="q1" id="q1" onkeyup="CalValue();">
<input type="text" name="result1" id="result1" readonly>
<input type="reset" name="reset" id="reset" value="Reset">
</form>

Code:

function CalValue()
{


[COLOR=#00ff00]var D1 = ..............[/COLOR]


var q1 = frm1.q1.value;

if (q1.indexOf(",") > -1)

{q1 = q1.replace(",", ".");}

var result1 = q1 * D1;

var two1 = result1.toFixed(2);

var value1 = two1.replace(".", ",");

frm1.result1.value = value1;

if (frm1.result1.value == "NaN")
{frm1.result1.value = "???";}
                }

Mir fehlt jetzt nur noch die Übergabe der click button Werte an die Variable D.
Das Ganze sollte auch mit mehr als zwei click buttons möglich sein.

bdt600 · 17 November 2012

onclick="CalValue('Button1')

function CalValue1()

Fragezeichen · 17 November 2012

bdt600 schrieb:
onclick="CalValue('Button1')

function CalValue1()

:?: Wie soll ich das verstehen?

bdt600 · 17 November 2012

Ich knall' hier gleich mit dem Kopf auf die Tischplatte!!! :(

Du rufst ein Funktion CalValue mit onClick auf. Deine Funktion heißt aber CalValue1 und der fehlt der Parameter!

Fragezeichen · 17 November 2012

bdt600 schrieb:
Ich knall' hier gleich mit dem Kopf auf die Tischplatte!!! :(

Du rufst ein Funktion CalValue mit onClick auf. Deine Funktion heißt aber CalValue1 und der fehlt der Parameter!

ok, stimmt, Danke, wird gleich editiert. Armer Kopf:lol:

Das beantwortet aber noch immer nicht meine ursprüngliche Frage.

bdt600 · 17 November 2012

Fragezeichen schrieb:
Das beantwortet aber noch immer nicht meine ursprüngliche Frage.

Warum nicht???

Fragezeichen schrieb:
Irgendwie soll das mit document.getElementbyId gehen

Wenn du die Id übergibst, geht auch getElementbyId

Fragezeichen · 17 November 2012

bdt600 schrieb:
Warum nicht???

Wenn du die Id übergibst, geht auch getElementbyId

alert(id) spuckt bei mir nur "undefined" aus:-?

bdt600 · 17 November 2012

Da wir dein aktuelles Script nicht kennen: kein Kommentar

Fragezeichen · 17 November 2012

bdt600 schrieb:
Da wir dein aktuelles Script nicht kennen: kein Kommentar

Code:

function CalValue(id) {  alert(id);}

Im Post#2 hattest Du das vorgeschlagen, Ergebnis ist bei mir "undefined".

Ich mag ja als Anfänger den Wald vor lauter Bäumen nicht sehen, aber solange Dein Vorschlag der id Übergabe nicht klappt, hilft auch der Rest des Scriptes nicht, abgesehen davon, daß der Code in Post #3 bereits vorliegt.
Also bitte, falls Du eine Lösung kennst, dann poste sie hier.

Tronjer · 17 November 2012

So funzt es. Wenn Du this.id übergibst, brauchst du den Funktionsaufruf nicht jedes mal anzupassen.

Code:

<input type="button" name ="Button1" id="Button1" onclick="calValue(this.id);" value ="5">

Code:

[FONT=Monaco][COLOR=#931a68]function[/COLOR] calValue(id)[/FONT]
[FONT=Monaco]{[/FONT]
[FONT=Monaco]  [COLOR=#931a68]var[/COLOR] wert = document.getElementById(id).getAttribute([COLOR=#3933ff]'value'[/COLOR])[/FONT]
[FONT=Monaco]  alert(wert);[/FONT]
[FONT=Monaco]}[/FONT]

Fragezeichen · 18 November 2012

Hallo Tronjer! Vielen Herzlichen Dank, das war genau was ich gesucht habe!:-)
Ich habe das jetzt eingebaut. Die Variable D1 bekommt jetzt den Wert aus der Button-Auswahl.

Zwei Dinge fehlen mir jetzt noch:
1. Ich würde gerne einen Button vorwählen. Das würde ich mit "checked" (siehe unten im Code, rot markiert) lösen. Passt das so?
2. Das Programm sollte "durchlaufen", d.h. man akzeptiert entweder den vorgewählten Button1 oder wählt Button2. Dann tippt man den Wert q1 ein und man bekommt den result1. Derzeit muß man immer nochmal die Buttons drücken nachdem man q1 eingegeben hat, obwohl doch D1 bereits festgelegt worden war. Warum verstehe ich im Moment nicht.

Code:

function CalValue(id)
{
var D1=document.getElementById(id).getAttribute('value');


var q1 = frm1.q1.value;

if (q1.indexOf(",") > -1)

{q1 = q1.replace(",", ".");}

var result1 = q1 * D1;

var two1 = result1.toFixed(2);

var value1 = two1.replace(".", ",");

frm1.result1.value = value1;

if (frm1.result1.value == "NaN")
{frm1.result1.value = "???";}
                }

Code:

<form name="frm1">
<input type="button" name ="Button1" id="Button1" onclick="CalValue(this.id)" [COLOR=#ff0000]checked[/COLOR] value ="5">
<input type="button" name ="Button2" id="Button2" onclick="CalValue(this.id)" value ="10">
<input type="text" name="q1" id="q1" onkeyup="CalValue();">
<input type="text" name="result1" id="result1" readonly>
<input type="reset" name="reset" id="reset" value="Reset">
</form>

threadi · 18 November 2012

inputs vom type button kann man nicht vorwählen. Das geht nur bei checkbox und radio. In Bezug auf Buttons macht das keinen Sinn.

Wenn Du das was beim 1. Button per JavaScript durchgeführt werden soll direkt beim Laden der Seite aufrufen willst, dann müsstest Du die Funktion in Bezug auf diesen Button ausführen.

HTML:

<script type="text/javascript">
CalValue('Button1');
</script>

Alternativ auch per onload startbar.

Tronjer · 18 November 2012

Ich habe dir den Code mal etwas aufgeräumt:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form>
    <input type="button" name="button1" id="button1"onclick="calculator.calValue(this.value);" value ="10">
    <input type="text"name="q1" id="val"onkeyup="calculator.autoCal(this.value);">
    <input type="text"name="result1" id="result" readonly="readonly">
    <input type="reset"name="reset" id="reset" value="Reset"/>
</form>


<script>
var calculator =
{
    pattern : newRegExp(/^[-]?[0-9]+[.,]?[0-9]*$/),
    modificator : false,
    result : false,
    val : false,


    autoCal : function(val)
    {
        if (this.pattern.test(val) == true) {
            
            if (val.indexOf(',') > -1) {
                val = val.replace(',', '.');
            }


            if (this.modificator == false) {
                this.modificator = 5;
            }
            
            result = this.modificator * val;
            result =result.toFixed(2).toString().replace(".",",");
            document.getElementById('result').value= result;
        }
    },


    calValue : function(buttonValue)
    {
        this.modificator = buttonValue;
        this.val =document.getElementById('val').value;
        this.autoCal(this.val);
    }
}
</script>
</body>
</html>

Tronjer · 18 November 2012

Verwende aussagekräftige Bezeichner,

Code:

[COLOR=#3E3E3E]var q1 = frm1.q1.value;[/COLOR]

ist unleserlich. Wenn du den Code weiter ausbaust und nach drei Monaten noch mal reinschaust, weißt du unter Umsänden nicht mehr, was du seinerzeit geschrieben hast.

Um das Script kurz zu erläutern:

Hier wird ein Objekt namens calculator erzeugt. Innerhalb des Objekts werden erst einige Eigenschaften und anschließend zwei Methoden deklariert. Die Methode autoCal prüft anhand eines regulären Ausdrucks den eingegebenen Wert. Erlaubt sind positive oder negative Zahlen, die durch Punkt oder Komma abgetrennte Nachkommastellen haben dürfen. Damit kann man das lästige NaN Problem umgehen. Gibt der User etwas anderes ein, wird es nicht übernommen. Wenn du willst, kannst du die if-Abfrage noch mit einer else-Bedingung erweitern, welche im rechten <input> Feld Fragezeichen anzeigt. Da der Modifikator hier auf false gesetzt ist, verwendet er den Wert 5.

Der Eventhandler für onclick macht genau das selbe, verändert aber den Modifikator analog zu seinem value Attribut im HTML.

Theoretisch könnte man zwar auch zwei Funktionen erstellen, aber in diesem Kontext bietet sich die objektorientierte Schreibweise an.

Fragezeichen · 22 November 2012

OK, inzwischen habe ich soweit verstanden, daß man Radiobuttons nicht einfach mit Clickbuttons ersetzen kann. Vielen Dank für Euere Hilfe.

Wert von click buttons aus Formular an Variable übergeben

Fragezeichen

Neues Mitglied

bdt600

Guest

Fragezeichen

Neues Mitglied

bdt600

Guest

Fragezeichen

Neues Mitglied

bdt600

Guest

Fragezeichen

Neues Mitglied

bdt600

Guest

Fragezeichen

Neues Mitglied

bdt600

Guest

Fragezeichen

Neues Mitglied

Tronjer

Senior HTML'ler

Fragezeichen

Neues Mitglied

threadi

Moderator

Tronjer

Senior HTML'ler

Tronjer

Senior HTML'ler

Fragezeichen

Neues Mitglied

Neueste Beiträge