JSFiddle - React, Tailwind, and code Playground

by adeneo

HTML

<form id="myForm">
    <input type="text" id="name" name="name" placeholder="Name" />

    <input type="email" id="mail" name="email" placeholder="Email" />

    <input type="number" id="phoneNumber" name="phone" placeholder="Phone Number" />

    <label for="emailFormat">Email Signup Format:</label>
    <select name="newsletter" id="plain">
        <option value="Plain">Plain Text</option>
        <option value="HTML">HTML</option>
    </select>

    <label for="pets">Cars owned:</label>
    <input type="checkbox" id="mini" class="ck" name="mini">I have a mini.
    <input type="checkbox" id="motorbike" class="ck" name="motorbike">I have a motorbike.
    <input type="checkbox" id="thundercar" class="ck" name="thundercar">I have a thundercar.
    <input type="checkbox" id="brum" class="ck" name="brum">I have a brum.
    <input type="checkbox" id="roadrunner" class="ck" name="roadrunner">I have a roadrunner.

    <button type="submit" id="button">SUBMIT</button>
</form>

JavaScript

var form = document.getElementById("myForm");

form.addEventListener("keyup", store);
form.addEventListener("click", store);

function store(event) {
    console.log(event.target.id);
    console.log(event.target.value);
}