Tabelleninhalte löschen

donaldax · 19. Dezember 2017

Hallo an Alle,

brauche wiedermal Eure Unterstützung, weil ich mit einer Aufgabe nicht weiter komme.

Ich habe ein Gewichtsrechner, hier kann man das Gewicht eingeben und in einer Auswahlliste

wird das Material ausgewählt. Beispielsweise wird 40 Gramm bei Gewicht eingegeben und

in der Auswahlliste wird Seide ausgewählt. Dem Material ist ein Multiplikator mitgegeben, so

daß 40g * 0,33€ gerechnet und angezeigt wird.

Diesen Rechner habe ich 3 Mal, sodaß ich 3 verschiedene Gewichte und Stoffe ausrechnen

und als Gesamtbetrag anzeigen lassen kann.

Nun fehlt mir aber noch ein "Löschen-Button", welcher die Feldinhalte bei Gewicht und die Auswahlliste

auf "Bitte auswählen" zurücksetzt und auch ein "Alles-Löschen" welcher Feldinhalte aus allen 3 Rechner

gleichzeitig löscht und auch den Gesmatbetrag, siehe Bild

Hiermit bin ich ein Stück voran gekommen, jedoch funktioniert es nicht so richtig, die

Tabellenfelder werden leider nicht geleert.

Code

echo "<td><input type="button" name="delete" value="Löschen" onClick="self.location.href='delete.php?id=$id'"></td>";

Vielelicht hat jemand eine bessere Idee als die meinige, freue mich auf Euren Hinweis.

Viele Grüße an Alle

Andrea

basti1012 · 19. Dezember 2017

Es gibt doch den typen "reset"

Den brauch man doch nur zwischen den <form></form dinger machen

Code

<form>

<input type="text"><input type="reset" value="zurücksetzen"></form>

donaldax · 19. Dezember 2017

Hallo Basti,

supiiiiii...glaube das ist genau was ich suchte.

Habe aber noch eine Mini-Bitte.....

Ich wollte noch gerne einen Reste Button haben, der alles zurücksetzt.

Dort wo steht "Wir zahlen Ihnen ...." soll ein Reset-Button sein der alles

zurück setzt, also alle 3 Felder mit Gewicht und alle Auswahllisten und den Gesamtbetrag

Kannst du mir da auch helfen bitte?

Liebe Gruße und ein dickes Dankeschön

Andrea

donaldax · 19. Dezember 2017

hab noch eine Info.

Wenn ich das Reset einbaue, dann wird auch Gewicht und Material zurückgesetzt, aber der Endbetrag bleibt stehen

basti1012 · 19. Dezember 2017

am besten warten wir auf Sempervivum , der hat dir bei den script schon mal bestens helfen können.

wahrscheinlich fällt ihn auch ws besseres ein als mein reset button.

meines wissen setzt der type "RESET" alles zurück was zwischen <form> (alles das hier....)</form> steht . ob textfeld oder selectfeld.

hatte es gerade nochmal getestet. ich gehe mal von aus das dein ergebniss feldnicht zwischen <form> </form> steht,was dann auch mit den reset ncht geht.

man müsste das textfeld dann nochmal extra ansprechen.

ich kucke mal gerade ob ich das wieder finde hier im forum

EDIT :das mit den reset geht bei den ergebniss feld so nicht meines wissens.

so würdees gehen,

Code

<input type="reset" onclick="document.getElementById('ergebnis2').value='';" value="zurüclsetzten">

Aber ich denke das Sempervivum nee bessere lösung hat ,weil das ist glaube ich nicht die optimalste lösung

basti1012 · 19. Dezember 2017

habe gerade gesehen das du mehrere eingabe felder hast .

dann könntest du auch ein button erstellen der die funktion aufruft

Code

function reseten(){
document.getElementById("summe").innerHTML='';
for (var a = 1; a <= 2; a++) {
 document.getElementById("gewicht"+a).value='';
 document.getElementById("material"+a).value='';
 document.getElementById("ergebnis"+a).innerHTML='';
}   
        }

der resetetdann alles . die 2 ist die anzahl deiner felder .glaube 4 wahren im letzen thema die anzahl

aber wie gesagt das sind meine ideen .es gibtbestimmt bessere

Sempervivum · 19. Dezember 2017

Bastis Empfehlungen waren soweit alle richtig. Ich würde das Zurücksetzen der Formularelemente dem Reset überlassen und nur die, die damit nicht abgedeckt sind, ausprogrammieren. Also ein Resetbutton wie in Posting #5 und dann die Funktion:

Code

        function reset() {
            for (var nr = 1; nr <= anzahl; nr++) {
                document.getElementById("ergebnis" + nr).innerHTML = '';
            }
            document.getElementById("summe").innerHTML = '';
        }
        document.getElementById("resetbtn").addEventListener("click", reset);

donaldax · 21. Dezember 2017

Hallo ihr beiden,

vielen herzlichen Dank für Eure Bemühungen. Leider lässt sich dies aber nicht so

umsetzen.

Habe mal den Code meines Gewicht-Rechners hier und wie ich es gemeistert habe die

Reset Funktion einzubauen. Das Rotmarkierte ist die Reset-Funktion, von Zeile

9- 16

Code

<div style="
            width:500px;
            height:305px;
            border:2px black solid;
">
<p style="text-indent:65px;"><strong>Rechner 1</strong>
<p style="margin-bottom:10px;">
</p>
<input type="reset" onclick="document.getElementById('ergebnis2').value='';" value="zurücksetzten">
function reset() {
            for (var nr = 1; nr <= anzahl; nr++) {
                document.getElementById("ergebnis" + nr).innerHTML = '';
            }
            document.getElementById("summe").innerHTML = '';
        }
        document.getElementById("resetbtn").addEventListener("click", reset);
<form>



       &nbsp; Gramm: &ensp;<input id="gewicht1" />
        &ensp;Materialt:&ensp;
        <select id="material1">
            <option value="">Bitte auswählen</option>
            <option value="0,11">Baumwolle</option>
            <option value="0,34">Seide</option>
            <option value="0,09">Mischgewebe</option>

        </select>
        <span id="ergebnis1"></span>
    </form>
    </br>
 
    <form>
    <br>
    
   <p style="text-indent:65px;"><strong><b>Rechner 2</b></strong></p>
    
<p style="margin-bottom:10px;">
</p>

      &nbsp;  Gramm:&ensp; <input id="gewicht2" />
        &ensp;Material:&ensp;
        <select id="material2">
            <option value="">Bitte auswählen</option>
            <option value="0,11">Baumwolle</option>
            <option value="0,34">Seide</option>
            <option value="0,09">Mischgewebe</option>
        </select>
        <span id="ergebnis2"></span>
    </form>
    </br>
    <form>
       <br>
    
       <p style="text-indent:65px;"><strong><b>Rechner 3</b></strong>
   
<p style="margin-bottom:10px;">
</p>
        &nbsp;Gramm: &ensp;<input id="gewicht3" />
        &ensp;Material:&ensp;
        <select id="material3">
            <option value="">Bitte auswählen</option>
            <option value="0,11">Baumwolle</option>
            <option value="0,34">Seide</option>
            <option value="0,09">Mischgewebe</option>
           
        </select>
        <span id="ergebnis3"></span>
    </form>
    </br>
    <style>
        #gewicht {
            width: 10px;
        }
    </style>
    <script>
        var anzahl = 2;
        function berechnen(nr) {
            var gewicht = document.getElementById("gewicht" + nr);
            var material = document.getElementById("material" + nr);
            var ergebnis = document.getElementById("ergebnis" +nr);
            var valgewicht = gewicht.value.replace(",", ".");
            var idxmaterial = material.selectedIndex;
            var preis = material.options[idxmaterial].value.replace(",", ".");
            if (valgewicht != "" && idxmaterial != 0) {
                ergebnis.innerHTML = (valgewicht * preis).toFixed(2).replace(".",",") + ' €';
            } else {
                ergebnis.innerHTML = "";
            }
        }
        for (let nr = 1; nr <= anzahl; nr++) {
            document.getElementById("gewicht" + nr).addEventListener("input", function() {berechnen(nr);});
            document.getElementById("material" + nr).addEventListener("change", function() {berechnen(nr);});
        }
    </script>
  
    

<div style="background:url('image.jpg');width:10px;height:10px">Text</div>

<p style="text-indent:275px;"><strong>Wir zahlen Ihnen*&nbsp;&nbsp;<span id="summe"></span>



 
    </br>
    <script>
        var anzahl = 4;
        var ergebnisse = [];
        function summieren() {
            var endsumme = 0;
            for (var nr = 1; nr <= anzahl; nr++) endsumme += ergebnisse[nr];
            document.getElementById("summe").innerHTML = endsumme.toFixed(2).replace( ",") + ' €';
        }

        function berechnen(nr) {
            var gewicht = document.getElementById("gewicht" + nr);
            var material = document.getElementById("material" + nr);
            var ergebnis = document.getElementById("ergebnis" +nr);
            var valgewicht = gewicht.value.replace(",", ".");
            var idxmaterial = material.selectedIndex;
            var preis = material.options[idxmaterial].value.replace(",", ".");
            if (valgewicht != "" && idxmaterial != 0) {
                ergebnisse[nr] = (valgewicht * preis);
               ergebnis.innerHTML = (valgewicht * preis).toFixed(2).replace(".",",") + ' €';
            } else {
                ergebnis.innerHTML = "";
            }
            summieren();
            
        }
        for (let nr = 1; nr <= anzahl; nr++) {
            ergebnisse[nr] = 0;
            document.getElementById("gewicht" + nr).addEventListener("input", function() {berechnen(nr);});
            document.getElementById("material" + nr).addEventListener("change", function() {berechnen(nr);});
        }
    </script>
   
    <font size="-1">* Der genaue Auszahlungsbetrag wird in unserem Labor anhand der Stoffanalyse ermittelt</Font>
    </div>

Alles anzeigen

basti1012 · 21. Dezember 2017

du must den reset button noch die id geben

id="resetbtn"

also so

Code

<input type="reset" id="resetbtn" onclick="document.getElementById('ergebnis2').value='';" value="zurücksetzten">

und die function in einscript tag backen so

Code

<script>
function reset() {
 
            for (var nr = 1; nr <= anzahl; nr++) {
                document.getElementById("ergebnis" + nr).innerHTML = '';
            }
            document.getElementById("summe").innerHTML = '';
        }
        document.getElementById("resetbtn").addEventListener("click", reset);
   </script>

basti1012 · 21. Dezember 2017

Hier noch mal alles zuaammen mit den "WIR ZAHLE IHNEN" feld,was zurück gesetzt wird

Code

<div style="
            width:500px;
            height:305px;
            border:2px black solid;
">
<p style="text-indent:65px;"><strong>Rechner 1</strong>
<p style="margin-bottom:10px;">
</p>
<input type="reset" id="resetbtn" onclick="document.getElementById('ergebnis2').value='';" value="zurücksetzten">
 
<form>
       &nbsp; Gramm: &ensp;<input id="gewicht1" />
        &ensp;Materialt:&ensp;
        <select id="material1">
            <option value="">Bitte auswählen</option>
            <option value="0,11">Baumwolle</option>
            <option value="0,34">Seide</option>
            <option value="0,09">Mischgewebe</option>
        </select>
        <span id="ergebnis1"></span>
    </form>
    </br>
 
    <form>
    <br>
    
   <p style="text-indent:65px;"><strong><b>Rechner 2</b></strong></p>
    
<p style="margin-bottom:10px;">
</p>
      &nbsp;  Gramm:&ensp; <input id="gewicht2" />
        &ensp;Material:&ensp;
        <select id="material2">
            <option value="">Bitte auswählen</option>
            <option value="0,11">Baumwolle</option>
            <option value="0,34">Seide</option>
            <option value="0,09">Mischgewebe</option>
        </select>
        <span id="ergebnis2"></span>
    </form>
    </br>
    <form>
       <br>
    
       <p style="text-indent:65px;"><strong><b>Rechner 3</b></strong>
   
<p style="margin-bottom:10px;">
</p>
        &nbsp;Gramm: &ensp;<input id="gewicht3" />
        &ensp;Material:&ensp;
        <select id="material3">
            <option value="">Bitte auswählen</option>
            <option value="0,11">Baumwolle</option>
            <option value="0,34">Seide</option>
            <option value="0,09">Mischgewebe</option>
           
        </select>
        <span id="ergebnis3"></span>
    </form>
    </br>
    <style>
        #gewicht {
            width: 10px;
        }
    </style>
    <script>
        var anzahl = 2;
        function berechnen(nr) {
            var gewicht = document.getElementById("gewicht" + nr);
            var material = document.getElementById("material" + nr);
            var ergebnis = document.getElementById("ergebnis" +nr);
            var valgewicht = gewicht.value.replace(",", ".");
            var idxmaterial = material.selectedIndex;
            var preis = material.options[idxmaterial].value.replace(",", ".");
            if (valgewicht != "" && idxmaterial != 0) {
                ergebnis.innerHTML = (valgewicht * preis).toFixed(2).replace(".",",") + ' €';
            } else {
                ergebnis.innerHTML = "";
            }
        }
        for (let nr = 1; nr <= anzahl; nr++) {
            document.getElementById("gewicht" + nr).addEventListener("input", function() {berechnen(nr);});
            document.getElementById("material" + nr).addEventListener("change", function() {berechnen(nr);});
        }
    </script>
  
    
<div style="background:url('image.jpg');width:10px;height:10px">Text</div>
<p style="text-indent:275px;"><strong>Wir zahlen Ihnen*&nbsp;&nbsp;<span id="summe"></span>
 
    </br>
    <script>
        var anzahl = 4;
        var ergebnisse = [];
        function summieren() {
            var endsumme = 0;
            for (var nr = 1; nr <= anzahl; nr++) endsumme += ergebnisse[nr];
            document.getElementById("summe").innerHTML = endsumme.toFixed(2).replace( ",") + ' €';
        }
        function berechnen(nr) {
            var gewicht = document.getElementById("gewicht" + nr);
            var material = document.getElementById("material" + nr);
            var ergebnis = document.getElementById("ergebnis" +nr);
            var valgewicht = gewicht.value.replace(",", ".");
            var idxmaterial = material.selectedIndex;
            var preis = material.options[idxmaterial].value.replace(",", ".");
            if (valgewicht != "" && idxmaterial != 0) {
                ergebnisse[nr] = (valgewicht * preis);
               ergebnis.innerHTML = (valgewicht * preis).toFixed(2).replace(".",",") + ' €';
            } else {
                ergebnis.innerHTML = "";
            }
            summieren();
            
        }
        for (let nr = 1; nr <= anzahl; nr++) {
            ergebnisse[nr] = 0;
            document.getElementById("gewicht" + nr).addEventListener("input", function() {berechnen(nr);});
            document.getElementById("material" + nr).addEventListener("change", function() {berechnen(nr);});
        }
    </script>
    <script>
function reset() {
 document.getElementById("summe").innerHTML ='';
            for (var nr = 1; nr <= anzahl; nr++) {
     document.getElementById("ergebnis" + nr).innerHTML = '';
            }
            document.getElementById("summe").innerHTML = '';
        }
 document.getElementById("resetbtn").addEventListener("click", reset);
   </script>   
    <font size="-1">* Der genaue Auszahlungsbetrag wird in unserem Labor anhand der Stoffanalyse ermittelt</Font>
    </div>

Alles anzeigen

bei deinen obrigen code wir das "WIR ZAHLEN IHNEn FELD" nicht zurückgesetzt

donaldax · 22. Dezember 2017

Hallo Basti1012,

ganz herzlichen Dank für deine Bemühung.

Ich habe jetzt mal 2 Screenshot gemacht. Es funktioniert soweit alles super, nur einen kleinen Wermutstropfen gibt es noch.

Da komme ich leider nicht weiter.

Mein Gewichtsrechner besteht aus 3 einzelnen Rechner. Dies hat den Vorteil, daß man beispielsweise Baumwolle und Seide

eingeben kann und man bekommt den Gesamtbetrag für beide Eingaben angezeigt. Hätte ich nur einen Rechner, müsste man

2 Mal das Gewicht eingeben und zweimal das MAterial auswählen und zweimal den Betrag ausrechnen lassen und dann selbst

zusammenaddieren

Ich habe mir vorgestellt, daß ich hinter jeden Rechner ein Reset-Button mache ( also 3 Stück), welche die Gewichtsangaben und

die Materialauswahl bei jedem einzelnen Gewichts-Rechner löscht und bei dem Text "Wir zahlen Ihnen" einen Reset-Button, welcher

komplett alle Eingaben löscht.

Im Moment ist es so, daß der "Zurücksetzen" Button das Endergebnis löscht und die Beträge hinter den einzelnen Rechnern. Aber das

Gewicht und das Material bleibt bestehen, siehe Bilder.

Jetzt vermute ich, daß man sowas gar nicht machen kann

Wärst du bitte so nett und schaust dir das nochmals an?

Liebe Grüße

Andrea

P.S. habe Weihnachtsplätzchen gebacken, magst welche haben?

Sempervivum · 22. Dezember 2017

Schau mal, ob dieses tut, was Du erwartest:

Code

<form>
        Gewicht: <input id="gewicht1" />
        Material:
        <select id="material1">
            <option value="">Bitte auswählen</option>
            <option value="10">Baumwolle</option>
            <option value="15">Leinen</option>
            <option value="20">Seide</option>
        </select>
        <span id="ergebnis1"></span>
        <button id="resetbtn1" type="button">Löschen</button>
    </form>
    <form>
        Gewicht: <input id="gewicht2" />
        Material:
        <select id="material2">
            <option value="">Bitte auswählen</option>
            <option value="10">Baumwolle</option>
            <option value="15">Leinen</option>
            <option value="20">Seide</option>
        </select>
        <span id="ergebnis2"></span>
        <button id="resetbtn2" type="button">Löschen</button>
    </form>
    <form>
        Gewicht: <input id="gewicht3" />
        Material:
        <select id="material3">
            <option value="">Bitte auswählen</option>
            <option value="10">Baumwolle</option>
            <option value="15">Leinen</option>
            <option value="20">Seide</option>
        </select>
        <span id="ergebnis3"></span>
        <button id="resetbtn3" type="button">Löschen</button>
    </form>
    <span id="summe"></span>
    <button type="button" id="resetbtnall">Alles löschen</button>
    <script>
        var anzahl = 3;
        var ergebnisse = [];
        function summieren() {
            var endsumme = 0;
            for (var nr = 1; nr <= anzahl; nr++) endsumme += ergebnisse[nr];
            document.getElementById("summe").innerHTML = endsumme.toFixed(2).replace(".", ",") + ' €';
        }
        function berechnen(nr) {
            var gewicht = document.getElementById("gewicht" + nr);
            var material = document.getElementById("material" + nr);
            var ergebnis = document.getElementById("ergebnis" + nr);
            var valgewicht = gewicht.value.replace(",", ".");
            var idxmaterial = material.selectedIndex;
            var preis = material.options[idxmaterial].value.replace(",", ".");
            if (valgewicht != "" && idxmaterial != 0) {
                ergebnisse[nr] = (valgewicht * preis);
                ergebnis.innerHTML = (valgewicht * preis).toFixed(2).replace(".", ",") + ' €';
            } else {
                ergebnis.innerHTML = "";
            }
            summieren();
        }
        function resetOne(nr) {
            document.getElementById("gewicht" + nr).value = '';
            document.getElementById("material" + nr).selectedIndex = 0;
            document.getElementById("ergebnis" + nr).innerHTML = '';
        }
        function resetAll() {
            for (var nr = 1; nr <= anzahl; nr++) {
                resetOne(nr);
            }
            document.getElementById("summe").innerHTML = '';
        }
        document.getElementById("resetbtnall").addEventListener("click", resetAll);
        for (let nr = 1; nr <= anzahl; nr++) {
            ergebnisse[nr] = 0;
            document.getElementById("gewicht" + nr).addEventListener("input", function () { berechnen(nr); });
            document.getElementById("material" + nr).addEventListener("change", function () { berechnen(nr); });
            document.getElementById("resetbtn" + nr).addEventListener("click", function () { resetOne(nr); });
        }
    </script>

Alles anzeigen

basti1012 · 22. Dezember 2017

Zitat von donaldax

P.S. habe Weihnachtsplätzchen gebacken, magst welche haben?

wie nehmen gerne welche. Aber leider wohne ich in Minden am ... der welt

donaldax · 22. Dezember 2017

Hallo Sempervivum,

freue mich von Dir wieder zu lesen. Du hast mir schon so viel geholfen. Ein ganz dickes Dankeschön!!

Es ist alles so wie ich es mir vorstelle. Nur eine Kleinigkeit....der "Alles Löschen" Button funktioniert nicht.

Die anderen Löschen-Button sind klasse, da werden die Felder und die Auswahlliste geleert

Sempervivum · 22. Dezember 2017

Ich hatte ein paar Mal den Code verbessert und meinen Post geändert. Möglicher Weise hast Du da eine fehlerhafte Version erwischt. Probiere es jetzt noch Mal. Ich habe den Code aus Post #12 noch Mal zurück in meine Testseite kopiert und dort funktioniert er.

Tabelleninhalte löschen

Jetzt mitmachen!

Teilen