JSFiddle - React, Tailwind, and code Playground

by ryanttb

HTML

<form>
    <label><span>text</span>
<input type="text" name="atext" value="" />
    </label>
    <fieldset>
        <legend>radio</legend>
        <label><input type="radio" name="aradio" value="opt1" /> one</label>
        <label><input type="radio" name="aradio" value="opt2" /> two</label>
    </fieldset>
<button type="reset">undo all</button>
</form>

JavaScript

function bindDefaults() {
    // clear all default values
    $("input:text").attr("value", "");
    $("input:radio,input:checkbox").removeAttr("checked");

    // use .attr(value) instead of .val
    $("input[name='atext']").attr("value", "my default");
    $("input[name='aradio'][value='opt2']").attr("checked", "checked");

    // now the reset button will return your form to these bound values
}

bindDefaults();