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, uses the action-attribute of the <form> tag
 * to pick the URL, and calls the $.get() or $.post() method depending
 * on the value of the method-attribute.
 *
 * The data argument is optional, and can be an object with additional
 * values to append to the request data, or a string with URL-encoded
 * data to include.
 *
 * Examples of use:
 *
 *   $('#test-form').send(function(data) { result.html(data); });
 *   $('#test-form').send({abc:123}, function(data) { result.html(data); });
 *   $('#test-form').send('abc=123', function(data) { result.html(data); });
 *
 * @author Rasmus Schultz <rasmus@mindplay.dk>
 */
jQuery.fn.send = function( data, success, type ) {
    if ( this.length == 0 ) {
        return; // nothing to post
    }
    
    if ( !jQuery.nodeName( this.get(0), "form" ) ) {
        jQuery.error( 'only form elements can be posted' );
    }
   
    // shift arguments if data argument was omitted
    if ( jQuery.isFunction( data ) ) {
        type = success;
        success = data;
        data = undefined;
    }
    
    var
        url = this.prop( 'action' ),
        post = this.serializeArray(),
        method = ( this.attr('method') || 'GET' ).toLowerCase();
    
    if (typeof data == "object") {
        jQuery.merge(
            post,
            jQuery.map( data, function(v, i) {
                return { name:i, value:v };
            } )
        );
    }
    
    if (typeof data == "string") {
        post = jQuery.param( post, jQuery.ajaxSettings.traditional ) + "&" + data;
    }
    
    jQuery[method]( url, post, success, type );
    
    return this;
}