</style>
</head>
<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">
</form>
<div id="container">
<div class="box1">
<input type="button" value="Submit" onclick="submitForm()">
</div>
<div class="box2">
<input type="button" value="Reset" onclick="form.reset()">
</div>
</div>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="reset-on">
<label class="onoffswitch-label" for="reset-on">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</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>
<div align='center'>
<br>
<br>
<img
</div>
<label for="language">Language:</label>
<select name="language" id="language">
<option value="EN">EN</option>
<option value="DE">DE</option>
<option value="PL">PL</option>
</script>
<div align='center'>
<br>
<br>
<img
</div>
<label for="language">Language:</label>
<select name="language" id="language">
<option value="EN">EN</option>
<option value="DE">DE</option>
<option value="PL">PL</option>
<script>
< /div>
// Labels fest legen:
<script>
const labels = {
EN: {
// Links vom Doppelpunkt: Die ID des Inputs bzw.
// der Wert des for-Attributs des Labels
// Rechts vom Doppelpunkt: Die Beschriftung
description: 'Description',
color: 'Color',
size: 'Size',
reset: 'Reset',//<input type="button"
//submit: 'Submit',//<input type="button"
//details: 'Item Details'
// auto reset: 'Auto Reset'//<input type="button"
},
DE: {
description: 'Beschreibung',
color: 'Farbe',
size: 'Größe',
auto reset: 'Automatisches Zurücksetzen ',//<input type="button"
// submit: 'Einreichen',//<input type="button"
//details: 'Item Details'
//auto reset: 'Automatisches Zurücksetzen'//<input type="button"
// usw.
},
PL: {
description: 'Opis',
color: 'Kolor',
size: 'Rozmiar',
auto reset: 'automatyczny reset',//<input type="button"
//submit: 'Składać',//<input type="button"
//details: 'Item Details'
auto reset: 'automatyczny reset',//<input type="button"
// usw.
}
}
theForm = document.querySelector('#itemForm');
// Eventlistener für "change" für das window-Objekt registrieren:
window.addEventListener('change', event => {
// Hat sich der Zustand einer Checkbox für die
// Auswahl der Sprache geändert?
if (event.target.name = 'lang-choose') {
const
// Die Liste der Beschriftungen für die gewählte
// Sprache bereit stellen:
labelList = labels[event.target.value];
// Über die Beschriftungen in der Liste:
for (id in labelList) {
// Im Label, das als for-Attribut die aktuelle ID hat
// die Beschriftung auf den Wert des Eintrags setzen:
theForm.querySelector(`label[for="${id}"]`).textContent = labelList[id];
}
}
});
</script>
