JSFiddle - React, Tailwind, and code Playground

by mindplay

HTML

<html>
    <head>
        <title>post function test</title>
    </head>
    <body>
        <p>Sorry, there's no working example here at the moment, because most of the
            sites I could use for testing don't allow XSS...</p>
        
        <form autocomplete="off" method="get" action="http://api.jquery.com" id="test-form">
            <input type="hidden" name="ns0" value="1">
            <input type="text" name="s" value="post">
            <input type="hidden" name="go" value="">
        </form>
        <div id="test-result">
        </div>
    </body>
</html>

JavaScript

/**
 * This function allows you to GET or POST a <form> without doing
 * the grunt work every time - it automatically picks up the input
 * values from the form, and auto-configures with these defaults:
 * 
 *   type: GET or POST (from the method-attribute of the form tag)
 *   url: fully qualified URL (from the action-attribute)
 *   data: serialized form data ( using .serialize() )
 *
 * Examples of use:
 *
 *   $('#test-form').ajax();
 *   $('#test-form').ajax({type:'POST'});
 *   $('#test-form').ajax({data:'x=123', success:function(){...}});
 *
 * @author Rasmus Schultz <rasmus@mindplay.dk>
 */
jQuery.fn.ajax = function( options ) {
    options = options || {};
    
    if ( jQuery.nodeName( this.get(0), "form" ) ) {
        options.url = options.url || this.prop( 'action' );
        options.type = options.type ||
            ( this.attr('method') || 'GET' ).toUpperCase()
    }
    options.data = options.data || this.serialize();
    
    jQuery.ajax( options );
    
    return this;
}

$('#test-form').ajax();