JSFiddle - React, Tailwind, and code Playground

by Ender

HTML

<form id="my_form" action method="GET" class="span-11 inline"> 
    <fieldset> 
        
        <div class='span-5'> 
            <label for="msat_size">Msat Size:</label> 
        </div> 
        
        <div class='span-5 last'> 
            <select id="msat_size" name="msat_size"><option value="mono">Mono</option><option value="di">Di</option><option value="tri">Tri</option></select> 
        </div> 
        
        <div class='span-5'> 
            <label for="msat_length">Msat Length:</label> 
        </div> 
        <div class='span-5 last'> 
            <input class="text" id="msat_length" maxlength="3" name="msat_length" size="3" style="width:48px" type="text" value="0" /> 
        </div> 
        
        <div class='span-5'> 
            <label for="msat_perfect">Perfect Msats:</label> 
        </div> 
        <div class='span-5 last'> 
            <input id="msat_perfect" name="msat_perfect" type="checkbox" value="y" /> 
        </div> 
        
        <div class='span-5'> 
            <label for="combine_loci">Combine Microsatellites:</label> 
        </div> 
        <div class='span-5 last'> 
            <input id="combine_loci" name="combine_loci" type="checkbox" value="y" /> 
        </div> 
        
        <div class='span-5'> 
            <label for="design_primers">Design Primers:</label> 
        </div> 
        <div class='span-5 last'> 
            <input id="design_primers" name="design_primers" type="checkbox" value="y" /> 
        </div> 
        
        <div class='span-5'> 
            <label for="tag_primers">Tag Primers:</label> 
        </div> 
        <div class='span-5 last'> 
            <select id="tag_primers" name="tag_primers"><option selected="selected" value="None">No Tag</option><option value="cag">CAG Tag</option><option value="m13">M13R Tag</option></select> 
        </div> 
        
        <div class='span-5 prepend-5 last'> 
            <button id="submit_msats" name="submit_msats" type="button"...

JavaScript

$(function() {
    $('.button').bind('click', function() {
        alert($(this).closest('form').serialize());
        return false;
    });
});