Skip to content

Instantly share code, notes, and snippets.

@softwarespot
Last active August 29, 2015 14:26
Show Gist options
  • Save softwarespot/f69282adfcbe51c84f07 to your computer and use it in GitHub Desktop.
Save softwarespot/f69282adfcbe51c84f07 to your computer and use it in GitHub Desktop.
Squirrel.js form example
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment