Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 10 von 21

Thema: Checkboxen berechnen lassen

  1. #1
    Fortgeschrittene/r
    Registriert seit
    25.06.2016
    Beiträge
    178
    Danke
    6
    Bekam 12 mal "Danke" in 12 Postings

    Standard Checkboxen berechnen lassen

    Hey,

    ich brauche hilfe bei einer Sache. Nämlich habe ich in meinem Bestellformular 4 Checkboxen. Ich möchte das wenn man eine Checkbox klickt , dass dann in einem span element der Preis ausgegeben wird. Und wenn man weitere Checkboxen klickt, dass der Preis dann addiert wird.

    Mein HTML & CSS:
    HTML-Code:
    <div id="bestellformular">
            	<div id="bestellformular-mover-in">
                	<p id="uberschrift">Was möchten sie bestellen?</p>
                	<form name="bestellform">
                    	<label for="angebot1" >Bilder</label>
                    	<input type="checkbox" id="angebot1" />
                    	<br>
                    	<label for="angebot2" >Videos</label>
                    	<input type="checkbox" id="angebot2"  />
                    	<br>
                    	<label for="angebot3">E-Book</label>
                    	<input type="checkbox" id="angebot3"  />
                    	<br>
                    	<label for="angebot4" >Buch</label>
                    	<input type="checkbox" id="angebot4"/>
                    	
                    	<button id="bestellbutton">Bestellen!</button>
                	</form>
                	
                	<p>Es kostet:<span id="preis"></span></p>
                	
                	
                	
            	</div>
            	<p>B<br>E<br>S<br>T<br>E<br>L<br>L<br>F
            	<br>O<br>R<br>M<br>U<br>L<br>A<br>R<br></p>
        	</div>
    Code:
    /*Bestellformular*/
    div#bestellformular
    {
    	width: 50px;
    	height: 400px;
    	background-color: brown;
    	border: 2px solid cyan;
    	border-right: none;
    	float: right;
    	border-top-left-radius: 30px;
    	border-bottom-left-radius: 30px;
    	clear: both;
    }
    
    div#bestellformular p
    {
    	position: absolute;
    	right: 10px;
    	top: 160px;
    	font-weight: 900;
    	color: black;
    }
    
    #bestellformular div#bestellformular-mover-in
    {
    	width: 200px;
    	height: 430px;
    	background-color: yellow;
    	position: relative;
    	right: 150px;
    	top: -5px;
    	border-top-left-radius: 30px;
    	border-bottom-left-radius: 30px;
    	z-index: 1;
    }
    
    div#bestellformular-mover-in p#uberschrift
    {
    	position: absolute;
    	top: 10px;
    	left: 10px;
    }
    
    div#bestellformular-mover-in p
    {
    	position: absolute;
    	top: 230px;
    	left: 10px;
    }
    
    div#bestellformular-mover-in p span
    {
    	width: 100px;
    	height: 50px;
    	border: 2px solid black;
    	margin-left: 5px;
    	padding: 3px 4px 3px 4px;
    }
    
    div#bestellformular-mover-in label
    {
    	position: relative;
    	top: 80px;
    	left: 40px;
    	display: block;
    }
    
    div#bestellformular-mover-in [type="checkbox"]
    {
    	position: relative;
    	top: 65px;
    	left: 25px;
    	
    }
    
    div#bestellformular-mover-in button
    {
    	position: absolute;
    	top: 300px;
    	left: 20px;
    	padding: 10px;
    	border: 3px solid cyan;
    }
    
    /*Zeigen dieses Bereiches + hover-effekte*/
    
    div#bestellformular-mover-in button:hover
    {
    	background-color: rgba(0, 234, 255, 0.3);
    	cursor: pointer;
    }
    
    #bestellformular div#bestellformular-mover-in
    {
    	display: none;
    }
    
    div#bestellformular:hover #bestellformular-mover-in
    {
    	display: block;
    }
    Ich habe im internet schon geschaut aber das was ich gefunden habe, hat entweder nicht funktioniert oder das erklärte hab ich nicht verstanden.


    Freue mich auf eure Hilfe.
    Stef
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.234
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: Checkboxen berechnen lassen

    Hallo,

    Wo sollen die Preise denn herkommen?

  3. #3
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Checkboxen berechnen lassen

    Wenn du wirklich vorhast, etwas zu verkaufen, dann besorg dir lieber eine Shopsoftware.

  4. #4
    Fortgeschrittene/r
    Themenstarter

    Registriert seit
    25.06.2016
    Beiträge
    178
    Danke
    6
    Bekam 12 mal "Danke" in 12 Postings

    Standard AW: Checkboxen berechnen lassen

    Hey,

    @Arne : aus der value im input feld möchte ich die her haben , aber ich weis nicht wie man dies nun berechnet.

    @djheke : ich habe kein geld für eine shopsoftware und möchte es selbst verstehen und eines tages selbst erstellen. Aber danke für den Tipp.

    Hoffe ihr könnt mir einen hilfreichen code vorlegen.

    Stef

  5. #5
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.234
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: Checkboxen berechnen lassen

    Also wenn die Werte in den Values stehen, musst Du ja nur auf das Click-Event reagieren.
    Ich würde für den Fall ( wenn ich es auf die Art machen müsste ) einfach eine Summe aller Checkboxen ziehen und alle Werte der nicht gecheckten Boxen davon abziehen.
    Dann hast Du einen sauberen Start. Bei jedem Klick auf eine Checkbox prüfst Du dann, ob der Wert erneut zur Summe hinzugefügt oder abgezogen werden muss.

    Live, ohne Seiten-Reload benötigst Du JavaScript oder ein darauf basierendes Framework, wenn's komfortabler sein soll.
    Hast Du es mit einer der Varianten schon probiert oder ne Idee der Umsetzung?

    EDIT: kleines Beispiel ( ohne Rücksicht auf die Rundungsproblematik )
    http://www.php-rocks.de/checkcalcdemo/
    Geändert von Arne Drews (30.06.2016 um 15:28 Uhr)

  6. #6
    Fortgeschrittene/r
    Themenstarter

    Registriert seit
    25.06.2016
    Beiträge
    178
    Danke
    6
    Bekam 12 mal "Danke" in 12 Postings

    Standard AW: Checkboxen berechnen lassen

    Hey,

    Ok.

    Ich habe nun schon die values zu jedem input zugeordnet.
    Ich habe mit JS nochnichts zu tun gehabt. Und weis daher nicht wie sowas aufgebaut ist. Bin aber für neueres immer begeistert.

    Meine Idee der Umsetzung ist:

    zu erst prüfen ob die Checkbox geklickt wurde. Falls ja, diesen klick wie du gesagt hast oben abfangen und die value angeben mit nem Text (z.B. so : Es kostet : ...€) und wenn mehrere geklickt werden addieren und falls die wieder weggeklickt werden summieren. Aber wie ich es umsetze weis ich nicht. Ich weiß nur dass man die Tags/IDS/Klassen idividuell ansprechen muss damit dies nur eine wirkung für diesen bereich hat und wie man eine javascript datei in html einbindet.

    Bin immer bereit neues zu lernen.
    ___________________________________________

    Dein Beispiel habe ich mir angesehen und so in etwa ist das was ich will aber ich verstehe schon beim anblick des js codes nicht wie er funktioniert.
    Ich erkläre mal den code soweit ich weis:
    PHP-Code:
    var _summe 0//hier wird die summe erstmal auf 0 gesetzt damit von 0 angefangt wird zu addieren
    _chks document.getElementsByTagName'input' ); //hier wird der TagName input angesprochen und der variable chks zugeordnet

    for ( x=0x<_chks.lengthx++ )  {

        if ( 
    _chks[x].type == 'checkbox' && _chks[x].checked ) {

            
    _summe += parseFloat(_chks[x].value);//hier wird glaub ich die summe + oder = gesetzt zu diesem parse float , was ist den parsefloat?

        
    }

        
    _chks[x].addEventListener'click'sumvalue ); //hier wird dem array chks eine eventlistner click zugeordnet

    }


    function 
    sumvalue() {

        if ( 
    this.checked )
            
    _summe += parseFloatthis.value );
        else
            
    _summe -= parseFloatthis.value );
     
    document.getElementById'summe' ).innerHTML _summe//hier die id summe ansprechen und mit innerhtml die summe ausgeben auf dem desktop

    Stef

  7. #7
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.234
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: Checkboxen berechnen lassen

    Hallo,

    Ja, im groben hast Du ja verstanden wie das Script abläuft.
    Nochmal kurz etwas ausführlicher:
    PHP-Code:
    /* JS-Code, aufgrund von Syntax-Highlightning als PHP-Code geposted! */


    // Summenvariable deklarieren und auf Startwert 0 setzen
    var _summe 0;

    // Sammel alle INPUT-Elemente in einer Objekt-Liste ( _chks )
    _chks document.getElementsByTagName'input' );

    // Schleife über alle Elemente der Objektliste ( _chks ), bis die Anzahl der Elemente erreicht wurde
    for ( x=0x<_chks.lengthx++ ) {

        
    // Wenn das Input-Element eine Checkbox ist und diese gechecked ist...
        
    if ( _chks[x].type == 'checkbox' && _chks[x].checked ) {

            
    // ...summiere den Wert der aktuellen Checkbox als Fliesskommazahl ( parseFloat ) zur Summemvariable _summe
            
    _summe += parseFloat(_chks[x].value);

        }

        
    // Binde Event-Listener für aktuelle Checkbox auf Funktion sumvalue()
        
    _chks[x].addEventListener'click'sumvalue );

    }


    // Die Funktion sumvalue() wird bei jedem Klick auf eine Checkbox automatisch ausgelöst
    function sumvalue() {

        
    // prüfen ob Checkbox gechecked ist...
        
    if ( this.checked )
            
    // ...Wert der Checkbox als Fliesskommazahl zu _summe addieren
            
    _summe += parseFloatthis.value );
        
    // ...wenn nicht gechecked...
        
    else
            
    // ...Wert der Checkbox als Fliesskommazahl von _summe abziehen
            
    _summe -= parseFloatthis.value );

        
    // Aktuell berechnete Summe in entsprechendem DIV ausgeben
        
    document.getElementById'summe' ).innerHTML _summe;


    Wie gesagt, auf die Rundungen habe ich der Kürze halber keine Rücksicht genommen.

  8. #8
    Fortgeschrittene/r
    Themenstarter

    Registriert seit
    25.06.2016
    Beiträge
    178
    Danke
    6
    Bekam 12 mal "Danke" in 12 Postings

    Standard AW: Checkboxen berechnen lassen

    Hey,

    ok vielen Dank.

    Wenn ich es jetzt benutz, dann sind es mehr als 2 Kommanachstellen, wie kann ich diese auf 2 Stellen nach Komma setzen?
    Und wenn ich nun z.b. 3 checkboxen anklicke tut es dies auch richtig verrechnen aber wenn ich wieder es summiere dann kommen, Zahlen mit sehr vielen Nachkommazahlen und dann wenn alle checkboxen weggeklickt sind kommt sowas raus : -1.7763568394002505e-15 . Warum denn das ?

    Ne Frage zu dem: Warum wird vor dem checked ein this. benutzt ?
    PHP-Code:
    function sumvalue() {

        if ( 
    this.checked 
            
    _summe += parseFloatthis.value );
        else
            
    _summe -= parseFloatthis.value ); //Warum ist nach dem - und + ein = ?
     
    document.getElementById'summe' ).innerHTML _summe

    Stef
    Geändert von Stef (01.07.2016 um 20:06 Uhr)

  9. #9
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.234
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: Checkboxen berechnen lassen

    Hallo,

    Das this referenziert ein Objekt, in diesem Fall ist es das angeklickte Element, Deine Checkbox.
    Über den Event-Trigger ist das Element bekannt und kann mit this referenziert werden.

    Das Problem mit den Nachkommastellen soll man angeblich mit toFixed(2) oder Math.round() lösen können.
    Die Mühe habe ich mir allerdings nicht weiter gemacht, weil es auf die Schnelle zu falschen Ergebnissen kam... Evtl. habe ich das kurz falsch eingesetzt, keine Ahnung...

    Code:
    _summe += 1 // ist dasselbe, wie _summe = _summe + 1
    _summe -= 1 // ist dasselbe, wie _summe = _summe - 1
    bin halt schreibfaul...
    Geändert von Arne Drews (01.07.2016 um 20:13 Uhr)

  10. #10
    Fortgeschrittene/r
    Themenstarter

    Registriert seit
    25.06.2016
    Beiträge
    178
    Danke
    6
    Bekam 12 mal "Danke" in 12 Postings

    Standard AW: Checkboxen berechnen lassen

    Aso ok.

    Es funktioniert jetzt so in etwa. Habe math.round genommen:

    PHP-Code:
     document.getElementById'summe' ).innerHTML 'Es kostet:' Math.round(_summe) + '€'
    Vielen Dank

Ähnliche Themen

  1. Mehrere Checkboxen in unterschiedliche Spalten der Datenbank eintragen lassen
    Von Marcese im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 23.03.2012, 12:45
  2. Berechnen von Zeiten
    Von XPander im Forum Forum für alle anderen Programmiersprachen
    Antworten: 25
    Letzter Beitrag: 04.06.2009, 21:15
  3. Zeiten berechnen
    Von Donkey im Forum Script-Archiv
    Antworten: 0
    Letzter Beitrag: 16.01.2009, 17:46
  4. nächsten PageRank deiner Webseite berechnen lassen
    Von admin im Forum Promotion - SEO - Suchmaschine (Google & Co) – Mitarbeiter & Linkpartnersuche
    Antworten: 16
    Letzter Beitrag: 26.08.2006, 14:37
  5. Uhrzeiten berechnen
    Von gelöschter User im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 17.04.2006, 17:15

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •