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

Google Tabellen,Eingabe Felder nach Eingabe lehren

K

kaysiebke

Mitglied
Ich möchte mich im Voraus für Ihre Hilfe bedanken.
Ich bin zwar neu in HTML, aber ich bemühe mich, die ganze Sache so gut ich kann zu erklären.

Ich habe in Google Tabellen einen Barcode Generator entwickelt, der mithilfe von Eingabefeldern in einer individuell angepassten Seitenleiste eingegeben werden kann.

Beim Klicken auf Sumide kann ich leider nicht herausfinden, warum die Eingabefelder nicht gelehrt werden für neue Eingaben. Hiermit schicke ich Ihnen mein gesamtes Schreiben.

HTML: 
<!DOCTYPE html>
<html>

<head>
    <br>
    <div align='center'>
        <img src=
    </div>
    <base target="_top">
    <style>
        body {
          background: #021d49;
          font-family: Arial, Arial;
          color: #e6e9f1;
          font-size: 13pt;
          margin: 0px;
          padding: 10px;
        }
            label {
            font-weight: bold;
            text-transform: uppercase;
        }
            input[type="search"] {
            width: 270px;
            padding: 15px;
            height: 50px;
            margin-bottom: 15px;
            border: 2px outset #e30613;
            border-radius: 6px;
            font-size: 15pt;
            box-sizing: border-box;
        }
            input[type="button"] {
            display: block;
            margin: 0 auto 7px auto;
            cursor: pointer;
            width: 120px;
            padding: 15px 2px;
            background-color: #e30613;
            color: white;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 12pt;
            text-align: center;
            text-decoration: none;
            border: 1px solid #e30613;
            border-radius: 7px;
            transition: background 0.2s ease-out;
      
      
        }
            input[type="button1"] {
            display: block;
            margin: 0 auto 7px auto;
            cursor: pointer;
            width: 120px;
            padding: 15px 2px;
            background-color: #e30613;
            color: white;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 12pt;
            text-align: center;
            text-decoration: none;
            border: 1px solid #e30613;
            border-radius: 7px;
            transition: background 0.2s ease-out
      
        }
            input[type="button1"]:hover {
            background-color: #19911b;
            color: #000000;
        }
      
            input[type="button"]:hover {
            background-color: #19911b;
            color: #000000;
        }
    </style>

    <style>
        ::-ms-input-placeholder { /* Edge 12-18 */
          color:#e30613;
        }
        ::placeholder {
          color:#e30613;
        }
        input:focus::placeholder {
        color: transparent;
}
    </style>

</head>

<body>
    <form id="itemForm">
      <form>
        <input type="search"id="sku" name="sku" placeholder="SKU">
        </p>
        <input type="search"id="color" name="color" placeholder="Color"value >
        </p>
        <input type="search"id="size" name="size" placeholder="Sitze"value >
        </p>
        <input type="search"id="description" name="description" placeholder="Description"value >
        </p>
        <div style="display: flex">
            <input type="button" value="Submit" onclick="submitForm()">
            <input type="button1" value="Reset" onclick="form.reset()">
       </div>
    </form>
    <script>
        function submitForm() {
        var form = document.getElementById('itemForm');
        var formData = {
        'sku': form.sku.value,
        'color': form.color.value,
        'size': form.size.value,
        'description': form.description.value
        };
      
        google.script.run.processForm(formData);
        }
    </script>
</body>
 
Zuletzt bearbeitet:
Sempervivum schrieb:
jonn Leeren der Formularelemente musst Du selbst machen durch Aufruf der Funktion reset:
developer.mozilla.org

HTMLFormElement: reset() method - Web APIs | MDN

The HTMLFormElement.reset() method restores a form element's default values. This method does the same thing as clicking the form's <input type="reset"> control.
developer.mozilla.org developer.mozilla.org
Zum Vergrößern anklicken....
Dies mache ich ja schon bereits wie man in meinem HTML Text sehen kann.Jedoch ist es auf Dauer nicht sehr praktikabel wenn man über 200 Etiketten am Tag Drucken muss und von hand jede Eingabe Resten muss um neue Eingaben ausführen zu können!
 
Dies mache ich ja schon bereits wie man in meinem HTML Text sehen kann.Jedoch ist es auf Dauer nicht sehr praktikabel wenn man über 200 Etiketten am Tag Drucken muss und von hand jede Eingabe Resten muss um neue Eingaben ausführen zu können!
 
Das habe ich bemerkt. Du kannst die Funktion jedoch von Javascript aus beim Submit aufrufen, dann wird das Formular automatisch zurück gesetzt und Du brauchst den Button nicht mehr zu drücken:
Code: 
        google.script.run.processForm(formData);
                   form.reset();
        }
Mit "selbst machen" meinte ich das Hineinprogrammieren im JS.
 
Und ich suche wie blöde nach einer Lösung!
Danke Sempervivum für Ihre Hilfe, denn Sie haben mir damit sehr geholfen


​

 
Immer gern.
Wenn ich da lese, dass am Tag 200 Etiketten gedruckt werden müssen, frage ich mich, ob es keine Datenbasis gibt, wo man die Formulardaten auslesen und das Drucken vollständig automatisieren kann?
 
Zuletzt bearbeitet:
Dies gibt es, aber es gibt keine Möglichkeit das komplexe Wahren Wirtschaftssystem damit zu verbinden, das hat leider betriebliche, Gründe worauf ich leider nicht näher eingehen kann. Danke aber für die Idee, ich werde dies in meinem Betrieb mal bei nächster Gelegenheit ansprechen
 
Aber mal eine Frage gibt es eine Möglichkeit nach bei Drücken des Sumid Buttons automatisch das Druckerfenster (Druckereinstellung) von Google Docs zu öffnen, mit einer vordefinierten Druckereinstellung, den leider zerschießen die Mitarbeiter al zu oft die Druckereinstellung.
 

Anhänge

  • Bildschirmfoto vom 2024-07-19 09-52-59.png
    Bildschirmfoto vom 2024-07-19 09-52-59.png
    252,3 KB · Aufrufe: 1
Leider ist mein eigenes Wissen auf die Webentwicklung beschränkt und ich habe keine Ahnung von Google-Docs. Warte mal ab, ob sich da jemand anders meldet, wenn nicht, könnten wir versuchen, die Lösung mit Hilfe der Doku zu erarbeiten.
 
Sorry noch mal und noch mal vielen Dank!Ich habe aber ein kleines Problem,es funktioniert dermaßen gut daß es schon zu gut ist,denn es hat sich gezeigt das die Funktion
}
google.script.run.processForm(formData);
form.reset();
}
Je nach Arbeitsbereich und Arbeitsprozess nicht immer angebracht ist,daher meine Frage :ist es möglich so etwas wie ein On/Off funktion hinzu zu fügen in Form eines Switch Button?
 
Ich verstehe das so, dass es möglich sein soll, das automatische Reset an- und auszuschalten? Klar, das ist kein Problem, eine Checkbox, die das erledigt.

HTML: 
<label>
    Automatisches Reset ein- oder ausschalten:
    <input type="checkbox" id="reset-on">
</label>
Javascript: 
        google.script.run.processForm(formData);
        if (document.getElementById('reset-on').checked) {
                   form.reset();
        }
    }
(ungetestet)

Wegen des anderen Problems, Druckeinstellungen automatisch setzen, hatte ich auch ein wenig gegoogelt aber ich finde da keine Möglichkeit, auch nicht bei den Browser-Erweiterungen. Nur eine uralte Erweiterung für Firefox, die es inzwischen nicht mehr gibt.
 
himm funktioniert irgendwie nicht so wie es soll. Hier mal anbei meine gesamten Aufbau meiner HTML-Datei. Was mache ich falsche?

Code: 
<!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <style>
        body {
        background: #CE0000;
        background: -webkit-linear-gradient(0deg, #CE0000 10%, #A45C4C 50%, #FFFFFF 100%);
        font-family: Arial, Arial;
        margin: 0px;
        padding: 10px;
        }
        form {
        background-color: #fff;
        width: 260px;
        padding: 10px;
        border-radius: 20px;
        box-shadow: 0px 0px rgba(1,2,0.1);
        margin
        width:auto !important;
        }
        label {
        font-weight: bold;
        text-transform: uppercase;
        }
        input[type="search"] {
        width: 250px;
        padding: 15px;
        height: 50px;
        margin-bottom: 15px;
        border: 1px outset #FF0000;
        border-radius: 7px;
        font-size: 15pt;
        box-sizing: border-box;
        }
        input[type="button"] {
        display: block;
        margin: 0 auto 7px auto;
        cursor: pointer;
        width: 120px;
        padding: 15px 2px;
        background-color: #FF0000;
        color: white;
        text-transform: uppercase;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        border: 1px solid #FF0000;
        border-radius: 7px;
        transition: background 0.2s ease-out;
        }
        input[type="button1"]:hover {
        background-color: #19911b;
        }
        input[type="button"]:hover {
        background-color: #19911b;
        }
       
    </style>
   
</head>

<body>
    <form id="itemForm"autocomplete="off">
        <label for="sku">SKU:</label>
        <br>
        <input type="search" id="sku" name="sku">
        <br>
        <label for="description">Description:</label>
        <br>
        <input type="search" id="description" name="description">
        <br>
        <label for="color">Color:</label>
        <br>
        <input type="search" id="color" name="color">
        <br>
        <label for="size">Size:</label>
        <br>
        <input type="search" id="size" name="size">
        <br>

        <label>
       Autoreset ON/OFF:
       <input type="checkbox" id="reset-on">
       </label>

        <div style="display: flex">
            <input type="button" value="Submit" onclick="submitForm()">
            <input type="button" value="Reset" onclick="form.reset()">
           
        </div>
    </form>
   
    <script>
        function submitForm() {
        var form = document.getElementById('itemForm');
        var formData = {
        'sku': form.sku.value,
        'color': form.color.value,
        'size': form.size.value,
        'description': form.description.value
         };
        google.script.run.processForm(formData);
        form.reset()
        }
    </script>
</body>
 
Du hast meinem Code nicht richtig übernommen. So sollte es funktionieren:
Code: 
        <label>
       Autoreset ON/OFF:
       <input type="checkbox" id="reset-on">
       </label>

        <div style="display: flex">
            <input type="button" value="Submit" onclick="submitForm()">
            <input type="button" value="Reset" onclick="form.reset()">
            
        </div>
    </form>
    
    <script>
        function submitForm() {
            var form = document.getElementById('itemForm');
            var formData = {
                'sku': form.sku.value,
                'color': form.color.value,
                'size': form.size.value,
                'description': form.description.value
            };
            google.script.run.processForm(formData);
            // Prüfen ob das Formular zurück gesetzt werden soll:
            if (document.getElementById('reset-on').checked) {
                form.reset();
            }
        }
    </script>
 
Hopala ! Da hat der ganze PC Arbeit auf der Arbeit heute wohl seine spuren bei mir hinterlassen. Jetzt funktioniert es so weit nur wen ich den Haken setze, springt bei jeder eingab der hacken wider raus.
 
Das hat ganz den Anschein als ob die Seite neu geladen wird, weil das Formular abgeschickt wird. Wundert mich weil Du ja type="button" hast. Ich untersuche das ...
 
Da lag ich jetzt daneben. Durch unser reset wird natürlich auch die Checkbox zurück gesetzt. Lösung indem wir sie nach dem Reset neu setzen:
Code: 
    <script>
        function submitForm() {
            var form = document.getElementById('itemForm');
            var formData = {
                'sku': form.sku.value,
                'color': form.color.value,
                'size': form.size.value,
                'description': form.description.value
            };
            google.script.run.processForm(formData);
            // Prüfen ob das Formular zurück gesetzt werden soll:
            if (document.getElementById('reset-on').checked) {
                form.reset();
                // Auch die Checkbox wurde zurück gesetzt,
                // wir müssen sie neu setzen:
                document.getElementById('reset-on').checked = true;
            }
        }
    </script>
 
Zuletzt bearbeitet:
Danke Danke Danke! So scheint das ganze jetzt zu funktionieren. Jetzt muss ich nur noch ein paar Feinarbeiten machten, dann past das alles
 

Anhänge

  • Bildschirmfoto vom 2024-07-23 03-06-15.png
    Bildschirmfoto vom 2024-07-23 03-06-15.png
    354,6 KB · Aufrufe: 4
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben