Rolf B: ToDo JavaScript/URL/createObjectURL Idee mit Umsetzung

Beitrag lesen

Hallo Samuel,

wer sich anbietet, erntet Kommentare 😉. Meine eigenen Beispiele mutieren auch immer einige Zeit lang vor sich hin, bis sie mir und anderen gefallen.

Nachdem ich deine Begründung für type="button" gelesen habe, fällt mir noch was auf.

Ein Form ohne Submit ist - meine ich - nicht so sinnvoll. Man kann aber, statt gar keinen Submit-Button zu haben, sich auf das submit-Event des Forms registrieren und im Submit-Handler mit event.preventDefault() den echten Submit unterbinden.

Ich würde das JS für das Beispiel dann so strukturieren:

document.addEventListener("DOMContentLoaded", function() {
	const formElement = document.forms.urlForm;
        
  // Submit auf Form abfangen
  formElement.addEventListener("submit", (submitEvent) => {
    // Echten Submit verhindern
    submitEvent.preventDefault();
    // URL erzeugen und im Link ablegen
    generateURL();     
  });

  function generateURL() {
  ...
  }
});

Den DOMContentLoaded-Rahmen lässt man im Wiki-Artikel weg.

Diese Variante verwendet im HTML dann nur noch

<button>Download-URL generieren</button>

Die anonyme Funktion, die den Submit-Handler bildet, kümmert sich um das Stoppen des Submit. Das ist "single responsibility" - eine Funktion hat die Ablaufsteuerung, die andere Funktion bestückt den Link.

In generateURL kannst Du formElement nutzen und auch dessen Komfortfunktionen verwenden, also z.B. formElement.input_text ansprechen statt mit getElementById("input_text") zu hantieren. Das Link-Element kriegst Du so nicht erreicht, a Elemente sind keine Formelemente und tauchen darum in der elements-Collection eines Forms nicht auf.

Das ist jetzt nur eine Anregung, kein Auftrag. Mein Fiddle sieht so aus: https://jsfiddle.net/Rolf_b/6qh4yrwe/. Die textarea hat bei mir box-sizing:border-box, weil eine textarea per Default padding und border hat und deswegen width:100% ohne das box-sizing zu breit ist. Und Gunnars Flexbox-Idee für den p Container hab ich aufgegriffen.

Rolf

--
sumpsi - posui - obstruxi