JSFiddle - React, Tailwind, and code Playground

by kritzikratzi

HTML

<!-- sorry for the markup, i couldn't be bothered ... -->
<a href="#" id="reset">reset all</a>

<br>

<form method="post" id="main">
    textfield: 
    <input type="text" name="textfield" value="default value">
    <a href="#" class="reset" rel="textfield">reset</a>
    <br>

    checkbox: 
    <input type="checkbox" name="checkbox" value="a">
    <input type="checkbox" name="checkbox" value="b" checked="checked">
    <a href="#" class="reset" rel="checkbox">reset</a>
    <br>

    radio: 
    <input type="radio" name="radio" value="a">
    <input type="radio" name="radio" value="b" checked="checked">
    <a href="#" class="reset" rel="radio">reset</a>
    <br>
    
    select: 
    <select name="select">
        <option value="a">a</option>
        <option value="b" selected="selected">b</option>
        <option value="c">c</option>
    </select>
    <a href="#" class="reset" rel="select">reset</a>
    <br>
    
    textarea: 
    <textarea name="textarea">my default value ...</textarea>
    <a href="#" class="reset" rel="textarea">reset</a>
    
    <br>
</form>

JavaScript

(function( $ ){
    $.fn.resetValue = function() {  
        return this.each(function() {
            var $this = $(this); 
            var node = this.nodeName.toLowerCase(); 
            var type = $this.attr( "type" ); 
            
            if( node == "input" && ( type == "text" || type == "password" ) ){
                this.value = this.defaultValue; 
            }
            else if( node == "input" && ( type == "radio" || type == "checkbox" ) ){
                this.checked = this.defaultChecked; 
            }
            else if( node == "input" && ( type == "button" || type == "submit" || type="reset" ) ){ 
                // we really don't care 
            }
            else if( node == "select" ){
                this.selectedIndex = $this.find( "option" ).filter( function(){
                    return this.defaultSelected == true; 
                } ).index();
            }
            else if( node == "textarea" ){
                this.value = this.defaultValue; 
            }
            // not good... unknown element, guess around
            else if( this.hasOwnProperty( "defaultValue" ) ){
                this.value = this.defaultValue; 
            }
            else{
                // panic! must be some html5 crazyness
            }
        });
    }
} )(jQuery);

        
// example usage ... 
$( "#reset" ).click( function(){
    
    // reset all input fields/textareas/selects
    $( ":input" ).resetValue(); 
    
    // note that because of the way the plugin was written 
    // you have to select each element individually, i.e. 
    // use $( "form :input" ).resetValue() instead of
    // $( "form" ).resetValue() which won't work. 
    // for that you have a built-in javascript function: 
    // $( "form" ).get(0).reset(); 
} ); 

        
// reset a single element only, referenced by name as stored in the "rel"
$( ".reset" ).click( function(){
    $( "[name=" + this.rel + "]" ).resetValue(); 
} );