JSFiddle - React, Tailwind, and code Playground

by geekman

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<form id="sales-form" name="sales-form" method="post" action="" class="form-inline">
    <fieldset>
        <legend>Sale Item Form</legend>
        <div class="control-group">
            <label for="sale-name">Item name</label>
            <input type="text" id="sale-name" required="required" />
        </div>
        <div class="control-group">
            <label for="SaleType">Is your item new or used?</label>
            <div class="btn-group" id="divSaleType" data-toggle="buttons-radio" name="divSaleType">
                <button name="New" class="btn btn-info SaleTypeToggle" id="ContentPlaceHolder1_ContentPlaceHolder1_btnNew" type="button" value="new">New</button>
                <button name="Used" class="btn btn-info SaleTypeToggle" id="ContentPlaceHolder1_ContentPlaceHolder1_btnUsed" type="button" value="used">Used</button>
            </div>
            <input  type="hidden" name="SaleType" id="SaleType" required="required" />
        </div>
        <hr />
        <button class="btn btn-primary">Submit</button>
    </fieldset>
</form>

JavaScript

$(document).ready(function() {
    //Bind the click event to the parent div containing both buttons. Tell it to fire on any element containing the class btn.
    $('#divSaleType').on('click', '.btn', function () {
        $('#SaleType').val($(this).val());
    });

    //Validate the form
    $('#sales-form').validate({
        ignore: [],
        //For demo, show submitted values:
        submitHandler: function () {
            alert('Submitted form. Name: ' + $('#sale-name').val() + '; Sale type: ' + $('#SaleType').val());
        }
    });
    
    
});