JSFiddle - React, Tailwind, and code Playground

by teynon

HTML

<form method="GET" target="_blank">
    <select name="theValue">
        <option value="one">une</option>
        <option value="two">deux</option>
        <option value="three">troise</option>
        <option value="four">quatre</option>
        <option value="five">cinq</option>
        <option value="six">six</option>
    </select>
    current value: <span id="value"></span><br />
    last onchange value: <span id="onchange"></span><br />
    <span id="submitCount"></span>    
    <input type="button" value="Delayed Submit" onClick="submitSoon();" />
</form>

JavaScript

function getValue() {
    $("#value").text($("select").val());
}

var countdown = 5;
function submitSoon() {
    if (countdown > 0) {
        countdown--;
        $("#submitCount").text("Submitting in " + countdown);
        setTimeout(submitSoon, 1000);
    }
    else {
        $("form").submit();
    }
}

$("select").on("change", function() {
    $("#onchange").text($(this).val());
});

setInterval(getValue, 100);