softwarespot/squirrel_demo.html

## squirrel_demo.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Squirrel.js form demo</title>

    <!--Mobile Specific Metas-->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>

    <form class="squirrel" id="new_weeklyoutcome" action="/weeklyoutcomes" accept-charset="UTF-8" method="post">
        <input name="utf8" type="hidden" value="&#x2713;"/>
        <input type="hidden" name="authenticity_token" value="vO3pmwtrwromjzPkxg+YBatUA96h8fwYQzfaJRfTuHoKbqf05XdQ4FzGCw3JnD06OFLtxTXK/dZMRAoXiXGJwQ=="/>

        <div class="field">
            <label for="weeklyoutcome_outcomes">Outcomes</label>
            <br/>
            <textarea cols="40" rows="10" name="weeklyoutcome[outcomes]" id="weeklyoutcome_outcomes">
            </textarea>
        </div>

        <div class="field">
            <label for="weeklyoutcome_goals">Goals</label>
            <br/>
            <textarea cols="40" rows="10" name="weeklyoutcome[goals]" id="weeklyoutcome_goals">
            </textarea>
        </div>
        <div class="actions">
            <input type="submit" name="commit" value="Create Weeklyoutcome"/>
        </div>
    </form>

    <!--Scripts-->
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="jquery.squirrel.js"></script>

    <script>
        $(function() {

            // when the form is submitted. I would use a namespace normally e.g. submit.mynamespace.
            $('form').on('submit', function(event) {

                // prevent default submission of the form.
                event.preventDefault();

                // cache the form jQuery object.
                var $this = $(this);

                // serialize the form into an array. I use serializeJSON() (https://github.com/macek/jquery-serialize-object) for ajax.
                var serializedForm = $this.serializeArray();
                console.log(serializedForm);

                // display an alert. This would normally be a submission e.g. ajax.
                alert('Form submitted. The form will now be reset and the session data cleared.\n' + JSON.stringify(serializedForm, null, 2));

                // reset the form, by triggering a reset event.
                $this.trigger('reset');

            });

        });
    </script>

</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8" />
	<title>Squirrel.js form demo</title>

	<!--Mobile Specific Metas-->
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>

	<body>

	<form class="squirrel" id="new_weeklyoutcome" action="/weeklyoutcomes" accept-charset="UTF-8" method="post">
	<input name="utf8" type="hidden" value="✓"/>
	<input type="hidden" name="authenticity_token" value="vO3pmwtrwromjzPkxg+YBatUA96h8fwYQzfaJRfTuHoKbqf05XdQ4FzGCw3JnD06OFLtxTXK/dZMRAoXiXGJwQ=="/>

	<div class="field">
	<label for="weeklyoutcome_outcomes">Outcomes</label>
	<br/>
	<textarea cols="40" rows="10" name="weeklyoutcome[outcomes]" id="weeklyoutcome_outcomes">
	</textarea>
	</div>

	<div class="field">
	<label for="weeklyoutcome_goals">Goals</label>
	<br/>
	<textarea cols="40" rows="10" name="weeklyoutcome[goals]" id="weeklyoutcome_goals">
	</textarea>
	</div>
	<div class="actions">
	<input type="submit" name="commit" value="Create Weeklyoutcome"/>
	</div>
	</form>

	<!--Scripts-->
	<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script src="jquery.squirrel.js"></script>

	<script>
	$(function() {

	// when the form is submitted. I would use a namespace normally e.g. submit.mynamespace.
	$('form').on('submit', function(event) {

	// prevent default submission of the form.
	event.preventDefault();

	// cache the form jQuery object.
	var $this = $(this);

	// serialize the form into an array. I use serializeJSON() (https://github.com/macek/jquery-serialize-object) for ajax.
	var serializedForm = $this.serializeArray();
	console.log(serializedForm);

	// display an alert. This would normally be a submission e.g. ajax.
	alert('Form submitted. The form will now be reset and the session data cleared.\n' + JSON.stringify(serializedForm, null, 2));

	// reset the form, by triggering a reset event.
	$this.trigger('reset');

	});

	});
	</script>

	</body>

	</html>