• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wert von click buttons aus Formular an Variable übergeben

Fragezeichen

Neues Mitglied
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.:oops: Irgendwie soll das mit document.getElementbyId gehen, leider scheitere ich aber bei allen Versuchen. Kann mir bitte jemand Hilfestellung leisten?
 
Werbung:
Ü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);
}
 
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.
 
Zuletzt bearbeitet:
Werbung:
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!
 
Werbung:
Werbung:
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.
 
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]
 
Werbung:
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>
 
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.
 
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>
 
Werbung:
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.
 
OK, inzwischen habe ich soweit verstanden, daß man Radiobuttons nicht einfach mit Clickbuttons ersetzen kann. Vielen Dank für Euere Hilfe.
 
Zurück
Oben