Last active
August 29, 2015 14:26
-
-
Save softwarespot/f69282adfcbe51c84f07 to your computer and use it in GitHub Desktop.
Squirrel.js form example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment