JSFiddle - React, Tailwind, and code Playground

by Matthias Kaschubowski

HTML

<form accept-charset="utf-8" id="form">
  <div>
    <label for="name">
      Name
    </label>
    <input type="text" id="name" name="name" required>
  </div> 
  <div>
    <label for="alter">
      Alter
    </label>
    <input type="number" id="alter" name="age" min="1" max="120" required>
  </div>
  <div>
    <label for="job">
      Job
    </label>
    <select id="job" name="job" required>
      <option value="Praktikant">Praktikant</option>
      <option value="Geselle">Geselle</option>
      <option value="Meister">Meister</option>
    </select>
  </div>
  <hr />
  <button type="submit">
    Exportieren...
  </button>
</form>

JavaScript

$('#form').submit(function(event) {
	event.preventDefault();
  
  var data = {
  	name: $('#name').val(),
    age: $('#alter').val(),
    job: $('#job').val(),
  };
  
  var event = document.createEvent('HTMLEvents');
  event.initEvent('click'); 
  
  $('<a />', {
  	download: 'data.json',
    href: 'data:text/json,' + JSON.stringify(data)
  }).get(0).dispatchEvent(event);
});