JSFiddle - React, Tailwind, and code Playground

by KELVIN LEE

HTML

<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<!-- HOME Page -->
<div data-role="page" id="page1">
    <div data-theme="b" data-role="header" data-position="fixed">	<a href="#menu" data-icon="bars" class="ui-btn-left">Menu</a>

    </div>
    <!-- Panel Page ---->
    <div data-role="panel" id="menu" data-display="overlay">
        <ul data-role="listview">
            <li><a href="#formpage" data-prefetch="false">Goto Form Page</a>

            </li>
        </ul>
        <p><a data-role="button" data-rel="close">Close</a>

        </p>
    </div>
</div>
<!-- Form Page -->
<div data-role="page" id="formpage" data-add-back-btn="true">
    <div data-role="content">
        <form action="test.php" method="POST" id="form1" name="form1">
            <fieldset>
                <input type="text" name="field1" id="field1" />
                <input type="button" value="Button" name="btn01" id="btn01" />
                <input type="submit" value="Submit" id="submit_btn" />
            </fieldset>
        </form>
    </div>
</div>

JavaScript

$(document).ready(function () {

    $('#form1').submit(function (e) {
        //		$('#submit_btn').click(function(e) {
        e.preventDefault();
//        $('#submit_btn').val('Processing …').button('refresh');
  		$('#submit_btn').prev().text("Processing ...").delay( 1000 );
        $.ajax({
            type: "POST",
            dataType: "json",
            data: $('#form1').serialize(),
            url: $('#form1').attr('action'),
            complete: function (HttpRequest, textStatus) {
                console.log(HttpRequest.responseText);
//                $('#submit_btn').val('Create …').button('refresh');
                $('#submit_btn').prev().text('Create');
            }
        });
        return false;
    });
});