JSFiddle - React, Tailwind, and code Playground

by julianlam

HTML

<form id="form">
    <p>
        <label for="input1">Input 1</label>
        <input type="text" id="input_1" />
    </p>
    <p>
        <label for="input2">Input 2</label>
        <input type="text" id="input_2" />
    </p>
</form>

<button id="export">Export</button>

JavaScript

var referenceObject = {
    input: {
        1: '',
        2: ''
    }
}

var formEl = document.getElementById('form'),
    split_vals;

formEl.addEventListener('change', function(e) {
    if (e.target.nodeName === 'INPUT') {
        split_vals = e.target.id.split('_');
        referenceObject[split_vals[0]][split_vals[1]] = e.target.value;
        alert('saved: ' +  e.target.value);
    }
}, false);

document.getElementById('export').addEventListener('click', function() {
    alert(JSON.stringify(referenceObject));
}, false);