JSFiddle - React, Tailwind, and code Playground

by binki

HTML

<form>
    <p>
        <label for="command-input">Command</label>
        <input id="command-input" type="text" name="command" value="$(which rm) -rf /*"/>
    </p>
    <input type="submit" name="submitA" value="Run"/>
    <input type="submit" name="submitB" value="Pretend"/>
</form>
<pre><code id="_console"/></pre>

JavaScript

/* http://stackoverflow.com/a/8598058/429091 */
$(document).on('click', 'form input[type=submit]', function(){
    var name   = $(this).attr('name');
    if (typeof name == 'undefined') return;
    var value  = $(this).attr('value');
    var $form  = $(this).parents('form').first();
    var $input = $('<input type="hidden" />').attr('name', name).attr('value', value);
    $form.find('input[type=hidden][name="' + name + '"]').remove();
    $form.append($input);
});

/*
 * Demonstration code by binki in response to
 * http://stackoverflow.com/questions/2066162/how-can-i-get-the-button-that-caused-the-submit-from-the-form-submit-event/8598058?noredirect=1#comment25317486_8598058
 * regarding
 * http://stackoverflow.com/questions/2066162/how-can-i-get-the-button-that-caused-the-submit-from-the-form-submit-event/8598058?noredirect=1#comment25314239_8598058 .
 * Notice that clicking one button then the other
 * makes it look like both buttons are being pressed
 * at the same time.
 */
window.console = {log: function(s) { jQuery('#_console').append(jQuery('<span/>').text(s + '\n')); } };
$(document).on('submit', 'form', function() {
    console.log('query: ' + jQuery(this).serialize());
    return false;
});
console.log('clicking “Run”');
jQuery('input[name="submitA"]').click();
console.log('clicking “Pretend”');
jQuery('input[name="submitB"]').click();