JSFiddle - React, Tailwind, and code Playground

by justjohn

HTML

<link rel="stylesheet" href="https://ui.phpfoundry.com/foundry-ui.css">
<script src="https://ui.phpfoundry.com/foundry-ui.js"></script>
<link rel="stylesheet" href="https://hub.phpfoundry.com/rc/css/reset.css">
<div class="form_box">
    <h2>Add Document</h2>
    <div class="form_box_padding">
        <form action="http://phpfoundry.com:9999/doc" method="post" id="docpost"> 
            <label class="form_label required" for="title">Title: </label>
            <input type="text" name="title" id="title" value="" />
            
            <label class="form_label required" for="author">Author: </label>
            <input type="text" name="author" id="author" value="" />
            
            <label class="form_label" for="body">Text: </label>
            <textarea name="body" id="body" rows="10"></textarea>
            
            <div class="form_submit">
                <input type="submit" value="Post" /> 
                <a href="#" class="button">Cancel</a>
            </div>
        </form>
    </div>
</div>

CSS

html {
    background:#F9F9F9;
}
* {
    font-family:Calibri, Helvetica, Arial, sans-serif;
}

.form_box .required {
    font-weight:bold;
}

JavaScript

$("input, textarea").addClass("form");
$("input:submit, input:button, a.button, button").addClass("form_btn").removeClass("form");

$("#docpost").submit(function() {
    $.ajax({
        type: $(this).attr("method"),
        url: $(this).attr("action"),
        data: $(this).serialize(),
        success: function(data) {
            alert(data.result);
        },
        dataType: "json"
    });
    return false;
});

$('a.button').bind('dragstart', function(event) { event.preventDefault(); });
$('a.button').mouseover(function() {
    window.status = '';
    return true;
});
$('a.button').mousemove(function() {
    window.status = '';
    return true;
});


UI.init();