• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Hilfe beim Online Preisrechner als DropDown Box

djcorna

New member
Hallo an die Gemeinde,

bin kein Programmierer und deshalb brauche ich Eure Hilfe. Es geht um einen Online Preisrechner. Dieser sollte nach Möglichkeit, als eine Art Dropdown Box sein.
Er sollte nur 1 Eingabefeld haben für die gewünschte Maße z.B in m², dann Auswahl der Farbe durch das Dropdown-Menü und am Ende nur der Gesamtpreis.

Ich wäre sehr dankbar, wenn Ihr mir helfen könntet.


Hier der momentane Code:
Code:
<!-- http://www.web-toolbox.net -->


<html>
<head>
<script type="text/javascript" language="JavaScript">
<!--
// W. jansen

// Kosten für eine Bezugseinheit
Preis01 = 44.10;
Preis02 = 55.00;
AnzahlGesamt = 0;

// legt Dezimalstellen fest und wandelt das Dezimalzeichen . = ,
function Dezimalstellen(num) {
if(isNaN(num))
num = "0";
Vorzeichen = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents<10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3))+'.'+
num.substring(num.length-(4*i+3));
return (((Vorzeichen)?'':'-') + num + ',' + cents);
}


function startCalc(){
  interval = setInterval("calc()",1);
}
function calc(){
  Wert01 = (Preis01 * document.autoSumForm.Anzahl01.value);
  Wert02 = (Preis02 * document.autoSumForm.Anzahl02.value);
  
  document.autoSumForm.Betrag01.value = Dezimalstellen(Wert01);
  document.autoSumForm.Betrag02.value = Dezimalstellen(Wert02);
  zwischen  =  (Wert01 * 1) + (Wert02 * 1);
  ergebnis = Dezimalstellen(zwischen)
  document.autoSumForm.Summe.value  = ergebnis;
}
function stopCalc(){
  clearInterval(interval);
}
//  End -->
</script>

</head>

<body>


<form name="autoSumForm">


<table cellspacing="0" cellpadding="10" border="0">
<tr><td>Artikel</td><td>in m²</td><td>Summe</td></tr>

<tr><td>Farbe Blau</td><td>
<input size="4" type="text" name="Anzahl01" value="" onFocus="startCalc();" onBlur="stopCalc();">
<br>
</td>
<td>
<input size="8" readonly type=text name="Betrag01" value="" > Euro<br></td></tr>

<tr><td>Farbe Schwarz</td><td>
<input size="4" type="text" name="Anzahl02" value="" onFocus="startCalc();" onBlur="stopCalc();"><br></td><td>
<input size="8" readonly type=text name="Betrag02" value=""> Euro<br></td></tr>

<tr><td></td>

<td>Gesamtsumme</td>
<td>
<input size="8" readonly type=text name="Summe"> Euro<br>
</td>
</tr>
</table>

</form>


<br><br>

</body>
</html>
 
Grüß dich,

ich kriege es einfach nicht hin aus der momentan vorhandenen Tabelle, ein Dropdown Menü zu erstellen. Mit "<select> +<option> " habe ich ein Menü zwar erstellen können aber es wurde nichts berechnet, weil mir die benötigten Programmierkentnisse fehlen um da weiter zu kommen.

Was ich grade habe:

preisrechner online_moment.png

und wie es eigentlich aussehen sollte:

preisrechner online.png

Bei Fläche trägt man die gewünschte Zahl ein, dann wählt man ein passendes Produkt/Farbe aus und der Gesamtpreis wird automatisch errechnet.
 
Servus,

meinst du in etwa so:
Code:
<body>
<table width="250px" border="0" style="margin: auto; font-size:14px;">
	<tr>
		<td width="120px" style="text-align: left; vertical-align: top">Fläche</td>
		<td>
          <input name="flaeche" id="flaeche" size="7" 
                 class="" value="0" type="text" onfocus="" onChange="">m²
	</tr>

	<tr>
		<td width="150px" style="text-align: left; vertical-align: top">Artikel</td>
		<td>
			<select style="font-size:14px; font-family: Verdana;" name="art">
				<option value="19.90">Lack</option>
				<option value="19.90">Matt</option>
				<option value="19.90">Satin</option>
				<option value="29.90">Wildleder</option>
				<option value="29.90">Marmor</option>
				<option value="29.90">Chamäleon/Galaxy</option>
				<option value="54.90">Textur</option>
				<option value="64.90">Fotodruck</option>
			</select>
		</td>
	</tr>
	<tr>
		<td style="text-align: left; vertical-align: top">Anzahl der Ecken</td>
		<td>
        <input name="ecken" size="7"  class="" value="0" type="text"  onfocus="">St.</td>
	</tr>
	<tr>
		<td style="text-align: left; vertical-align: top">Einbaustrahler </td>
		<td>
        <input name="einbaustrahler" size="7"  class="" value="0" type="text" onfocus="">St.</td>
	</tr>
	<tr>
		<td style="text-align: left; vertical-align: top">Leuchtmittel</td>
		<td><input name="leuchte" size="7"  class="" value="0"  type="text"  onfocus="">St.</td>
	</tr>	
</table>
<br>
<br>
<div style="font-size:18px; font-family: Verdana; text-align: left;"><b>Gesamtpreis:<b>
  
</b>
<input name="gesamtpreis" size="7"  class="" value="0"  type="text" value=""/>Euro</b></div>
	
<br><br>
<div id="button" style="" class="button">Preis aktualisieren</div> 
<br />
<hr />
<hr />
</body>
 
abgesehen davon, daß man Tabellen nicht zum Layout benutzt, ja.

als nächstes hängst du an jedes inputfeld ein event listener, der über die passende Formel den Gesamtpreis berechnet. Dabei kannst du die einzelnen Felder über IDs ansprechen, die Werte auslesen und in die Formel eintragen.

PS. name kannst du weglassen, wenn du kein formular absenden willst
 
Wenn du dabei die Events oninput bzw. onchange verwendest, brauchst du gar keinen "berechnen"-Button.
 
Zurück
Oben